feat: Command Bar (#2669)

app/stores/DialogsStore.js

@@ -0,0 +1,73 @@
+// @flow
+import { observable, action } from "mobx";
+import * as React from "react";
+import { v4 as uuidv4 } from "uuid";
+
+export default class DialogsStore {
+  @observable guide: {
+    title: string,
+    content: React.Node,
+    isOpen: boolean,
+  };
+  @observable modalStack = new Map<
+    string,
+    {
+      title: string,
+      content: React.Node,
+      isOpen: boolean,
+    }
+  >();
+
+  openGuide = ({ title, content }: { title: string, content: React.Node }) => {
+    setTimeout(
+      action(() => {
+        this.guide = { title, content, isOpen: true };
+      }),
+      0
+    );
+  };
+
+  @action
+  closeGuide = () => {
+    if (this.guide) {
+      this.guide.isOpen = false;
+    }
+  };
+
+  openModal = ({
+    title,
+    content,
+    replace,
+  }: {
+    title: string,
+    content: React.Node,
+    replace?: boolean,
+  }) => {
+    setTimeout(
+      action(() => {
+        const id = uuidv4();
+
+        if (replace) {
+          this.modalStack.clear();
+        }
+
+        this.modalStack.set(id, {
+          title,
+          content,
+          isOpen: true,
+        });
+      }),
+      0
+    );
+  };
+
+  @action
+  closeModal = (id: string) => {
+    this.modalStack.delete(id);
+  };
+
+  @action
+  closeAllModals = () => {
+    this.modalStack.clear();
+  };
+}

app/stores/RootStore.js

@@ -3,6 +3,7 @@ import ApiKeysStore from "./ApiKeysStore";
 import AuthStore from "./AuthStore";
 import CollectionGroupMembershipsStore from "./CollectionGroupMembershipsStore";
 import CollectionsStore from "./CollectionsStore";
+import DialogsStore from "./DialogsStore";
 import DocumentPresenceStore from "./DocumentPresenceStore";
 import DocumentsStore from "./DocumentsStore";
 import EventsStore from "./EventsStore";
@@ -25,6 +26,7 @@ export default class RootStore {
   auth: AuthStore;
   collections: CollectionsStore;
   collectionGroupMemberships: CollectionGroupMembershipsStore;
+  dialogs: DialogsStore;
   documents: DocumentsStore;
   events: EventsStore;
   groups: GroupsStore;
@@ -49,6 +51,7 @@ export default class RootStore {
     this.auth = new AuthStore(this);
     this.collections = new CollectionsStore(this);
     this.collectionGroupMemberships = new CollectionGroupMembershipsStore(this);
+    this.dialogs = new DialogsStore();
     this.documents = new DocumentsStore(this);
     this.events = new EventsStore(this);
     this.groups = new GroupsStore(this);