Merge pull request elastic#17 from poffdeluxe/bug/dashboard-option-se…

…lector Fix selector not propagating updates
poffdeluxe · Jan 27, 2021 · 67dcc1d · 67dcc1d
2 parents 6b618ed + b7987bb
commit 67dcc1d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 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
@@ -60,10 +60,13 @@ export function SavedObjectSaveModalDashboard(props: SaveModalDashboardProps) {
   const rightOptions = !disableDashboardOptions
     ? () => (
         <SaveModalDashboardSelector
-          onSelect={(dash) => {
+          onSelectDashboard={(dash) => {
             setSelectedDashboard(dash);
           }}
-          {...{ copyOnSave, documentId }}
+          onChange={(option) => {
+            setDashboardOption(option);
+          }}
+          {...{ copyOnSave, documentId, dashboardOption }}
         />
       )
     : null;

diff --git a/...resentation_util/public/components/saved_object_save_modal_dashboard_selector.stories.tsx b/...resentation_util/public/components/saved_object_save_modal_dashboard_selector.stories.tsx
@@ -6,7 +6,7 @@
  * Public License, v 1.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { SaveModalDashboardSelector } from './saved_object_save_modal_dashboard_selector';
@@ -32,9 +32,13 @@ export function Example({
   copyOnSave: boolean;
   hasDocumentId: boolean;
 }) {
+  const [dashboardOption, setDashboardOption] = useState<'new' | 'existing' | null>('existing');
+
   return (
     <SaveModalDashboardSelector
-      onSelect={action('onSelect')}
+      onSelectDashboard={action('onSelect')}
+      onChange={setDashboardOption}
+      dashboardOption={dashboardOption}
       copyOnSave={copyOnSave}
       documentId={hasDocumentId ? 'abc' : undefined}
     />

diff --git a/...lugins/presentation_util/public/components/saved_object_save_modal_dashboard_selector.tsx b/...lugins/presentation_util/public/components/saved_object_save_modal_dashboard_selector.tsx
@@ -6,7 +6,7 @@
  * Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -29,19 +29,18 @@ import './saved_object_save_modal_dashboard.scss';
 export interface SaveModalDashboardSelectorProps {
   copyOnSave: boolean;
   documentId?: string;
-  onSelect: DashboardPickerProps['onChange'];
+  onSelectDashboard: DashboardPickerProps['onChange'];
+
+  dashboardOption: 'new' | 'existing' | null;
+  onChange: (dashboardOption: 'new' | 'existing' | null) => void;
 }
 
 export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProps) {
-  const { documentId, onSelect, copyOnSave } = props;
+  const { documentId, onSelectDashboard, dashboardOption, onChange, copyOnSave } = props;
 
   const { capabilities } = pluginServices.getContextHooks();
   const { canCreateNewDashboards, canEditDashboards } = capabilities.useContext();
 
-  const [dashboardOption, setDashboardOption] = useState<'new' | 'existing' | null>(
-    documentId ? null : 'existing'
-  );
-
   const isDisabled = !copyOnSave && !!documentId;
 
   return (
@@ -85,13 +84,13 @@ export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProp
                       defaultMessage: 'Existing',
                     }
                   )}
-                  onChange={() => setDashboardOption('existing')}
+                  onChange={() => onChange('existing')}
                   disabled={isDisabled}
                 />
                 <div className="savAddDashboard__searchDashboards">
                   <DashboardPicker
                     isDisabled={dashboardOption !== 'existing'}
-                    onChange={onSelect}
+                    onChange={onSelectDashboard}
                   />
                 </div>
                 <EuiSpacer size="s" />
@@ -110,7 +109,7 @@ export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProp
                       defaultMessage: 'New',
                     }
                   )}
-                  onChange={() => setDashboardOption('new')}
+                  onChange={() => onChange('new')}
                   disabled={isDisabled}
                 />
                 <EuiSpacer size="s" />
@@ -123,7 +122,7 @@ export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProp
               label={i18n.translate('presentationUtil.saveModalDashboard.libraryOptionLabel', {
                 defaultMessage: 'No dashboard, but add to library',
               })}
-              onChange={() => setDashboardOption(null)}
+              onChange={() => onChange(null)}
               disabled={isDisabled}
             />
           </div>