wip: export schema dialog

packages/compass-collection/src/stores/index.ts

@@ -318,21 +318,6 @@ store.onActivated = (appRegistry: AppRegistry) => {
 
   // TODO: importing hadron-ipc in unit tests doesn't work right now
   if (ipc.on) {
-    /**
-     * When `Share Schema as JSON` clicked in menu send event to the active tab.
-     */
-    ipc.on('window:menu-share-schema-json', () => {
-      const state = store.getState();
-      if (state.tabs) {
-        const activeTab = state.tabs.find(
-          (tab: WorkspaceTabObject) => tab.isActive === true
-        );
-        if (activeTab.localAppRegistry) {
-          activeTab.localAppRegistry.emit('menu-share-schema-json');
-        }
-      }
-    });
-
     ipc.on('compass:open-export', () => {
       const state = store.getState();
       if (!state.tabs) {

packages/compass-schema/src/actions/index.js

@@ -34,6 +34,8 @@ const configureActions = () => {
     geoLayerAdded: { sync: true },
     geoLayersEdited: { sync: true },
     geoLayersDeleted: { sync: true },
+    openExportSchema: { sync: true },
+    closeExportSchema: { sync: true },
   });
 };
 

packages/compass-schema/src/components/compass-schema.tsx

@@ -24,7 +24,10 @@ import {
   useDarkMode,
   WorkspaceContainer,
   lighten,
+  ConfirmationModal,
+  InfoModal,
 } from '@mongodb-js/compass-components';
+import { ExportSchemaModal } from './export-schema/export-schema-modal';
 
 const rootStyles = css`
   width: 100%;
@@ -329,6 +332,7 @@ const Schema: React.FunctionComponent<{
   schema?: any;
   count?: number;
   resultId?: string;
+  exportSchemaOpened?: boolean;
 }> = ({
   actions,
   store,
@@ -338,6 +342,7 @@ const Schema: React.FunctionComponent<{
   errorMessage,
   schema,
   resultId,
+  exportSchemaOpened,
 }) => {
   useEffect(() => {
     if (isActiveTab) {
@@ -357,6 +362,10 @@ const Schema: React.FunctionComponent<{
     actions.startAnalysis();
   }, [actions]);
 
+  const onExportSchemaClicked = useCallback(() => {
+    actions.openExportSchema();
+  }, [actions]);
+
   return (
     <div className={rootStyles}>
       <WorkspaceContainer
@@ -365,6 +374,7 @@ const Schema: React.FunctionComponent<{
             localAppRegistry={store.localAppRegistry}
             onAnalyzeSchemaClicked={onApplyClicked}
             onResetClicked={onResetClicked}
+            onExportSchemaClicked={onExportSchemaClicked}
             analysisState={analysisState}
             errorMessage={errorMessage || ''}
             isOutdated={!!outdated}
@@ -388,6 +398,12 @@ const Schema: React.FunctionComponent<{
           />
         )}
       </WorkspaceContainer>
+
+      <ExportSchemaModal
+        schema={schema}
+        closeExportSchema={actions.closeExportSchema}
+        exportSchemaOpened={!!exportSchemaOpened}
+      ></ExportSchemaModal>
     </div>
   );
 };

packages/compass-schema/src/components/export-schema/export-schema-modal-action-button.tsx

@@ -0,0 +1,118 @@
+import { Button, css, cx, Icon } from '@mongodb-js/compass-components';
+import React, { useCallback, useEffect, useState } from 'react';
+
+const actionButtonStyle = css({
+  flex: 'none',
+});
+
+const actionButtonContentStyle = css({
+  position: 'relative',
+});
+
+const actionButtonIconContainerStyle = css({
+  opacity: 1,
+  // leafygreen icon small size
+  width: 14,
+  height: 14,
+  transition: 'opacity .2s linear',
+});
+
+const actionButtonIconContainerHiddenStyle = css({
+  opacity: 0,
+});
+
+const actionButtonClickResultIconStyle = css({
+  position: 'absolute',
+  // leafygreen icon small size
+  width: 14,
+  height: 14,
+  top: 0,
+  pointerEvents: 'none',
+  opacity: 1,
+  transition: 'opacity .2s linear',
+});
+
+const actionButtonClickResultIconHiddenStyle = css({
+  opacity: 0,
+});
+
+const ActionButton: React.FunctionComponent<{
+  icon: string | React.ReactNode;
+  label: string;
+  onClick: (
+    ...args: Parameters<React.MouseEventHandler<HTMLButtonElement>>
+  ) => boolean | void;
+}> = ({ label, icon, onClick }) => {
+  const [clickResult, setClickResult] = useState<'success' | 'error'>(
+    'success'
+  );
+  const [clickResultVisible, setClickResultVisible] = useState(false);
+
+  const onButtonClick = useCallback(
+    (...args: Parameters<React.MouseEventHandler<HTMLButtonElement>>) => {
+      const result = onClick(...args);
+      if (typeof result === 'boolean') {
+        setClickResult(result ? 'success' : 'error');
+        setClickResultVisible(true);
+      }
+    },
+    [onClick]
+  );
+
+  useEffect(() => {
+    if (!clickResultVisible) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      setClickResultVisible(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [clickResultVisible]);
+
+  return (
+    <Button
+      size="xsmall"
+      aria-label={label}
+      title={label}
+      onClick={onButtonClick}
+      className={actionButtonStyle}
+    >
+      <div className={actionButtonContentStyle}>
+        <div
+          className={cx(
+            actionButtonIconContainerStyle,
+            clickResultVisible && actionButtonIconContainerHiddenStyle
+          )}
+        >
+          {typeof icon === 'string' ? (
+            <Icon
+              size="small"
+              role="presentation"
+              title={null}
+              glyph={icon}
+            ></Icon>
+          ) : (
+            icon
+          )}
+        </div>
+        <div
+          className={cx(
+            actionButtonClickResultIconStyle,
+            !clickResultVisible && actionButtonClickResultIconHiddenStyle
+          )}
+        >
+          <Icon
+            size="small"
+            glyph={clickResult === 'success' ? 'Checkmark' : 'X'}
+          ></Icon>
+        </div>
+      </div>
+    </Button>
+  );
+};
+
+export { ActionButton };