Merge branch 'master' of github.com:sagemathinc/cocalc

Author: williamstein

src/packages/frontend/collaborators/current-collabs.tsx

@@ -5,6 +5,7 @@
 
 import { Button, Card, Popconfirm } from "antd";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { CSS, redux, useRedux } from "@cocalc/frontend/app-framework";
 import {
@@ -15,6 +16,7 @@ import {
   Title,
 } from "@cocalc/frontend/components";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
+import { labels } from "@cocalc/frontend/i18n";
 import { CancelText } from "@cocalc/frontend/i18n/components";
 import { Project } from "@cocalc/frontend/project/settings/types";
 import { COLORS } from "@cocalc/util/theme";
@@ -30,6 +32,7 @@ interface Props {
 export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
   const { project, user_map, mode = "project" } = props;
   const isFlyout = mode === "flyout";
+  const intl = useIntl();
   const get_account_id = useRedux("account", "get_account_id");
   const sort_by_activity = useRedux("projects", "sort_by_activity");
   const student = useStudentProjectFunctionality(project.get("project_id"));
@@ -47,17 +50,24 @@ export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
     if (account_id === get_account_id()) {
       return (
         <div style={style}>
-          Are you sure you want to remove <b>yourself</b> from this project? You
-          will no longer have access to this project and cannot add yourself
-          back.
+          <FormattedMessage
+            id="collaborators.current-collabs.remove_self"
+            defaultMessage={`Are you sure you want to remove <b>yourself</b> from this project?
+              You will no longer have access to this project and cannot add yourself back.`}
+          />
         </div>
       );
     } else {
       return (
         <div style={style}>
-          Are you sure you want to remove{" "}
-          <User account_id={account_id} user_map={user_map} /> from this
-          project? They will no longer have access to this project.
+          <FormattedMessage
+            id="collaborators.current-collabs.remove_other"
+            defaultMessage={`Are you sure you want to remove {user} from this project?
+              They will no longer have access to this project.`}
+            values={{
+              user: <User account_id={account_id} user_map={user_map} />,
+            }}
+          />
         </div>
       );
     }
@@ -84,7 +94,7 @@ export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
             ...(isFlyout ? { color: COLORS.ANTD_RED_WARN } : {}),
           }}
         >
-          <Icon name="user-times" /> Remove ...
+          <Icon name="user-times" /> {intl.formatMessage(labels.remove)} ...
         </Button>
       </Popconfirm>
     );
@@ -150,8 +160,11 @@ export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
     }
   }
 
-  const introText =
-    "Everybody listed below can collaboratively work with you on any notebooks, terminals or files in this project, and add or remove other collaborators.";
+  const introText = intl.formatMessage({
+    id: "collaborators.current-collabs.intro",
+    defaultMessage:
+      "Everybody listed below can collaboratively work with you on any Jupyter Notebook, Linux Terminal or file in this project, and add or remove other collaborators.",
+  });
 
   switch (mode) {
     case "project":
@@ -166,7 +179,14 @@ export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
       return (
         <div style={{ paddingLeft: "5px" }}>
           <Title level={3}>
-            <Icon name="user" /> Current Collaborators
+            <Icon name="user" />{" "}
+            <FormattedMessage
+              id="collaborators.current-collabs.title"
+              defaultMessage={"Current Collaborators"}
+              description={
+                "Title of a table listing users collaborating on that project"
+              }
+            />
           </Title>
           <Paragraph
             type="secondary"

src/packages/frontend/components/loading.tsx

@@ -4,8 +4,10 @@
  */
 
 import { CSSProperties } from "react";
+import { useIntl } from "react-intl";
 
 import { TypedMap, useDelayedRender } from "@cocalc/frontend/app-framework";
+import { labels } from "@cocalc/frontend/i18n";
 import { Icon } from "./icon";
 
 export type Estimate = TypedMap<{
@@ -31,7 +33,7 @@ const LOADING_THEMES: { [keys: string]: CSSProperties } = {
     color: "#888",
     background: "white",
   },
-};
+} as const;
 
 export function Loading({
   style,
@@ -41,6 +43,8 @@ export function Loading({
   delay,
   transparent = false,
 }: Props) {
+  const intl = useIntl();
+
   const render = useDelayedRender(delay ?? 0);
   if (!render) {
     return <></>;
@@ -55,7 +59,8 @@ export function Loading({
       }}
     >
       <span>
-        <Icon name="cocalc-ring" spin /> {text ?? "Loading..."}
+        <Icon name="cocalc-ring" spin />{" "}
+        {text ?? intl.formatMessage(labels.loading)}
       </span>
       {estimate != undefined && (
         <div>

src/packages/frontend/course/configuration/upgrades.tsx

@@ -6,6 +6,7 @@
 // Upgrading quotas for all student projects
 
 import { Alert, Card, Divider, Form, Radio, Switch, Typography } from "antd";
+import { delay } from "awaiting";
 
 import { alert_message } from "@cocalc/frontend/alerts";
 import {
@@ -37,8 +38,8 @@ import {
   Tip,
   UPGRADE_ERROR_STYLE,
 } from "@cocalc/frontend/components";
-import { SiteLicenseInput } from "@cocalc/frontend/site-licenses/input";
 import Next from "@cocalc/frontend/components/next";
+import { SiteLicenseInput } from "@cocalc/frontend/site-licenses/input";
 import { SiteLicensePublicInfoTable } from "@cocalc/frontend/site-licenses/site-license-public-info";
 import { SiteLicenses } from "@cocalc/frontend/site-licenses/types";
 import { ShowSupportLink } from "@cocalc/frontend/support";
@@ -61,7 +62,6 @@ import {
 } from "../store";
 import { SiteLicenseStrategy, UpgradeGoal } from "../types";
 import { ConfigurationActions } from "./actions";
-import { delay } from "awaiting";
 
 const radioStyle: CSS = {
   display: "block",