translate: Search filter dropdowns, modal

app/components/Modal.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import ReactModal from "react-modal";
 import styled, { createGlobalStyle } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -65,6 +66,7 @@ const Modal = ({
   onRequestClose,
   ...rest
 }: Props) => {
+  const { t } = useTranslation();
   if (!isOpen) return null;
 
   return (
@@ -84,7 +86,7 @@ const Modal = ({
         </Content>
         <Back onClick={onRequestClose}>
           <BackIcon size={32} color="currentColor" />
-          <Text>Back</Text>
+          <Text>{t("Back")}</Text>
         </Back>
         <Close onClick={onRequestClose}>
           <CloseIcon size={32} color="currentColor" />

app/scenes/Search/components/CollectionFilter.js

@@ -1,39 +1,44 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import CollectionsStore from "stores/CollectionsStore";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
+import useStores from "hooks/useStores";
 
-const defaultOption = {
-  key: "",
-  label: "Any collection",
-};
-
-type Props = {
-  collections: CollectionsStore,
+type Props = {|
   collectionId: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
-@observer
-class CollectionFilter extends React.Component<Props> {
-  render() {
-    const { onSelect, collectionId, collections } = this.props;
+function CollectionFilter(props: Props) {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const { onSelect, collectionId } = props;
+
+  const options = React.useMemo(() => {
     const collectionOptions = collections.orderedData.map((user) => ({
       key: user.id,
       label: user.name,
     }));
 
-    return (
-      <FilterOptions
-        options={[defaultOption, ...collectionOptions]}
-        activeKey={collectionId}
-        onSelect={onSelect}
-        defaultLabel="Any collection"
-        selectedPrefix="Collection:"
-      />
-    );
-  }
+    return [
+      {
+        key: "",
+        label: t("Any collection"),
+      },
+      ...collectionOptions,
+    ];
+  }, [collections.orderedData, t]);
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={collectionId}
+      onSelect={onSelect}
+      defaultLabel={t("Any collection")}
+      selectedPrefix={`${t("Collection")}:`}
+    />
+  );
 }
 
-export default inject("collections")(CollectionFilter);
+export default observer(CollectionFilter);

app/scenes/Search/components/DateFilter.js

@@ -1,27 +1,33 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
 
-const options = [
-  { key: "", label: "Any time" },
-  { key: "day", label: "Past day" },
-  { key: "week", label: "Past week" },
-  { key: "month", label: "Past month" },
-  { key: "year", label: "Past year" },
-];
-
-type Props = {
+type Props = {|
   dateFilter: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
 const DateFilter = ({ dateFilter, onSelect }: Props) => {
+  const { t } = useTranslation();
+
+  const options = React.useMemo(
+    () => [
+      { key: "", label: t("Any time") },
+      { key: "day", label: t("Past day") },
+      { key: "week", label: t("Past week") },
+      { key: "month", label: t("Past month") },
+      { key: "year", label: t("Past year") },
+    ],
+    [t]
+  );
+
   return (
     <FilterOptions
       options={options}
       activeKey={dateFilter}
       onSelect={onSelect}
-      defaultLabel="Any time"
+      defaultLabel={t("Any time")}
     />
   );
 };

app/scenes/Search/components/FilterOption.js

@@ -34,7 +34,9 @@ const FilterOption = ({ label, note, onSelect, active, ...rest }: Props) => {
 };
 
 const Description = styled(HelpText)`
+  margin-top: 2px;
   margin-bottom: 0;
+  line-height: 1.2em;
 `;
 
 const Checkmark = styled(CheckmarkIcon)`

app/scenes/Search/components/StatusFilter.js

@@ -1,32 +1,38 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
 
-const options = [
-  {
-    key: "",
-    label: "Active documents",
-    note: "Documents in collections you are able to access",
-  },
-  {
-    key: "true",
-    label: "All documents",
-    note: "Include documents that are in the archive",
-  },
-];
-
-type Props = {
-  includeArchived: boolean,
+type Props = {|
+  includeArchived?: boolean,
   onSelect: (key: ?string) => void,
-};
+|};
 
 const StatusFilter = ({ includeArchived, onSelect }: Props) => {
+  const { t } = useTranslation();
+
+  const options = React.useMemo(
+    () => [
+      {
+        key: "",
+        label: t("Active documents"),
+        note: t("Documents in collections you are able to access"),
+      },
+      {
+        key: "true",
+        label: t("All documents"),
+        note: t("Include documents that are in the archive"),
+      },
+    ],
+    [t]
+  );
+
   return (
     <FilterOptions
       options={options}
       activeKey={includeArchived ? "true" : undefined}
       onSelect={onSelect}
-      defaultLabel="Active documents"
+      defaultLabel={t("Active documents")}
     />
   );
 };

app/scenes/Search/components/UserFilter.js

@@ -1,43 +1,48 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import UsersStore from "stores/UsersStore";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
+import useStores from "hooks/useStores";
 
-const defaultOption = {
-  key: "",
-  label: "Any author",
-};
-
-type Props = {
-  users: UsersStore,
+type Props = {|
   userId: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
-@observer
-class UserFilter extends React.Component<Props> {
-  componentDidMount() {
-    this.props.users.fetchPage({ limit: 100 });
-  }
+function UserFilter(props: Props) {
+  const { onSelect, userId } = props;
+  const { t } = useTranslation();
+  const { users } = useStores();
 
-  render() {
-    const { onSelect, userId, users } = this.props;
+  React.useEffect(() => {
+    users.fetchPage({ limit: 100 });
+  }, [users]);
+
+  const options = React.useMemo(() => {
     const userOptions = users.all.map((user) => ({
       key: user.id,
       label: user.name,
     }));
 
-    return (
-      <FilterOptions
-        options={[defaultOption, ...userOptions]}
-        activeKey={userId}
-        onSelect={onSelect}
-        defaultLabel="Any author"
-        selectedPrefix="Author:"
-      />
-    );
-  }
+    return [
+      {
+        key: "",
+        label: t("Any author"),
+      },
+      ...userOptions,
+    ];
+  }, [users.all, t]);
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={userId}
+      onSelect={onSelect}
+      defaultLabel={t("Any author")}
+      selectedPrefix={`${t("Author")}:`}
+    />
+  );
 }
 
-export default inject("users")(UserFilter);
+export default observer(UserFilter);

shared/i18n/locales/en_US/translation.json

@@ -90,6 +90,7 @@
   "Change Language": "Change Language",
   "Dismiss": "Dismiss",
   "Keyboard shortcuts": "Keyboard shortcuts",
+  "Back": "Back",
   "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",
@@ -301,6 +302,18 @@
   "Blockquote": "Blockquote",
   "Horizontal divider": "Horizontal divider",
   "Inline code": "Inline code",
+  "Any collection": "Any collection",
+  "Any time": "Any time",
+  "Past day": "Past day",
+  "Past week": "Past week",
+  "Past month": "Past month",
+  "Past year": "Past year",
+  "Active documents": "Active documents",
+  "Documents in collections you are able to access": "Documents in collections you are able to access",
+  "All documents": "All documents",
+  "Include documents that are in the archive": "Include documents that are in the archive",
+  "Any author": "Any author",
+  "Author": "Author",
   "Not Found": "Not Found",
   "We were unable to find the page you’re looking for.": "We were unable to find the page you’re looking for.",
   "Use the <em>{{ meta }}+K</em> shortcut to search from anywhere in your knowledge base": "Use the <em>{{ meta }}+K</em> shortcut to search from anywhere in your knowledge base",