Merge remote-tracking branch 'origin/master' into sagews-soft-deprecation

Author: haraldschilly

src/packages/frontend/project/explorer/action-bar.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import * as immutable from "immutable";
-import { HiddenSM, Icon, Gap } from "../../components";
+import { FormattedMessage } from "react-intl";
+
+import { HiddenSM, Icon, Gap } from "@cocalc/frontend/components";
 import { COLORS } from "@cocalc/util/theme";
 import { ComputeImages } from "@cocalc/frontend/custom-software/init";
 import { ProjectActions } from "@cocalc/frontend/project_store";
@@ -15,10 +17,10 @@ import {
   ButtonGroup,
   ButtonToolbar,
 } from "@cocalc/frontend/antd-bootstrap";
-
 import { CustomSoftwareInfo } from "@cocalc/frontend/custom-software/info-bar";
 import * as misc from "@cocalc/util/misc";
 import { file_actions } from "@cocalc/frontend/project_store";
+import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 
 const ROW_INFO_STYLE = {
   color: COLORS.GRAY,
@@ -41,8 +43,6 @@ interface Props {
   project_is_running?: boolean;
 }
 
-import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
-
 export const ActionBar: React.FC<Props> = (props: Props) => {
   const [select_entire_directory, set_select_entire_directory] = React.useState<
     "hidden" | "check" | "clear"
@@ -166,7 +166,13 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
           <span>{`${total} ${misc.plural(total, "item")}`}</span>
           <div style={{ display: "inline" }}>
             {" "}
-            &mdash; Click checkbox to the left of a file to copy, download, etc.
+            &mdash;{" "}
+            <FormattedMessage
+              id="project.explorer.action-bar.currently_selected.info"
+              defaultMessage={
+                "Click checkbox to the left of a file to copy, download, etc."
+              }
+            />
           </div>
         </div>
       );

src/packages/frontend/project/explorer/misc-side-buttons.tsx

@@ -5,7 +5,7 @@
 
 import { join } from "path";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessage, useIntl } from "react-intl";
 
 import {
   Button,
@@ -23,6 +23,11 @@ import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 import { serverURL, SPEC } from "../named-server-panel";
 import TourButton from "./tour/button";
 
+const OPEN_MSG = defineMessage({
+  id: "project.explorer.misc-side-buttons.open_dir.tooltip",
+  defaultMessage: `Opens the current directory in a {name} server instance, running inside this project.`,
+});
+
 interface Props {
   actions: ProjectActions;
   available_features?: Available;
@@ -143,12 +148,12 @@ export const MiscSideButtons: React.FC<Props> = (props) => {
     const abspath = join(homeDirectory, current_path ?? "");
     // setting ?folder= tells VS Code to open that directory
     const url = `${serverURL(project_id, "code")}?folder=${abspath}`;
+    const values = { name: SPEC.code.longName };
+    const tooltip = intl.formatMessage(OPEN_MSG, values);
+    const description = intl.formatMessage(SPEC.code.description, values);
     return (
       <LinkRetry href={url} mode="button">
-        <Tip
-          title={`Opens the current directory in a Visual Studio Code IDE server instance, running inside this project. ${SPEC.code.description}`}
-          placement="bottom"
-        >
+        <Tip title={`${tooltip} ${description}`} placement="bottom">
           <Icon name={SPEC.code.icon} /> <VisibleLG>VS Code</VisibleLG>
         </Tip>
       </LinkRetry>
@@ -163,12 +168,12 @@ export const MiscSideButtons: React.FC<Props> = (props) => {
     // we make sure the url ends wiht a slash, without messing up the full URL
     const s = base.slice(base.length - 1) === "/" ? "" : "/";
     const url = `${base}${s}${current_path ? "lab/tree/" + current_path : ""}`;
+    const values = { name: SPEC.code.longName };
+    const tooltip = intl.formatMessage(OPEN_MSG, values);
+    const description = intl.formatMessage(SPEC.jupyterlab.description, values);
     return (
       <LinkRetry href={url} mode="button">
-        <Tip
-          title={`Opens the current directory in a JupyterLab server instance, running inside this project. ${SPEC.jupyterlab.description}`}
-          placement="bottom"
-        >
+        <Tip title={`${tooltip} ${description}`} placement="bottom">
           <Icon name={SPEC.jupyterlab.icon} /> <VisibleLG>JupyterLab</VisibleLG>
         </Tip>
       </LinkRetry>

src/packages/frontend/project/named-server-panel.tsx

@@ -9,8 +9,9 @@ Jupyter notebook server is running, then pops it up in a new tab.
 */
 
 import { join } from "path";
-import React from "react";
+import { defineMessage, FormattedMessage, useIntl } from "react-intl";
 
+import { CSS } from "@cocalc/frontend/app-framework";
 import {
   Icon,
   IconName,
@@ -20,16 +21,23 @@ import {
 import LinkRetry from "@cocalc/frontend/components/link-retry";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
+import { IntlMessage } from "@cocalc/frontend/i18n";
 import track from "@cocalc/frontend/user-tracking";
 import { R_IDE } from "@cocalc/util/consts/ui";
 import { capitalize } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { NamedServerName } from "@cocalc/util/types/servers";
 import { useAvailableFeatures } from "./use-available-features";
 
+const LAUNCHING_SERVER = defineMessage({
+  id: "project.named-server-panel.launching_server",
+  defaultMessage: "Launching server...",
+  description: "A web-service is starting.",
+});
+
 interface Server {
   longName: string;
-  description: React.ReactNode;
+  description: IntlMessage;
   usesBasePath: boolean;
   icon: IconName;
 }
@@ -39,46 +47,59 @@ export const SPEC: {
 } = {
   jupyter: {
     longName: "Jupyter Classic Notebook",
-    description: `The Jupyter Classic notebook server runs in your project and provides
-support for classical Jupyter notebooks. You can also use the plain
-classical Jupyter notebook server directly via the link below. This
-does not support multiple users or TimeTravel, but fully supports all
-classical Jupyter notebook features and extensions.`,
+    description: defineMessage({
+      id: "project.named-server-panel.spec.jupyter.description",
+      defaultMessage: `The Jupyter Classic notebook server runs in your project and provides
+      support for classical Jupyter notebooks.
+      You can also use the plain classical Jupyter notebook server directly via the link below.
+      This does not support multiple users or TimeTravel,
+      but fully supports all classical Jupyter notebook features and extensions.`,
+    }),
     usesBasePath: true,
     icon: "ipynb",
   },
   jupyterlab: {
     longName: "JupyterLab Notebook",
-    description: `The JupyterLab server runs from your project and provides support for
-Jupyter notebooks, terminals, drag and drop, with a nice multiwindow
-layout, and much more. JupyterLab does not yet support multiple users
-or TimeTravel, but fully supports most Jupyter notebook features and
-extensions.`,
+    description: defineMessage({
+      id: "project.named-server-panel.spec.jupyterlab.description",
+      defaultMessage: `The JupyterLab server runs from your project and provides support for Jupyter notebooks,
+      terminals, drag and drop, with a nice multiwindow layout, and much more.
+      JupyterLab does not yet support multiple users or TimeTravel,
+      but fully supports most Jupyter notebook features and extensions.`,
+    }),
     usesBasePath: true,
     icon: "ipynb",
   },
   code: {
     longName: "Visual Studio Code",
-    description: `Visual Studio Code is a source-code editor made by Microsoft. Features
-include support for debugging, syntax highlighting, intelligent
-code completion, snippets, code refactoring, and embedded Git.`,
+    description: defineMessage({
+      id: "project.named-server-panel.spec.code.description",
+      defaultMessage: `Visual Studio Code is a source-code editor made by Microsoft.
+      Features include support for debugging, syntax highlighting,
+      intelligent code completion, snippets, code refactoring, and embedded Git.`,
+    }),
     usesBasePath: false,
     icon: "vscode",
   },
   pluto: {
     longName: "Julia Pluto.jl",
-    description: (
-      <>
-        Reactive notebooks for Julia.{" "}
-        <b>NOTE: Pluto may take a long time to start, so be patient.</b>
-      </>
-    ),
+    description: defineMessage({
+      id: "project.named-server-panel.spec.pluto.description",
+      defaultMessage: `Reactive notebooks for Julia.
+      <b>NOTE: Pluto may take a long time to start, so be patient.</b> `,
+    }),
+
     usesBasePath: false,
     icon: "julia",
   },
   rserver: {
     longName: R_IDE,
-    description: `This is an integrated development environment (IDE) for R, sometimes called "R Studio". It is provided without any modifications. DISCLAIMER: Posit Software, PBC (formerly RStudio, PBC) IS IN NO WAY ASSOCIATED WITH COCALC.`,
+    description: defineMessage({
+      id: "project.named-server-panel.spec.rserver.description",
+      defaultMessage: `This is an integrated development environment (IDE) for R, sometimes called "R Studio".
+      It is provided without any modifications.
+      <b>DISCLAIMER: Posit Software, PBC (formerly RStudio, PBC) IS IN NO WAY ASSOCIATED WITH COCALC.</b>`,
+    }),
     usesBasePath: false,
     icon: "r",
   },
@@ -89,66 +110,76 @@ function getServerInfo(name: NamedServerName): Server {
     SPEC[name] ?? {
       icon: "server",
       longName: `${capitalize(name)} Server`,
-      description: `The ${capitalize(
-        name,
-      )} server runs from your project. It does not yet
-          support multiple users or TimeTravel, but fully supports most other
-          features and extensions of ${name}.`,
+      description: defineMessage({
+        id: "project.named-server-panel.spec.server.description",
+        defaultMessage: `The {name} server runs from your project.
+        It does not yet support multiple users or TimeTravel,
+        but fully supports most other features and extensions of {name}.`,
+      }),
     }
   );
 }
 
+const DISABLED = defineMessage({
+  id: "project.named-server-panel.disabled.info",
+  defaultMessage: `"Disabled. Please contact your instructor if you need to use {longName}.`,
+});
+
 interface Props {
   project_id: string;
   name: NamedServerName;
-  style?;
+  style?: CSS;
 }
 
 export function NamedServerPanel({ project_id, name, style }: Props) {
+  const intl = useIntl();
+
   const student_project_functionality =
     useStudentProjectFunctionality(project_id);
 
-  const { longName, description, icon } = getServerInfo(name);
+  const { longName, description: descMsg, icon } = getServerInfo(name);
+  const description = intl.formatMessage(descMsg, { name: capitalize(name) });
 
   let body;
   if (
     name === "jupyterlab" &&
     student_project_functionality.disableJupyterLabServer
   ) {
-    body =
-      "Disabled. Please contact your instructor if you need to use Jupyter Lab";
+    body = intl.formatMessage(DISABLED, { longName });
   } else if (
     name === "jupyter" &&
     student_project_functionality.disableJupyterClassicServer
   ) {
-    body =
-      "Disabled. Please contact your instructor if you need to use Jupyter Classic.";
+    body = intl.formatMessage(DISABLED, { longName });
   } else if (
     name === "code" &&
     student_project_functionality.disableVSCodeServer
   ) {
-    body =
-      "Disabled. Please contact your instructor if you need to use VS Code.";
+    body = intl.formatMessage(DISABLED, { longName });
   } else if (
     name === "pluto" &&
     student_project_functionality.disablePlutoServer
   ) {
-    body = "Disabled. Please contact your instructor if you need to use Pluto.";
+    body = intl.formatMessage(DISABLED, { longName });
   } else if (
     name === "rserver" &&
     student_project_functionality.disableRServer
   ) {
-    body =
-      "Disabled. Please contact your instructor if you need to use RStudio.";
+    body = intl.formatMessage(DISABLED, { longName });
   } else {
     body = (
       <>
         <Paragraph style={{ color: COLORS.GRAY_D }}>
           {description}
           <br />
           <br />
-          Starting your {longName} server. It will then attempt to open in a new
-          browser tab. If this doesn't work, check for a popup blocker warning!
+          <FormattedMessage
+            id="project.named-server-panel.long_start_info"
+            defaultMessage={`Starting your {longName} server.
+            It will then attempt to open in a new  browser tab.
+            If this doesn't work, check for a popup blocker warning!`}
+            values={{ longName }}
+          />
         </Paragraph>
         <Paragraph
           style={{ textAlign: "center", fontSize: "14pt", margin: "15px" }}
@@ -157,7 +188,7 @@ export function NamedServerPanel({ project_id, name, style }: Props) {
             maxTime={1000 * 60 * 5}
             autoStart
             href={serverURL(project_id, name)}
-            loadingText="Launching server..."
+            loadingText={intl.formatMessage(LAUNCHING_SERVER)}
             onClick={() => {
               track("launch-server", { name, project_id });
             }}
@@ -196,6 +227,7 @@ export function ServerLink({
   name: NamedServerName;
   mode: "flyout" | "full";
 }) {
+  const intl = useIntl();
   const student_project_functionality =
     useStudentProjectFunctionality(project_id);
   const available = useAvailableFeatures(project_id);
@@ -227,12 +259,13 @@ export function ServerLink({
   ) {
     return null;
   } else {
-    const { icon, longName, description } = getServerInfo(name);
+    const { icon, longName, description: descMsg } = getServerInfo(name);
+    const description = intl.formatMessage(descMsg, { name: capitalize(name) });
     return (
       <LinkRetry
         maxTime={1000 * 60 * 5}
         href={serverURL(project_id, name)}
-        loadingText="Launching server..."
+        loadingText={intl.formatMessage(LAUNCHING_SERVER)}
         tooltip={mode === "flyout" ? description : undefined}
         onClick={() => {
           track("launch-server", { name, project_id });