[Time to Visualize] Add visualizations to dashboard from save modal

.i18nrc.json

@@ -28,6 +28,7 @@
     ],
     "maps_legacy": "src/plugins/maps_legacy",
     "monaco": "packages/kbn-monaco/src",
+    "presentationUtil": "src/plugins/presentation_util",
     "indexPatternManagement": "src/plugins/index_pattern_management",
     "advancedSettings": "src/plugins/advanced_settings",
     "kibana_legacy": "src/plugins/kibana_legacy",

docs/developer/plugin-list.asciidoc

@@ -160,6 +160,10 @@ It also provides a stateful version of it on the start contract.
 Content is fetched from the remote (https://feeds.elastic.co and https://feeds-staging.elastic.co in dev mode) once a day, with periodic checks if the content needs to be refreshed. All newsfeed content is hosted remotely.
 
 
+|{kib-repo}blob/{branch}/src/plugins/presentation_util/README.md[presentationUtil]
+|Utilities and components used by the presentation-related plugins
+
+
 |{kib-repo}blob/{branch}/src/plugins/region_map/README.md[regionMap]
 |Create choropleth maps. Display the results of a term-aggregation as e.g. countries, zip-codes, states.
 

packages/kbn-optimizer/limits.yml

@@ -104,3 +104,4 @@ pageLoadAssetSize:
   watcher: 43598
   runtimeFields: 41752
   stackAlerts: 29684
+  presentationUtil: 28545

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -549,6 +549,7 @@ export class DashboardAppController {
                 incomingEmbeddable.type,
                 incomingEmbeddable.input
               );
+              updateViewMode(ViewMode.EDIT);
             }
           }
 

src/plugins/presentation_util/README.md

@@ -0,0 +1,3 @@
+# presentationUtil
+
+Utilities and components used by the presentation-related plugins

src/plugins/presentation_util/common/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const PLUGIN_ID = 'presentationUtil';
+export const PLUGIN_NAME = 'presentationUtil';

src/plugins/presentation_util/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "presentationUtil",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["dashboard", "savedObjects"],
+  "optionalPlugins": []
+}

src/plugins/presentation_util/public/components/dashboard_picker.tsx

@@ -0,0 +1,92 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { i18n } from '@kbn/i18n';
+
+import { EuiComboBox } from '@elastic/eui';
+import { SavedObjectsClientContract } from '../../../../core/public';
+import { SavedObjectDashboard } from '../../../../plugins/dashboard/public';
+
+export interface DashboardPickerProps {
+  onChange: (dashboard: { name: string; id: string } | null) => void;
+  isDisabled: boolean;
+  savedObjectsClient: SavedObjectsClientContract;
+}
+
+interface DashboardOption {
+  label: string;
+  value: string;
+}
+
+export function DashboardPicker(props: DashboardPickerProps) {
+  const [dashboards, setDashboards] = useState<DashboardOption[]>([]);
+  const [isLoadingDashboards, setIsLoadingDashboards] = useState(true);
+  const [selectedDashboard, setSelectedDashboard] = useState<DashboardOption | null>(null);
+
+  const { savedObjectsClient, isDisabled, onChange } = props;
+
+  const fetchDashboards = useCallback(
+    async (query) => {
+      setIsLoadingDashboards(true);
+      setDashboards([]);
+
+      const { savedObjects } = await savedObjectsClient.find<SavedObjectDashboard>({
+        type: 'dashboard',
+        search: query ? `${query}*` : '',
+        searchFields: ['title'],
+      });
+      if (savedObjects) {
+        setDashboards(savedObjects.map((d) => ({ value: d.id, label: d.attributes.title })));
+      }
+      setIsLoadingDashboards(false);
+    },
+    [savedObjectsClient]
+  );
+
+  // Initial dashboard load
+  useEffect(() => {
+    fetchDashboards('');
+  }, [fetchDashboards]);
+
+  return (
+    <EuiComboBox
+      placeholder={i18n.translate('presentationUtil.dashboardPicker.searchDashboardPlaceholder', {
+        defaultMessage: 'Search dashboards...',
+      })}
+      singleSelection={{ asPlainText: true }}
+      options={dashboards || []}
+      selectedOptions={!!selectedDashboard ? [selectedDashboard] : undefined}
+      onChange={(e) => {
+        if (e.length) {
+          setSelectedDashboard({ value: e[0].value || '', label: e[0].label });
+          onChange({ name: e[0].label, id: e[0].value || '' });
+        } else {
+          setSelectedDashboard(null);
+          onChange(null);
+        }
+      }}
+      onSearchChange={fetchDashboards}
+      isDisabled={isDisabled}
+      isLoading={isLoadingDashboards}
+      compressed={true}
+    />
+  );
+}

src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard.scss

