Update save behavior when editing existing visualization, Fix save wi…

…thout specifying dashboard
elastic · Dec 4, 2020 · cd22ea0 · cd22ea0
1 parent 9d7cc61
commit cd22ea0
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 46 deletions.
diff --git a/src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard.tsx b/src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard.tsx
@@ -59,12 +59,16 @@ export interface DashboardSaveModalProps {
 }
 
 export function SavedObjectSaveModalDashboard(props: DashboardSaveModalProps) {
-  const [dashboardOption, setDashboardOption] = useState<'new' | 'existing' | null>('existing');
+  const { documentInfo, savedObjectsClient, tagOptions } = props;
+  const initialCopyOnSave = !Boolean(documentInfo.id);
+
+  const [dashboardOption, setDashboardOption] = useState<'new' | 'existing' | null>(
+    documentInfo.id ? null : 'existing'
+  );
   const [selectedDashboard, setSelectedDashboard] = useState<{ id: string; name: string } | null>(
     null
   );
-
-  const { documentInfo, savedObjectsClient, tagOptions } = props;
+  const [copyOnSave, setCopyOnSave] = useState<boolean>(initialCopyOnSave);
 
   const renderDashboardSelect = (state: SaveModalState) => {
     const isDisabled = Boolean(!state.copyOnSave && documentInfo.id);
@@ -156,8 +160,9 @@ export function SavedObjectSaveModalDashboard(props: DashboardSaveModalProps) {
     );
   };
 
-  const onCopyOnSaveChange = (copyOnSave: boolean) => {
+  const onCopyOnSaveChange = (newCopyOnSave: boolean) => {
     setDashboardOption(null);
+    setCopyOnSave(newCopyOnSave);
   };
 
   const onModalSave = (onSaveProps: OnSaveProps) => {
@@ -176,12 +181,14 @@ export function SavedObjectSaveModalDashboard(props: DashboardSaveModalProps) {
     props.onSave({ ...onSaveProps, dashboardId });
   };
 
-  const saveLibraryLabel = i18n.translate(
-    'presentationUtil.saveModalDashboard.saveToLibraryLabel',
-    {
-      defaultMessage: 'Save and add to library',
-    }
-  );
+  const saveLibraryLabel =
+    !copyOnSave && documentInfo.id
+      ? i18n.translate('presentationUtil.saveModalDashboard.saveLabel', {
+          defaultMessage: 'Save',
+        })
+      : i18n.translate('presentationUtil.saveModalDashboard.saveToLibraryLabel', {
+          defaultMessage: 'Save and add to library',
+        });
   const saveDashboardLabel = i18n.translate(
     'presentationUtil.saveModalDashboard.saveAndGoToDashboardLabel',
     {
@@ -191,19 +198,22 @@ export function SavedObjectSaveModalDashboard(props: DashboardSaveModalProps) {
 
   const confirmButtonLabel = dashboardOption === null ? saveLibraryLabel : saveDashboardLabel;
 
+  const isValid = !(dashboardOption === 'existing' && selectedDashboard === null);
+
   return (
     <SavedObjectSaveModal
       onSave={onModalSave}
       onClose={props.onClose}
       title={documentInfo.title}
       showCopyOnSave={documentInfo.id ? true : false}
-      initialCopyOnSave={Boolean(documentInfo.id)}
+      initialCopyOnSave={initialCopyOnSave}
       confirmButtonLabel={confirmButtonLabel}
       objectType={props.objectType}
       options={dashboardOption === null ? tagOptions : undefined} // Show tags when not adding to dashboard
       rightOptions={renderDashboardSelect}
       description={documentInfo.description}
       showDescription={true}
+      isValid={isValid}
       onCopyOnSaveChange={onCopyOnSaveChange}
     />
   );

diff --git a/...ugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap b/...ugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap
diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.test.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.test.tsx
@@ -53,6 +53,34 @@ describe('SavedObjectSaveModal', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should render matching snapshot when custom isValid is set', () => {
+    const falseWrapper = shallow(
+      <SavedObjectSaveModal
+        onSave={() => void 0}
+        onClose={() => void 0}
+        title={'Saved Object title'}
+        showCopyOnSave={false}
+        objectType="visualization"
+        showDescription={true}
+        isValid={false}
+      />
+    );
+    expect(falseWrapper).toMatchSnapshot();
+
+    const trueWrapper = shallow(
+      <SavedObjectSaveModal
+        onSave={() => void 0}
+        onClose={() => void 0}
+        title={'Saved Object title'}
+        showCopyOnSave={false}
+        objectType="visualization"
+        showDescription={true}
+        isValid={true}
+      />
+    );
+    expect(trueWrapper).toMatchSnapshot();
+  });
+
   it('allows specifying custom save button label', () => {
     const wrapper = mountWithIntl(
       <SavedObjectSaveModal

diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx
@@ -63,6 +63,7 @@ interface Props {
   rightOptions?: React.ReactNode | ((state: SaveModalState) => React.ReactNode);
   description?: string;
   showDescription: boolean;
+  isValid?: boolean;
 }
 
 export interface SaveModalState {
@@ -279,12 +280,14 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
       confirmLabel = this.props.confirmButtonLabel;
     }
 
+    const isValid = this.props.isValid !== undefined ? this.props.isValid : true;
+
     return (
       <EuiButton
         fill
         data-test-subj="confirmSaveSavedObjectButton"
         isLoading={isLoading}
-        isDisabled={title.length === 0}
+        isDisabled={title.length === 0 || !isValid}
         type="submit"
       >
         {confirmLabel}

diff --git a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
@@ -327,8 +327,6 @@ export const getTopNavConfig = (
                 };
 
                 if (dashboardId) {
-                  // TODO: this should be an edit by value path
-                  // const appPath = `${VisualizeConstants.EDIT_PATH}/${encodeURIComponent(id)}`;
                   const appPath = `${VisualizeConstants.LANDING_PAGE_PATH}`;
 
                   // Manually insert a new url so the back button will open the saved visualization.

diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -662,38 +662,6 @@ describe('Lens App', () => {
         });
       });
 
-      it('Shows Save button in create by value mode with no originating app', async () => {
-        const props = makeDefaultProps();
-        const services = makeDefaultServices();
-        services.dashboardFeatureFlag = { allowByValueEmbeddables: true };
-        props.incomingState = {
-          originatingApp: '',
-          valueInput: {
-            id: 'whatchaGonnaDoWith',
-            attributes: {
-              title:
-                'whatcha gonna do with all these references? All these references in your value Input',
-              references: [] as SavedObjectReference[],
-            },
-          } as LensByValueInput,
-        };
-
-        const { component } = mountWith({ props, services });
-
-        await act(async () => {
-          const topNavMenuConfig = component.find(TopNavMenu).prop('config');
-          expect(topNavMenuConfig).not.toContainEqual(
-            expect.objectContaining(navMenuItems.expectedSaveAndReturnButton)
-          );
-          expect(topNavMenuConfig).not.toContainEqual(
-            expect.objectContaining(navMenuItems.expectedSaveAsButton)
-          );
-          expect(topNavMenuConfig).toContainEqual(
-            expect.objectContaining(navMenuItems.expectedSaveButton)
-          );
-        });
-      });
-
       it('Shows Save and Return and Save As buttons in edit by reference mode', async () => {
         const props = makeDefaultProps();
         props.initialInput = { savedObjectId: defaultSavedObjectId, id: '5678' };