chore(compass-web, crud, aggregations): make sure that all features are correctly toggled based on preference values (#5266)

gribnoysup · web-flow · commit 47983a3801a3 · 2023-12-27T08:12:01.000+01:00
* chore(compass-web, crud, aggregations): make sure that all features are correctly toggled based on preference values

* chore: update lock after merge from main
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx
@@ -14,6 +14,7 @@ import PipelineStages from './pipeline-stages';
 import PipelineActions from './pipeline-actions';
 import SavedPipelines from '../../saved-pipelines/saved-pipelines';
 import type { RootState } from '../../../modules';
+import { usePreference } from 'compass-preferences-model';
 
 const containerStyles = css({
   display: 'flex',
@@ -116,18 +117,21 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   isOptionsVisible,
   isOpenPipelineVisible,
 }) => {
+  const isSavingAggregationsEnabled = usePreference(
+    'enableSavedAggregationsQueries'
+  );
   return (
     <div>
       <div className={containerStyles} data-testid="pipeline-header">
-        {isOpenPipelineVisible && (
-          <div
-            data-testid="saved-pipelines-popover"
-            className={pipelineTextAndOpenStyles}
-          >
-            <Body weight="medium">Pipeline</Body>
+        <div
+          data-testid="saved-pipelines-popover"
+          className={pipelineTextAndOpenStyles}
+        >
+          <Body weight="medium">Pipeline</Body>
+          {isOpenPipelineVisible && isSavingAggregationsEnabled && (
             <SavedPipelinesButton></SavedPipelinesButton>
-          </div>
-        )}
+          )}
+        </div>
         <div className={pipelineStagesStyles}>
           <PipelineStages />
         </div>
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx
@@ -50,19 +50,16 @@ export const PipelineSettings: React.FunctionComponent<
   const enableSavedAggregationsQueries = usePreference(
     'enableSavedAggregationsQueries'
   );
-  const isSavePipelineDisplayed =
-    !editViewName && enableSavedAggregationsQueries;
+  const isPipelineNameDisplayed =
+    !editViewName && !!enableSavedAggregationsQueries;
+
   const isCreatePipelineDisplayed = !editViewName;
 
   return (
     <div className={containerStyles} data-testid="pipeline-settings">
       <div className={settingsStyles}>
-        {isSavePipelineDisplayed && (
-          <>
-            <PipelineName />
-            <SaveMenu />
-          </>
-        )}
+        {isPipelineNameDisplayed && <PipelineName />}
+        <SaveMenu isSaveEnabled={!!enableSavedAggregationsQueries}></SaveMenu>
         {isCreatePipelineDisplayed && (
           <Button
             size="xsmall"
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-menus.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-menus.spec.tsx
@@ -19,7 +19,8 @@ describe('PipelineMenus', function () {
       onCreateViewSpy = spy();
       render(
         <SaveMenuComponent
-          isCreateViewAvailable={true}
+          isSaveEnabled={true}
+          isCreateViewEnabled={true}
           pipelineName={'Name'}
           onSave={onSaveSpy}
           onSaveAs={onSaveAsSpy}
@@ -65,7 +66,8 @@ describe('PipelineMenus', function () {
     it('does not render createView menu option', function () {
       render(
         <SaveMenuComponent
-          isCreateViewAvailable={false}
+          isSaveEnabled={true}
+          isCreateViewEnabled={false}
           pipelineName={'Name'}
           onSave={spy()}
           onSaveAs={spy()}
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-menus.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-menus.tsx
@@ -11,22 +11,22 @@ import {
 } from '../../../modules/saving-pipeline';
 
 type SaveMenuActions = 'save' | 'saveAs' | 'createView';
+
 type SaveMenuProps = {
   disabled?: boolean;
   pipelineName: string;
-  isCreateViewAvailable: boolean;
+  isSaveEnabled: boolean;
+  isCreateViewEnabled: boolean;
   onSave: (name: string) => void;
   onSaveAs: (name: string) => void;
   onCreateView: () => void;
 };
-const saveMenuActions: MenuAction<SaveMenuActions>[] = [
-  { action: 'save', label: 'Save' },
-  { action: 'saveAs', label: 'Save as' },
-];
+
 export const SaveMenuComponent: React.FunctionComponent<SaveMenuProps> = ({
   disabled,
   pipelineName,
-  isCreateViewAvailable,
+  isSaveEnabled,
+  isCreateViewEnabled,
   onSave,
   onSaveAs,
   onCreateView,
@@ -41,24 +41,31 @@ export const SaveMenuComponent: React.FunctionComponent<SaveMenuProps> = ({
         return onCreateView();
     }
   };
-  const actions = useMemo(
-    () =>
-      saveMenuActions.concat(
-        isCreateViewAvailable
-          ? [
-              {
-                action: 'createView',
-                label: 'Create view',
-              },
-            ]
-          : []
-      ),
-    [isCreateViewAvailable]
-  );
+  const menuActions = useMemo(() => {
+    const actions: MenuAction<SaveMenuActions>[] = [];
+    if (isSaveEnabled) {
+      actions.push(
+        { action: 'save' as const, label: 'Save' },
+        { action: 'saveAs' as const, label: 'Save as' }
+      );
+    }
+    if (isCreateViewEnabled) {
+      actions.push({
+        action: 'createView',
+        label: 'Create view',
+      });
+    }
+    return actions;
+  }, [isSaveEnabled, isCreateViewEnabled]);
+
+  if (menuActions.length === 0) {
+    return null;
+  }
+
   return (
     <DropdownMenuButton<SaveMenuActions>
       data-testid="save-menu"
-      actions={actions}
+      actions={menuActions}
       onAction={onAction}
       buttonText="Save"
       buttonProps={{
@@ -76,7 +83,7 @@ const VIEWS_MIN_SERVER_VERSION = '3.4.0';
 const mapSaveMenuState = (state: RootState) => {
   return {
     pipelineName: state.name,
-    isCreateViewAvailable: semver.gte(
+    isCreateViewEnabled: semver.gte(
       state.serverVersion,
       VIEWS_MIN_SERVER_VERSION
     ),
@@ -92,7 +99,7 @@ const mapSaveMenuDispatch = {
       ? savingPipelineOpen()
       : savingPipelineOpen({ name, isSaveAs: true });
   },
-  onCreateView: () => openCreateView(),
+  onCreateView: openCreateView,
 };
 export const SaveMenu = connect(
   mapSaveMenuState,
diff --git a/packages/compass-crud/src/components/add-data-menu.tsx b/packages/compass-crud/src/components/add-data-menu.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Icon,
   Tooltip,
   DropdownMenuButton,
   css,
 } from '@mongodb-js/compass-components';
 import type { MenuAction } from '@mongodb-js/compass-components';
+import { usePreference } from 'compass-preferences-model';
 
 const tooltipContainerStyles = css({
   display: 'flex',
@@ -25,6 +26,23 @@ function AddDataMenuButton({
   insertDataHandler: (openInsertKey: AddDataOption) => void;
   isDisabled?: boolean;
 }) {
+  const isImportExportEnabled = usePreference('enableImportExport');
+
+  const addDataActions = useMemo(() => {
+    const actions: MenuAction<AddDataOption>[] = [
+      { action: 'insert-document' as const, label: 'Insert document' },
+    ];
+
+    if (isImportExportEnabled) {
+      actions.unshift({
+        action: 'import-file' as const,
+        label: 'Import JSON or CSV file',
+      });
+    }
+
+    return actions;
+  }, [isImportExportEnabled]);
+
   return (
     <DropdownMenuButton<AddDataOption>
       data-testid="crud-add-data"
@@ -42,10 +60,6 @@ function AddDataMenuButton({
 }
 
 type AddDataOption = 'import-file' | 'insert-document';
-const addDataActions: MenuAction<AddDataOption>[] = [
-  { action: 'import-file', label: 'Import JSON or CSV file' },
-  { action: 'insert-document', label: 'Insert document' },
-];
 
 const AddDataMenu: React.FunctionComponent<AddDataMenuProps> = ({
   instanceDescription,
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -142,6 +142,8 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   queryLimit,
   querySkip,
 }) => {
+  const isImportExportEnabled = usePreference('enableImportExport');
+
   const displayedDocumentCount = useMemo(
     () => (loadingCount ? '' : `${count ?? 'N/A'}`),
     [loadingCount, count]
@@ -187,19 +189,21 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               instanceDescription={instanceDescription}
             />
           )}
-          <DropdownMenuButton<ExportDataOption>
-            data-testid="crud-export-collection"
-            actions={exportDataActions}
-            onAction={(action: ExportDataOption) =>
-              openExportFileDialog(action === 'export-full-collection')
-            }
-            buttonText="Export Data"
-            buttonProps={{
-              className: exportCollectionButtonStyles,
-              size: 'xsmall',
-              leftGlyph: <Icon glyph="Export" />,
-            }}
-          />
+          {isImportExportEnabled && (
+            <DropdownMenuButton<ExportDataOption>
+              data-testid="crud-export-collection"
+              actions={exportDataActions}
+              onAction={(action: ExportDataOption) =>
+                openExportFileDialog(action === 'export-full-collection')
+              }
+              buttonText="Export Data"
+              buttonProps={{
+                className: exportCollectionButtonStyles,
+                size: 'xsmall',
+                leftGlyph: <Icon glyph="Export" />,
+              }}
+            />
+          )}
           {!readonly && (
             <UpdateMenu
               isWritable={isWritable && !shouldDisableBulkOp}
diff --git a/packages/compass-web/package.json b/packages/compass-web/package.json
@@ -89,6 +89,7 @@
     "@types/sinon-chai": "^3.2.5",
     "buffer": "^6.0.3",
     "chai": "^4.3.6",
+    "compass-preferences-model": "^2.16.1",
     "depcheck": "^1.4.1",
     "dns-query": "^0.11.2",
     "eslint": "^7.25.0",
diff --git a/packages/compass-web/sandbox/index.html b/packages/compass-web/sandbox/index.html
@@ -9,6 +9,9 @@
       rel="stylesheet"
     />
     <style>
+      body {
+        margin: 0;
+      }
       #sandbox-app {
         width: 100vw;
         height: 100vh;
diff --git a/packages/compass-web/src/index.tsx b/packages/compass-web/src/index.tsx
diff --git a/packages/compass-web/webpack.config.js b/packages/compass-web/webpack.config.js