@@ -0,0 +1,5 @@
+.savAddDashboard__searchDashboards {
+  margin-left: $euiSizeL;
+  margin-top: $euiSizeXS;
+  width: 300px;
+}

src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard.tsx

@@ -0,0 +1,220 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiRadio,
+  EuiIconTip,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
+import { SavedObjectsClientContract } from '../../../../core/public';
+
+import {
+  OnSaveProps,
+  SaveModalState,
+  SavedObjectSaveModal,
+} from '../../../../plugins/saved_objects/public';
+
+import { DashboardPicker } from './dashboard_picker';
+
+import './saved_object_save_modal_dashboard.scss';
+
+interface SaveModalDocumentInfo {
+  id?: string;
+  title: string;
+  description?: string;
+}
+
+export interface DashboardSaveModalProps {
+  documentInfo: SaveModalDocumentInfo;
+  objectType: string;
+  onClose: () => void;
+  onSave: (props: OnSaveProps & { dashboardId: string | null }) => void;
+  savedObjectsClient: SavedObjectsClientContract;
+  tagOptions?: React.ReactNode | ((state: SaveModalState) => React.ReactNode);
+}
+
+export function SavedObjectSaveModalDashboard(props: DashboardSaveModalProps) {
+  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 [copyOnSave, setCopyOnSave] = useState<boolean>(initialCopyOnSave);
+
+  const renderDashboardSelect = (state: SaveModalState) => {
+    const isDisabled = Boolean(!state.copyOnSave && documentInfo.id);
+
+    return (
+      <>
+        <EuiFormRow
+          label={
+            <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+              <EuiFlexItem grow={false}>
+                <FormattedMessage
+                  id="presentationUtil.saveModalDashboard.addToDashboardLabel"
+                  defaultMessage="Add to dashboard"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  type="iInCircle"
+                  content={
+                    <FormattedMessage
+                      id="presentationUtil.saveModalDashboard.dashboardInfoTooltip"
+                      defaultMessage="Items added to a dashboard will not appear in the library and must be edited from the dashboard."
+                    />
+                  }
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
+          hasChildLabel={false}
+        >
+          <EuiPanel color="subdued" hasShadow={false}>
+            <div>
+              <EuiRadio
+                checked={dashboardOption === 'existing'}
+                id="existing"
+                name="dashboard-option"
+                label={i18n.translate(
+                  'presentationUtil.saveModalDashboard.existingDashboardOptionLabel',
+                  {
+                    defaultMessage: 'Existing',
+                  }
+                )}
+                onChange={() => setDashboardOption('existing')}
+                disabled={isDisabled}
+              />
+
+              <div className="savAddDashboard__searchDashboards">
+                <DashboardPicker
+                  savedObjectsClient={savedObjectsClient}
+                  isDisabled={dashboardOption !== 'existing'}
+                  onChange={(dash) => {
+                    setSelectedDashboard(dash);
+                  }}
+                />
+              </div>
+
+              <EuiSpacer size="s" />
+
+              <EuiRadio
+                checked={dashboardOption === 'new'}
+                id="new"
+                name="dashboard-option"
+                label={i18n.translate(
+                  'presentationUtil.saveModalDashboard.newDashboardOptionLabel',
+                  {
+                    defaultMessage: 'New',
+                  }
+                )}
+                onChange={() => setDashboardOption('new')}
+                disabled={isDisabled}
+              />
+
+              <EuiSpacer size="s" />
+
+              <EuiRadio
+                checked={dashboardOption === null}
+                id="library"
+                name="dashboard-option"
+                label={i18n.translate('presentationUtil.saveModalDashboard.libraryOptionLabel', {
+                  defaultMessage: 'No dashboard, but add to library',
+                })}
+                onChange={() => setDashboardOption(null)}
+                disabled={isDisabled}
+              />
+            </div>
+          </EuiPanel>
+        </EuiFormRow>
+      </>
+    );
+  };
+
+  const onCopyOnSaveChange = (newCopyOnSave: boolean) => {
+    setDashboardOption(null);
+    setCopyOnSave(newCopyOnSave);
+  };
+
+  const onModalSave = (onSaveProps: OnSaveProps) => {
+    let dashboardId = null;
+
+    // Don't save with a dashboard ID if we're
+    // just updating an existing visualization
+    if (!(!onSaveProps.newCopyOnSave && documentInfo.id)) {
+      if (dashboardOption === 'existing') {
+        dashboardId = selectedDashboard?.id || null;
+      } else {
+        dashboardId = dashboardOption;
+      }
+    }
+
+    props.onSave({ ...onSaveProps, dashboardId });
+  };
+
+  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',
+    {
+      defaultMessage: 'Save and go to Dashboard',
+    }
+  );
+
+  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={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}
+    />
+  );
+}