checkbox

Author: paula-stacho

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

@@ -376,6 +376,7 @@ const Schema: React.FunctionComponent<{
   schema: MongodbSchema | null;
   count?: number;
   resultId?: string;
+  dontShowLegacyBanner?: boolean;
   onExportSchemaClicked: () => void;
   onStartAnalysis: () => Promise<void>;
   onStopAnalysis: () => void;
@@ -384,6 +385,7 @@ const Schema: React.FunctionComponent<{
   errorMessage,
   schema,
   resultId,
+  dontShowLegacyBanner,
   onExportSchemaClicked,
   onStartAnalysis,
   onStopAnalysis,
@@ -432,7 +434,9 @@ const Schema: React.FunctionComponent<{
         </WorkspaceContainer>
       </div>
       {enableExportSchema && <ExportSchemaModal />}
-      {enableExportSchema && <ExportSchemaLegacyBanner />}
+      {enableExportSchema && !dontShowLegacyBanner && (
+        <ExportSchemaLegacyBanner />
+      )}
     </>
   );
 };
@@ -443,6 +447,7 @@ export default connect(
     errorMessage: state.schemaAnalysis.errorMessage,
     schema: state.schemaAnalysis.schema,
     resultId: state.schemaAnalysis.resultId,
+    dontShowLegacyBanner: state.schemaExport.dontShowLegacyBanner,
   }),
   {
     onStartAnalysis: startAnalysis,

packages/compass-schema/src/components/export-schema-legacy-banner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { connect } from 'react-redux';
 import {
   ModalBody,
@@ -8,13 +8,15 @@ import {
   spacing,
   Badge,
   Button,
+  Checkbox,
 } from '@mongodb-js/compass-components';
 
 import type { RootState, SchemaThunkDispatch } from '../stores/store';
 import {
   confirmedLegacySchemaShare,
   switchToSchemaExport,
   SchemaExportActions,
+  stopShowingLegacyBanner,
 } from '../stores/schema-export-reducer';
 
 const Image = () => (
@@ -462,7 +464,23 @@ const ExportSchemaLegacyBanner: React.FunctionComponent<{
   onClose: () => void;
   onLegacyShare: () => void;
   onSwitchToSchemaExport: () => void;
-}> = ({ isOpen, onClose, onLegacyShare, onSwitchToSchemaExport }) => {
+  stopShowingLegacyBanner: () => void;
+}> = ({
+  isOpen,
+  onClose,
+  onLegacyShare,
+  onSwitchToSchemaExport,
+  stopShowingLegacyBanner,
+}) => {
+  const [dontShowAgainChecked, setDontShowAgainChecked] = useState(false);
+  const handleLegacyShare = useCallback(() => {
+    if (dontShowAgainChecked) stopShowingLegacyBanner();
+    onLegacyShare();
+  }, [onLegacyShare, dontShowAgainChecked, stopShowingLegacyBanner]);
+  const handleSwitchToNew = useCallback(() => {
+    if (dontShowAgainChecked) stopShowingLegacyBanner();
+    onSwitchToSchemaExport();
+  }, [onSwitchToSchemaExport, dontShowAgainChecked, stopShowingLegacyBanner]);
   return (
     <Modal open={isOpen} setOpen={onClose} contentClassName={containerStyles}>
       <ModalHeader
@@ -492,17 +510,20 @@ const ExportSchemaLegacyBanner: React.FunctionComponent<{
             3 standardized schema formats designed for schema validation and
             analysis use cases.
           </div>
-          <Button variant="default" size="small" onClick={onLegacyShare}>
+          <Button variant="default" size="small" onClick={handleLegacyShare}>
             Continue with legacy Share
           </Button>
-          <Button
-            variant="primary"
-            size="small"
-            onClick={onSwitchToSchemaExport}
-          >
+          <Button variant="primary" size="small" onClick={handleSwitchToNew}>
             Try new Export
           </Button>
         </div>
+        <div>
+          <Checkbox
+            label="Do not show me this message again"
+            checked={dontShowAgainChecked}
+            onChange={(e) => setDontShowAgainChecked(e.currentTarget.checked)}
+          />
+        </div>
       </ModalBody>
     </Modal>
   );
@@ -516,5 +537,6 @@ export default connect(
     onClose: () => dispatch({ type: SchemaExportActions.closeLegacyBanner }),
     onLegacyShare: () => dispatch(confirmedLegacySchemaShare()),
     onSwitchToSchemaExport: () => dispatch(switchToSchemaExport()),
+    stopShowingLegacyBanner: () => dispatch(stopShowingLegacyBanner()),
   })
 )(ExportSchemaLegacyBanner);

packages/compass-schema/src/stores/schema-export-reducer.ts

@@ -26,6 +26,7 @@ export type SchemaExportState = {
   abortController?: AbortController;
   isOpen: boolean;
   isLegacyBannerOpen: boolean;
+  dontShowLegacyBanner: boolean;
   exportedSchema?: string;
   exportFormat: SchemaFormat;
   errorMessage?: string;
@@ -41,13 +42,15 @@ const getInitialState = (): SchemaExportState => ({
   exportedSchema: undefined,
   isOpen: false,
   isLegacyBannerOpen: false,
+  dontShowLegacyBanner: localStorage.getItem('dontShowLegacyBanner') === 'true',
 });
 
 export const enum SchemaExportActions {
   openExportSchema = 'schema-service/schema-export/openExportSchema',
   closeExportSchema = 'schema-service/schema-export/closeExportSchema',
   openLegacyBanner = 'schema-service/schema-export/openLegacyBanner',
   closeLegacyBanner = 'schema-service/schema-export/closeLegacyBanner',
+  dontShowLegacyBanner = 'schema-service/schema-export/dontShowLegacyBanner',
   changeExportSchemaStatus = 'schema-service/schema-export/changeExportSchemaStatus',
   changeExportSchemaFormatStarted = 'schema-service/schema-export/changeExportSchemaFormatStarted',
   changeExportSchemaFormatComplete = 'schema-service/schema-export/changeExportSchemaFormatComplete',
@@ -278,6 +281,7 @@ export const schemaExportReducer: Reducer<SchemaExportState, Action> = (
       SchemaExportActions.openLegacyBanner
     )
   ) {
+    console.log('opening the banner');
     return {
       ...state,
       isLegacyBannerOpen: true,
@@ -296,6 +300,18 @@ export const schemaExportReducer: Reducer<SchemaExportState, Action> = (
     };
   }
 
+  if (
+    isAction<dontShowLegacyBannerAction>(
+      action,
+      SchemaExportActions.dontShowLegacyBanner
+    )
+  ) {
+    return {
+      ...state,
+      isLegacyBannerOpen: false,
+    };
+  }
+
   if (
     isAction<ChangeExportSchemaFormatStartedAction>(
       action,
@@ -362,6 +378,10 @@ export type closeLegacyBannerAction = {
   type: SchemaExportActions.closeLegacyBanner;
 };
 
+export type dontShowLegacyBannerAction = {
+  type: SchemaExportActions.dontShowLegacyBanner;
+};
+
 export const switchToSchemaExport = (): SchemaThunkAction<void> => {
   return (dispatch) => {
     dispatch({ type: SchemaExportActions.closeLegacyBanner });
@@ -419,3 +439,10 @@ export const _trackSchemaShared = (
     track('Schema Exported', trackEvent, connectionInfoRef.current);
   };
 };
+
+export const stopShowingLegacyBanner = (): SchemaThunkAction<void> => {
+  return (dispatch) => {
+    localStorage.setItem('dontShowLegacyBanner', 'true');
+    dispatch({ type: SchemaExportActions.dontShowLegacyBanner });
+  };
+};

packages/compass-schema/src/stores/store.ts

@@ -75,9 +75,10 @@ export function activateSchemaPlugin(
    * When `Share Schema as JSON` clicked in menu show a dialog message.
    */
 
-  on(services.localAppRegistry, 'menu-share-schema-json', () =>
-    store.dispatch({ type: SchemaExportActions.openLegacyBanner })
-  );
+  on(services.localAppRegistry, 'menu-share-schema-json', () => {
+    console.log('I am here');
+    store.dispatch({ type: SchemaExportActions.openLegacyBanner });
+  });
 
   addCleanup(() => store.dispatch(stopAnalysis()));
   addCleanup(() => store.dispatch(cancelExportSchema()));