feat: Command Bar (#2669)

app/scenes/Collection.js

@@ -39,13 +39,15 @@ import Tabs from "components/Tabs";
 import Tooltip from "components/Tooltip";
 import Collection from "../models/Collection";
 import { updateCollectionUrl } from "../utils/routeHelpers";
+import { editCollection } from "actions/definitions/collections";
 import useBoolean from "hooks/useBoolean";
+import useCommandBarActions from "hooks/useCommandBarActions";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useImportDocument from "hooks/useImportDocument";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
 import CollectionMenu from "menus/CollectionMenu";
-import { newDocumentUrl, collectionUrl } from "utils/routeHelpers";
+import { newDocumentPath, collectionUrl } from "utils/routeHelpers";
 
 function CollectionScene() {
   const params = useParams();
@@ -109,6 +111,8 @@ function CollectionScene() {
     load();
   }, [collections, isFetching, collection, error, id, can]);
 
+  useCommandBarActions([editCollection]);
+
   const handleRejection = React.useCallback(() => {
     showToast(
       t("Document not supported – try Markdown, Plain text, HTML, or Word"),
@@ -158,7 +162,7 @@ function CollectionScene() {
                 >
                   <Button
                     as={Link}
-                    to={collection ? newDocumentUrl(collection.id) : ""}
+                    to={collection ? newDocumentPath(collection.id) : ""}
                     disabled={!collection}
                     icon={<PlusIcon />}
                   >
@@ -227,7 +231,7 @@ function CollectionScene() {
                   </HelpText>
                   <Empty>
                     {canUser.createDocument && (
-                      <Link to={newDocumentUrl(collection.id)}>
+                      <Link to={newDocumentPath(collection.id)}>
                         <Button icon={<NewDocumentIcon color="currentColor" />}>
                           {t("Create a document")}
                         </Button>
@@ -388,6 +392,7 @@ const DropMessage = styled(HelpText)`
 `;
 
 const DropzoneContainer = styled.div`
+  outline-color: transparent !important;
   min-height: calc(100% - 56px);
   position: relative;
 

app/scenes/CollectionDelete.js

@@ -8,7 +8,7 @@ import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import useToasts from "hooks/useToasts";
-import { homeUrl } from "utils/routeHelpers";
+import { homePath } from "utils/routeHelpers";
 
 type Props = {
   collection: Collection,
@@ -28,7 +28,7 @@ function CollectionDelete({ collection, onSubmit }: Props) {
 
       try {
         await collection.delete();
-        history.push(homeUrl());
+        history.push(homePath());
         onSubmit();
       } catch (err) {
         showToast(err.message, { type: "error" });

app/scenes/CollectionEdit.js

@@ -1,23 +1,28 @@
 // @flow
+import invariant from "invariant";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import IconPicker from "components/IconPicker";
 import Input from "components/Input";
 import InputSelect from "components/InputSelect";
+import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
 
 type Props = {
-  collection: Collection,
+  collectionId: string,
   onSubmit: () => void,
 };
 
-const CollectionEdit = ({ collection, onSubmit }: Props) => {
+const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
+  const { collections } = useStores();
+  const collection = collections.get(collectionId);
+  invariant(collection, "Collection not found");
+
   const [name, setName] = useState(collection.name);
   const [icon, setIcon] = useState(collection.icon);
   const [color, setColor] = useState(collection.color || "#4E5C6E");

app/scenes/Document/components/Header.js

@@ -31,7 +31,7 @@ import TableOfContentsMenu from "menus/TableOfContentsMenu";
 import TemplatesMenu from "menus/TemplatesMenu";
 import { type NavigationNode } from "types";
 import { metaDisplay } from "utils/keyboard";
-import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers";
+import { newDocumentPath, editDocumentUrl } from "utils/routeHelpers";
 
 type Props = {|
   document: Document,
@@ -255,7 +255,7 @@ function DocumentHeader({
                 <Button
                   icon={<PlusIcon />}
                   as={Link}
-                  to={newDocumentUrl(document.collectionId, {
+                  to={newDocumentPath(document.collectionId, {
                     templateId: document.id,
                   })}
                   primary

app/scenes/Document/components/MultiplayerEditor.js

@@ -14,7 +14,7 @@ import usePageVisibility from "hooks/usePageVisibility";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
 import MultiplayerExtension from "multiplayer/MultiplayerExtension";
-import { homeUrl } from "utils/routeHelpers";
+import { homePath } from "utils/routeHelpers";
 
 type Props = {|
   ...EditorProps,
@@ -61,7 +61,7 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
         )
       );
 
-      history.replace(homeUrl());
+      history.replace(homePath());
     });
 
     provider.on("awarenessChange", ({ states }) => {

app/scenes/GroupDelete.js

@@ -3,12 +3,12 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { groupSettings } from "shared/utils/routeHelpers";
 import Group from "models/Group";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import useToasts from "hooks/useToasts";
+import { groupSettingsPath } from "utils/routeHelpers";
 
 type Props = {|
   group: Group,
@@ -27,7 +27,7 @@ function GroupDelete({ group, onSubmit }: Props) {
 
     try {
       await group.delete();
-      history.push(groupSettings());
+      history.push(groupSettingsPath());
       onSubmit();
     } catch (err) {
       showToast(err.message, { type: "error" });

app/scenes/Search/Search.js

@@ -36,8 +36,7 @@ import StatusFilter from "./components/StatusFilter";
 import UserFilter from "./components/UserFilter";
 import NewDocumentMenu from "menus/NewDocumentMenu";
 import { type LocationWithState } from "types";
-import { metaDisplay } from "utils/keyboard";
-import { newDocumentUrl, searchUrl } from "utils/routeHelpers";
+import { newDocumentPath, searchUrl } from "utils/routeHelpers";
 import { decodeURIComponentSafe } from "utils/urls";
 
 type Props = {
@@ -153,7 +152,7 @@ class Search extends React.Component<Props> {
 
   handleNewDoc = () => {
     if (this.collectionId) {
-      this.props.history.push(newDocumentUrl(this.collectionId));
+      this.props.history.push(newDocumentPath(this.collectionId));
     }
   };
 
@@ -289,8 +288,8 @@ class Search extends React.Component<Props> {
             <Fade>
               <HelpText small>
                 <Trans
-                  defaults="Use the <em>{{ meta }}+K</em> shortcut to search from anywhere in your knowledge base"
-                  values={{ meta: metaDisplay }}
+                  defaults="Use the <em>{{ shortcut }}</em> shortcut to search from anywhere in your knowledge base"
+                  values={{ shortcut: "/" }}
                   components={{ em: <strong /> }}
                 />
               </HelpText>

app/scenes/Settings/Features.js

@@ -49,7 +49,7 @@ function Features() {
       <HelpText>
         <Trans>
           Manage optional and beta features. Changing these settings will affect
-          all team members.
+          the experience for all team members.
         </Trans>
       </HelpText>
       <Checkbox
@@ -57,7 +57,13 @@ function Features() {
         name="collaborativeEditing"
         checked={data.collaborativeEditing}
         onChange={handleChange}
-        note="When enabled multiple people can edit documents at the same time (Beta)"
+        note={
+          <Trans>
+            When enabled multiple people can edit documents at the same time.
+            Please note that this feature is in beta and currently disables
+            updating the document via the API.
+          </Trans>
+        }
       />
     </Scene>
   );

app/scenes/UserProfile.js

@@ -6,7 +6,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled from "styled-components";
-import { settings } from "shared/utils/routeHelpers";
 import User from "models/User";
 import Avatar from "components/Avatar";
 import Badge from "components/Badge";
@@ -18,6 +17,7 @@ import PaginatedDocumentList from "components/PaginatedDocumentList";
 import Subheading from "components/Subheading";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
+import { settingsPath } from "utils/routeHelpers";
 
 type Props = {|
   user: User,
@@ -61,7 +61,7 @@ function UserProfile(props: Props) {
           {isCurrentUser && (
             <Edit>
               <Button
-                onClick={() => history.push(settings())}
+                onClick={() => history.push(settingsPath())}
                 icon={<EditIcon />}
                 neutral
               >