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

Author: williamstein

src/packages/frontend/app/page.tsx

@@ -311,7 +311,10 @@ export const Page: React.FC = () => {
         }}
         name={"projects"}
         active_top_tab={active_top_tab}
-        tooltip="Show all the projects on which you collaborate."
+        tooltip={intl.formatMessage({
+          id: "page.project_nav.tooltip",
+          defaultMessage: "Show all the projects on which you collaborate.",
+        })}
         icon="edit"
         label={intl.formatMessage(labels.projects)}
       />

src/packages/frontend/chat/chat-indicator.tsx

@@ -9,15 +9,18 @@
 // this is... so for now it still sort of toggles.  For now things
 // do work properly via a hack in close_chat in project_actions.
 
+import { filename_extension } from "@cocalc/util/misc";
 import { Button, Tooltip } from "antd";
 import { debounce } from "lodash";
-import { filename_extension } from "@cocalc/util/misc";
 import { useMemo } from "react";
-import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
-import { Icon } from "@cocalc/frontend/components/icon";
+import { FormattedMessage, useIntl } from "react-intl";
+
 import { UsersViewing } from "@cocalc/frontend/account/avatar/users-viewing";
+import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { HiddenXS } from "@cocalc/frontend/components";
+import { Icon } from "@cocalc/frontend/components/icon";
 import track from "@cocalc/frontend/user-tracking";
+import { labels } from "../i18n";
 
 export type ChatState =
   | "" // not opened (also undefined counts as not open)
