feat(data-modeling): open diagram COMPASS-9546 (#7127)

* add import file button

* import diagram

* open diagram back

* e2e tests

* clean up

* make ts happy

* bot review

* use existing diagram

* change text to import

* cleaner error handling

* better names for import

* rename filinput

* rephrase

Author: mabaasit

configs/mocha-config-compass/register/jsdom-extra-mocks-register.js

@@ -49,3 +49,5 @@ if (!window.document.queryCommandSupported) {
 globalThis.EventTarget = window.EventTarget;
 globalThis.CustomEvent = window.CustomEvent;
 globalThis.Event = window.Event;
+globalThis.Blob = window.Blob;
+globalThis.File = window.File;

packages/compass-components/src/components/file-input.spec.tsx renamed to packages/compass-components/src/components/file-picker-dialog.spec.tsx

@@ -14,7 +14,7 @@ import {
 import FileInput, {
   FileInputBackendProvider,
   createElectronFileInputBackend,
-} from './file-input';
+} from './file-picker-dialog';
 
 describe('FileInput', function () {
   let spy;

packages/compass-components/src/components/file-input.tsx renamed to packages/compass-components/src/components/file-picker-dialog.tsx

@@ -311,7 +311,17 @@ export function createElectronFileInputBackend<ElectronWindow>(
   };
 }
 
-function FileInput({
+/**
+ * This component is not intended to work in a browser environment. It is designed
+ * to be used in environments like Electron where you have access to nodes fs module
+ * to read/write files.
+ *
+ * Always use `FileSelector` component, only use `FilePickerDialog` if you absolutely
+ * know what you're doing
+ *
+ * @deprecated
+ */
+function FilePickerDialog({
   autoOpen = false,
   id,
   label,
@@ -553,4 +563,4 @@ function FileInput({
   );
 }
 
-export default FileInput;
+export default FilePickerDialog;

packages/compass-components/src/components/file-selector.tsx

@@ -0,0 +1,43 @@
+import React, { type InputHTMLAttributes, useRef } from 'react';
+
+type FileSelectorTriggerProps = {
+  onClick: () => void;
+};
+
+type FileSelectorProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'onSelect' | 'type' | 'style' | 'ref'
+> & {
+  trigger: (props: FileSelectorTriggerProps) => React.ReactElement;
+  onSelect: (files: File[]) => void;
+};
+
+export function FileSelector({
+  trigger,
+  onSelect,
+  ...props
+}: FileSelectorProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onFilesChanged = React.useCallback(
+    (evt: React.ChangeEvent<HTMLInputElement>) => {
+      onSelect(Array.from(evt.currentTarget.files ?? []));
+    },
+    [onSelect]
+  );
+
+  return (
+    <>
+      <input
+        {...props}
+        ref={inputRef}
+        type="file"
+        onChange={onFilesChanged}
+        style={{ display: 'none' }}
+      />
+      {trigger({
+        onClick: () => inputRef.current?.click(),
+      })}
+    </>
+  );
+}

packages/compass-components/src/index.ts

@@ -18,12 +18,12 @@ import type {
   ElectronFileDialogOptions,
   ElectronShowFileDialogProvider,
   FileInputBackend,
-} from './components/file-input';
-import FileInput, {
+} from './components/file-picker-dialog';
+import FilePickerDialog, {
   createElectronFileInputBackend,
   createJSDomFileInputDummyBackend,
   FileInputBackendProvider,
-} from './components/file-input';
+} from './components/file-picker-dialog';
 import { OptionsToggle } from './components/options-toggle';
 import {
   ErrorSummary,
@@ -118,7 +118,7 @@ export {
   CollapsibleFieldSet,
   ConfirmationModal,
   ErrorSummary,
-  FileInput,
+  FilePickerDialog,
   FileInputBackendProvider,
   IndexIcon,
   OptionsToggle,
@@ -219,3 +219,4 @@ export {
 export { SelectList } from './components/select-list';
 export { ParagraphSkeleton } from '@leafygreen-ui/skeleton-loader';
 export { InsightsChip } from './components/insights-chip';
+export { FileSelector } from './components/file-selector';

packages/compass-connection-import-export/src/components/file-input.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FileInput as CompassFileInput } from '@mongodb-js/compass-components';
+import { FilePickerDialog } from '@mongodb-js/compass-components';
 
 type FileInputProps = {
   label: string;
@@ -24,7 +24,7 @@ export function FileInput({
   );
 
   return (
-    <CompassFileInput
+    <FilePickerDialog
       disabled={disabled}
       label={label}
       onChange={onChangeFiles}

packages/compass-data-modeling/src/components/diagram-list-toolbar.tsx

@@ -11,6 +11,7 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import { DiagramListContext } from './saved-diagrams-list';
+import { ImportDiagramButton } from './import-diagram-button';
 
 const containerStyles = css({
   padding: spacing[400],
@@ -27,16 +28,19 @@ const containerStyles = css({
 const titleStyles = css({
   gridArea: 'title',
 });
-const createDiagramContainerStyles = css({
+const diagramActionsStyles = css({
   gridArea: 'createDiagram',
   display: 'flex',
   justifyContent: 'flex-end',
+  gap: spacing[200],
 });
 const searchInputStyles = css({
   gridArea: 'searchInput',
 });
 const sortControlsStyles = css({
   gridArea: 'sortControls',
+  display: 'flex',
+  justifyContent: 'flex-end',
 });
 
 const toolbarTitleLightStyles = css({ color: palette.gray.dark1 });
@@ -48,6 +52,7 @@ export const DiagramListToolbar = () => {
     onCreateDiagram,
     sortControls,
     searchTerm,
+    onImportDiagram,
   } = useContext(DiagramListContext);
   const darkMode = useDarkMode();
 
@@ -61,7 +66,12 @@ export const DiagramListToolbar = () => {
       >
         Open an existing diagram:
       </Subtitle>
-      <div className={createDiagramContainerStyles}>
+      <div className={diagramActionsStyles}>
+        <ImportDiagramButton
+          leftGlyph={<Icon glyph="Import" />}
+          size="small"
+          onImportDiagram={onImportDiagram}
+        />
         <Button
           onClick={onCreateDiagram}
           variant="primary"

packages/compass-data-modeling/src/components/import-diagram-button.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, FileSelector } from '@mongodb-js/compass-components';
+
+type importDiagramButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  'onClick'
+> & {
+  onImportDiagram: (file: File) => void;
+};
+
+export const ImportDiagramButton = ({
+  onImportDiagram,
+  ...buttonProps
+}: importDiagramButtonProps) => {
+  return (
+    <FileSelector
+      id="import-diagram-file-input"
+      data-testid="import-diagram-file-input"
+      multiple={false}
+      accept=".compass"
+      onSelect={(files) => {
+        if (files.length === 0) {
+          return;
+        }
+        onImportDiagram(files[0]);
+      }}
+      trigger={({ onClick }) => (
+        <Button {...buttonProps} onClick={onClick}>
+          Import Diagram
+        </Button>
+      )}
+    />
+  );
+};

packages/compass-data-modeling/src/components/saved-diagrams-list.tsx

@@ -18,6 +18,7 @@ import {
   deleteDiagram,
   selectCurrentModel,
   openDiagram,
+  openDiagramFromFile,
   renameDiagram,
 } from '../store/diagram';
 import type { MongoDBDataModelDescription } from '../services/data-model-storage';
@@ -27,6 +28,7 @@ import FlexibilityIcon from './icons/flexibility';
 import { CARD_HEIGHT, CARD_WIDTH, DiagramCard } from './diagram-card';
 import { DiagramListToolbar } from './diagram-list-toolbar';
 import toNS from 'mongodb-ns';
+import { ImportDiagramButton } from './import-diagram-button';
 
 const sortBy = [
   {
@@ -49,13 +51,17 @@ const rowStyles = css({
 
 export const DiagramListContext = React.createContext<{
   onSearchDiagrams: (search: string) => void;
+  onImportDiagram: (file: File) => void;
   onCreateDiagram: () => void;
   sortControls: React.ReactElement | null;
   searchTerm: string;
 }>({
   onSearchDiagrams: () => {
     /** */
   },
+  onImportDiagram: () => {
+    /** */
+  },
   onCreateDiagram: () => {
     /** */
   },
@@ -67,6 +73,11 @@ const subTitleStyles = css({
   maxWidth: '750px',
 });
 
+const diagramActionsStyles = css({
+  display: 'flex',
+  gap: spacing[200],
+});
+
 const featuresListStyles = css({
   display: 'flex',
   flexDirection: 'row',
@@ -132,7 +143,8 @@ const FeaturesList: React.FunctionComponent<{ features: Feature[] }> = ({
 
 const DiagramListEmptyContent: React.FunctionComponent<{
   onCreateDiagramClick: () => void;
-}> = ({ onCreateDiagramClick }) => {
+  onImportDiagramClick: (file: File) => void;
+}> = ({ onCreateDiagramClick, onImportDiagramClick }) => {
   return (
     <WorkspaceContainer>
       <EmptyContent
@@ -153,13 +165,16 @@ const DiagramListEmptyContent: React.FunctionComponent<{
         }
         subTitleClassName={subTitleStyles}
         callToAction={
-          <Button
-            onClick={onCreateDiagramClick}
-            variant="primary"
-            data-testid="create-diagram-button"
-          >
-            Generate diagram
-          </Button>
+          <div className={diagramActionsStyles}>
+            <ImportDiagramButton onImportDiagram={onImportDiagramClick} />
+            <Button
+              onClick={onCreateDiagramClick}
+              variant="primary"
+              data-testid="create-diagram-button"
+            >
+              Generate diagram
+            </Button>
+          </div>
         }
       ></EmptyContent>
     </WorkspaceContainer>
@@ -171,11 +186,13 @@ export const SavedDiagramsList: React.FunctionComponent<{
   onOpenDiagramClick: (diagram: MongoDBDataModelDescription) => void;
   onDiagramDeleteClick: (id: string) => void;
   onDiagramRenameClick: (id: string) => void;
+  onImportDiagramClick: (file: File) => void;
 }> = ({
   onCreateDiagramClick,
   onOpenDiagramClick,
   onDiagramRenameClick,
   onDiagramDeleteClick,
+  onImportDiagramClick,
 }) => {
   const { items, status } = useDataModelSavedItems();
   const decoratedItems = useMemo<
@@ -214,7 +231,10 @@ export const SavedDiagramsList: React.FunctionComponent<{
   }
   if (items.length === 0) {
     return (
-      <DiagramListEmptyContent onCreateDiagramClick={onCreateDiagramClick} />
+      <DiagramListEmptyContent
+        onCreateDiagramClick={onCreateDiagramClick}
+        onImportDiagramClick={onImportDiagramClick}
+      />
     );
   }
 
@@ -225,6 +245,7 @@ export const SavedDiagramsList: React.FunctionComponent<{
         searchTerm: search,
         onCreateDiagram: onCreateDiagramClick,
         onSearchDiagrams: setSearch,
+        onImportDiagram: onImportDiagramClick,
       }}
     >
       <WorkspaceContainer>
@@ -264,4 +285,5 @@ export default connect(null, {
   onOpenDiagramClick: openDiagram,
   onDiagramDeleteClick: deleteDiagram,
   onDiagramRenameClick: renameDiagram,
+  onImportDiagramClick: openDiagramFromFile,
 })(SavedDiagramsList);

packages/compass-data-modeling/src/services/data-model-storage.ts

@@ -67,8 +67,19 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
 ]);
 
 export const EditSchema = z.intersection(EditSchemaBase, EditSchemaVariants);
+export const EditListSchema = z
+  .array(EditSchema)
+  .nonempty()
+  // Ensure first item exists and is 'SetModel'
+  .refine((edits) => edits[0]?.type === 'SetModel', {
+    message: "First edit must be of type 'SetModel'",
+  });
 
 export type Edit = z.output<typeof EditSchema>;
+export type SetModelEdit = Extract<
+  z.output<typeof EditSchema>,
+  { type: 'SetModel' }
+>;
 
 export type EditAction = z.output<typeof EditSchemaVariants>;
 
@@ -100,15 +111,7 @@ export const MongoDBDataModelDescriptionSchema = z.object({
    * anything that would require re-fetching data associated with the diagram
    */
   connectionId: z.string().nullable(),
-
-  // Ensure first item exists and is 'SetModel'
-  edits: z
-    .array(EditSchema)
-    .nonempty()
-    .refine((edits) => edits[0]?.type === 'SetModel', {
-      message: "First edit must be of type 'SetModel'",
-    }),
-
+  edits: EditListSchema,
   createdAt: z.string().datetime(),
   updatedAt: z.string().datetime(),
 });