@@ -29,12 +32,12 @@ const CHAT_INDICATOR_STYLE: React.CSSProperties = {
   fontSize: "15pt",
   paddingTop: "3px",
   cursor: "pointer",
-};
+} as const;
 
 const USERS_VIEWING_STYLE: React.CSSProperties = {
   maxWidth: "120px",
   marginRight: "5px",
-};
+} as const;
 
 interface Props {
   project_id: string;
@@ -47,6 +50,7 @@ export function ChatIndicator({ project_id, path, chatState }: Props) {
     ...CHAT_INDICATOR_STYLE,
     ...{ display: "flex" },
   };
+
   return (
     <div style={style}>
       <UsersViewing
@@ -60,6 +64,8 @@ export function ChatIndicator({ project_id, path, chatState }: Props) {
 }
 
 function ChatButton({ project_id, path, chatState }) {
+  const intl = useIntl();
+
   const toggleChat = debounce(
     () => {
       const actions = redux.getProjectActions(project_id);
@@ -92,7 +98,10 @@ function ChatButton({ project_id, path, chatState }) {
       title={
         <span>
           <Icon name="comment" style={{ marginRight: "5px" }} />
-          Hide or Show Document Chat
+          <FormattedMessage
+            id="chat.chat-indicator.tooltip"
+            defaultMessage={"Hide or Show Document Chat"}
+          />
         </span>
       }
       placement={"leftTop"}
@@ -107,7 +116,9 @@ function ChatButton({ project_id, path, chatState }) {
       >
         <Icon name="comment" />
         <HiddenXS>
-          <span style={{ marginLeft: "5px" }}>Chat</span>
+          <span style={{ marginLeft: "5px" }}>
+            {intl.formatMessage(labels.chat)}
+          </span>
         </HiddenXS>
       </Button>
     </Tooltip>

src/packages/frontend/frame-editors/frame-tree/commands/format-commands.tsx

@@ -220,7 +220,19 @@ const FORMAT_SPEC = {
       description: "a quoted text in a text document",
     }),
   },
-  table: { icon: "table", label: "Table", title: "Insert a table" },
+  table: {
+    icon: "table",
+    label: defineMessage({
+      id: "command.format.table.label",
+      defaultMessage: "Table",
+      description: "a table text in a text document",
+    }),
+    title: defineMessage({
+      id: "command.format.table.tooltip",
+      defaultMessage: "Insert a table",
+      description: "a table text in a text document",
+    }),
+  },
   horizontalRule: {
     label: defineMessage({
       id: "command.format.horizontalRule.label",
@@ -388,7 +400,11 @@ const FORMAT_MENUS = {
           icon: "text-height",
           isVisible: "format_action", // todo
           name: "font-size",
-          label: "Size",
+          label: defineMessage({
+            id: "command.format.font_size.label",
+            defaultMessage: "Size",
+            description: "change the font size in a text document",
+          }),
           children: FONT_SIZES.map((size) => {
             return {
               name: `${size}`,
@@ -407,7 +423,11 @@ const FORMAT_MENUS = {
           icon: "font",
           isVisible: "format_action", // todo
           name: "font-family",
-          label: "Family",
+          label: defineMessage({
+            id: "command.format.font_family.label",
+            defaultMessage: "Family",
+            description: "change the font family in a text document",
+          }),
           children: FONT_FACES.map((family) => {
             return {
               name: family,
@@ -422,7 +442,11 @@ const FORMAT_MENUS = {
           icon: "header",
           isVisible: "format_action", // todo
           name: "header",
-          label: "Heading",
+          label: defineMessage({
+            id: "command.format.font_heading.label",
+            defaultMessage: "Heading",
+            description: "change the heading in a text document",
+          }),
           children: range(1, 7).map((heading) => {
             return {
               name: `heading-${heading}`,
@@ -436,7 +460,11 @@ const FORMAT_MENUS = {
           icon: "colors",
           isVisible: "format_action",
           name: "color",
-          label: "Color",
+          label: defineMessage({
+            id: "command.format.font_color.label",
+            defaultMessage: "Color",
+            description: "change the font color in a text document",
+          }),
           children: [
             {
               stayOpenOnClick: true,
@@ -462,7 +490,11 @@ const FORMAT_MENUS = {
           icon: "text",
           isVisible: "format_action",
           name: "text",
-          label: "Text",
+          label: defineMessage({
+            id: "command.format.font_alignment.label",
+            defaultMessage: "Alignment",
+            description: "change the paragraph alignment in a text document",
+          }),
           children: [
             "justifyleft",
             "justifycenter",

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -6,7 +6,7 @@
 import { Input } from "antd";
 import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
-import { defineMessage, IntlShape } from "react-intl";
+import { defineMessage, IntlShape, useIntl } from "react-intl";
 
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
@@ -376,8 +376,11 @@ addCommands({
 
   clear: {
     group: "action",
-    button: "Clear",
-    label: "Clear Frame",
+    button: labels.clear,
+    label: defineMessage({
+      id: "command.generic.clear.label",
+      defaultMessage: "Clear Frame",
+    }),
     icon: <Icon unicode={0x2620} />,
     popconfirm: {
       title: "Clear this frame?",
@@ -386,9 +389,16 @@ addCommands({
 
   pause: {
     group: "action",
-    button: "Pause",
-    icon: "pause",
-    label: ({ props }) => {
+    button: ({ props, intl }) => (
+      <span>
+        {intl.formatMessage(menu.pause_resume, { pause: props.is_paused })}
+      </span>
+    ),
+    icon: ({ props }) => (props.is_paused ? "play" : "pause"),
+    label: ({ props, intl }) => {
+      const label = intl.formatMessage(menu.pause_resume, {
+        pause: props.is_paused,
+      });
       if (props.is_paused) {
         return (
           <div
@@ -399,13 +409,17 @@ addCommands({
               padding: "0 20px",
             }}
           >
-            Resume
+            {label}
           </div>
         );
+      } else {
+        return <span>{label}</span>;
       }
-      return <span>Pause</span>;
     },
-    title: "Pause this frame temporarily",
+    title: defineMessage({
+      id: "command.generic.pause.tooltip",
+      defaultMessage: "Temporarily pause output in this terminal.",
+    }),
     onClick: ({ props }) => {
       if (props.is_paused) {
         props.actions.unpause(props.id);
@@ -618,21 +632,37 @@ addCommands({
   },
   clean: {
     group: "build",
-    label: "Delete Aux Files",
-    title: "Delete all temporary files left around from builds",
+    label: defineMessage({
+      id: "command.generic.clean.label",
+      defaultMessage: "Delete Aux Files",
+      description: "Clean up auxiliary build files",
+    }),
+    title: defineMessage({
+      id: "command.generic.clean.title",
+      defaultMessage: "Delete all temporary files left around from builds",
+      description: "Clean up auxiliary build files",
+    }),
     icon: "trash",
   },
 
   rescan_latex_directive: {
     group: "scan",
-    label: "Scan for Build Directives",
-    title: (
-      <>
-        Rescan the document for build directives, starting{" "}
-        <code>'% !TeX program = xelatex, pdflatex, etc'</code> or{" "}
-        <code>'% !TeX cocalc = exact command line'</code>
-      </>
-    ),
+    label: defineMessage({
+      id: "command.generic.rescan_latex_directive.label",
+      defaultMessage: "Scan for Build Directives",
+    }),
+    title: ({ intl }) =>
+      intl.formatMessage(
+        {
+          id: "command.generic.rescan_latex_directive.title",
+          defaultMessage: `Rescan the LaTeX document for build directives.
+          This looks for lines starting with {code1} or {code2}.`,
+        },
+        {
+          code1: <code>'% !TeX program = xelatex, pdflatex, etc'</code>,
+          code2: <code>'% !TeX cocalc = exact command line'</code>,
+        },
+      ),
     icon: "reload",
   },
   sync: {
@@ -845,8 +875,14 @@ addCommands({
   },
   download_pdf: {
     group: "export",
-    label: "Download PDF",
-    title: "Download the PDF file",
+    label: defineMessage({
+      id: "menu.generic.download_pdf.label",
+      defaultMessage: "Download PDF",
+    }),
+    title: defineMessage({
+      id: "menu.generic.download_pdf.tooltip",
+      defaultMessage: "Download the PDF file",
+    }),
     icon: "cloud-download",
   },
   upload: {
@@ -975,8 +1011,13 @@ addCommands({
     pos: 5,
     group: "help-link",
     icon: "comment",
-    label: "Chat With Collaborators or AI",
-    button: "Chat",
+    label: defineMessage({
+      id: "command.generic.chat.label",
+      defaultMessage: "Chat with Collaborators or AI",
+      description:
+        "Opens a chatroom next to the document to chat with other users (collaborators) or an AI chatbot",
+    }),
+    button: labels.chat,
     title:
       "Open chat on the side of this file for chatting with project collaborators or AI about this file.",
     onClick: ({ props }) => {
@@ -988,10 +1029,18 @@ addCommands({
     pos: 6,
     group: "help-link",
     icon: "medkit",
-    label: "Support Ticket",
+    label: defineMessage({
+      id: "command.generic.support.label",
+      defaultMessage: "Support Ticket",
+      description: "Contact support by creating a support ticket to get help",
+    }),
     button: labels.support,
-    title:
-      "Create a support ticket.  Ask the people at CoCalc a question, report a bug, etc.",
+    title: defineMessage({
+      id: "command.generic.support.tooltip",
+      defaultMessage:
+        "Create a support ticket.  Ask the people at CoCalc a question, report a bug, etc.",
+      description: "Contact support by creating a support ticket to get help",
+    }),
     onClick: () => {
       openSupportTab();
     },
@@ -1001,9 +1050,12 @@ addCommands({
     pos: 10,
     group: "help-link",
     icon: "youtube",
-    label: "Videos",
-    button: "Videos",
-    title: "Browse videos about CoCalc.",
+    label: labels.videos,
+    button: labels.videos,
+    title: defineMessage({
+      id: "command.generic.videos.tooltip",
+      defaultMessage: "Browse videos about CoCalc.",
+    }),
     onClick: () => {
       openNewTab(
         "https://www.youtube.com/playlist?list=PLOEk1mo1p5tJmEuAlou4JIWZFH7IVE2PZ",
@@ -1015,7 +1067,12 @@ addCommands({
     alwaysShow: true,
     pos: 0,
     group: "search-commands",
-    title: "Search through all commands for this document frame.",
+    title: defineMessage({
+      id: "command.generic.search_commands.tooltip",
+      defaultMessage: "Search through all commands for this document frame.",
+      description:
+        "Menu entry, where users can search through all available menu commands",
+    }),
     label: ({ helpSearch, setHelpSearch }) => {
       return (
         <SearchBox helpSearch={helpSearch} setHelpSearch={setHelpSearch} />
@@ -1300,7 +1357,9 @@ function fileAction(action) {
 }
 
 function SearchBox({ setHelpSearch, helpSearch }) {
+  const intl = useIntl();
   const didFocus = useRef<boolean>(false);
+
   useEffect(() => {
     return () => {
       if (didFocus.current) {
@@ -1309,10 +1368,11 @@ function SearchBox({ setHelpSearch, helpSearch }) {
       }
     };
   }, []);
+
   return (
     <Input.Search
       autoFocus
-      placeholder="Search"
+      placeholder={intl.formatMessage(labels.search)}
       allowClear
       value={helpSearch}
       onChange={(e) => setHelpSearch(e.target.value)}