Deangularize Dashboard

src/plugins/dashboard/public/application/_dashboard_app.scss

@@ -4,6 +4,12 @@
   flex: 1;
 }
 
+.dashboardViewport {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .dshStartScreen {
   text-align: center;
 }

src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx

@@ -16,26 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import { AddToLibraryAction } from '.';
+import { DashboardContainer } from '../embeddable';
+import { getSampleDashboardInput } from '../test_helpers';
+
+import { CoreStart } from 'kibana/public';
+
+import { coreMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
+import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+
 import {
-  isErrorEmbeddable,
+  EmbeddableInput,
+  ErrorEmbeddable,
   IContainer,
+  isErrorEmbeddable,
   ReferenceOrValueEmbeddable,
-  EmbeddableInput,
-} from '../../embeddable_plugin';
-import { DashboardContainer } from '../embeddable';
-import { getSampleDashboardInput } from '../test_helpers';
+  ViewMode,
+} from '../../services/embeddable';
 import {
-  CONTACT_CARD_EMBEDDABLE,
-  ContactCardEmbeddableFactory,
   ContactCardEmbeddable,
+  ContactCardEmbeddableFactory,
   ContactCardEmbeddableInput,
   ContactCardEmbeddableOutput,
-} from '../../embeddable_plugin_test_samples';
-import { coreMock } from '../../../../../core/public/mocks';
-import { CoreStart } from 'kibana/public';
-import { AddToLibraryAction } from '.';
-import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
-import { ErrorEmbeddable, ViewMode } from '../../../../embeddable/public';
+  CONTACT_CARD_EMBEDDABLE,
+} from '../../services/embeddable_test_samples';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -60,6 +65,8 @@ beforeEach(async () => {
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
+    uiSettings: uiSettingsServiceMock.createStartContract(),
+    http: coreStart.http,
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

src/plugins/dashboard/public/application/actions/add_to_library_action.tsx

@@ -17,17 +17,20 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
-import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
-import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
+
+import { ActionByType, IncompatibleActionError } from '../../services/ui_actions';
 import {
+  ViewMode,
+  PanelState,
+  IEmbeddable,
   PanelNotFoundError,
   EmbeddableInput,
   isReferenceOrValueEmbeddable,
   isErrorEmbeddable,
-} from '../../../../embeddable/public';
-import { NotificationsStart } from '../../../../../core/public';
+} from '../../services/embeddable';
+import { NotificationsStart } from '../../services/core';
+import { dashboardAddToLibraryAction } from '../../dashboard_strings';
 import { DashboardPanelState, DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '..';
 
 export const ACTION_ADD_TO_LIBRARY = 'addToFromLibrary';
@@ -47,9 +50,7 @@ export class AddToLibraryAction implements ActionByType<typeof ACTION_ADD_TO_LIB
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }
-    return i18n.translate('dashboard.panel.AddToLibrary', {
-      defaultMessage: 'Add to library',
-    });
+    return dashboardAddToLibraryAction.getDisplayName();
   }
 
   public getIconType({ embeddable }: AddToLibraryActionContext) {
@@ -92,13 +93,12 @@ export class AddToLibraryAction implements ActionByType<typeof ACTION_ADD_TO_LIB
     };
     dashboard.replacePanel(panelToReplace, newPanel, true);
 
-    const title = i18n.translate('dashboard.panel.addToLibrary.successMessage', {
-      defaultMessage: `Panel '{panelTitle}' was added to the visualize library`,
-      values: { panelTitle: embeddable.getTitle() },
-    });
+    const title = dashboardAddToLibraryAction.getSuccessMessage(
+      embeddable.getTitle() ? `'${embeddable.getTitle()}'` : ''
+    );
     this.deps.toasts.addSuccess({
       title,
-      'data-test-subj': 'unlinkPanelSuccess',
+      'data-test-subj': 'addPanelToLibrarySuccess',
     });
   }
 }

src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx

@@ -16,20 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isErrorEmbeddable, IContainer, ErrorEmbeddable } from '../../embeddable_plugin';
+
 import { DashboardContainer, DashboardPanelState } from '../embeddable';
 import { getSampleDashboardInput, getSampleDashboardPanel } from '../test_helpers';
+
+import { coreMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
+import { CoreStart } from 'kibana/public';
+import { ClonePanelAction } from '.';
+import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
 import {
-  CONTACT_CARD_EMBEDDABLE,
-  ContactCardEmbeddableFactory,
   ContactCardEmbeddable,
+  ContactCardEmbeddableFactory,
   ContactCardEmbeddableInput,
   ContactCardEmbeddableOutput,
-} from '../../embeddable_plugin_test_samples';
-import { coreMock } from '../../../../../core/public/mocks';
-import { CoreStart } from 'kibana/public';
-import { ClonePanelAction } from '.';
-import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+  CONTACT_CARD_EMBEDDABLE,
+} from '../../services/embeddable_test_samples';
+import { ErrorEmbeddable, IContainer, isErrorEmbeddable } from '../../services/embeddable';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -60,6 +62,8 @@ beforeEach(async () => {
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
+    uiSettings: uiSettingsServiceMock.createStartContract(),
+    http: coreStart.http,
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/actions/clone_panel_action.tsx

@@ -17,23 +17,26 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-import { CoreStart } from 'src/core/public';
-import uuid from 'uuid';
 import _ from 'lodash';
-import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
-import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
-import { SavedObject } from '../../../../saved_objects/public';
+import uuid from 'uuid';
+
+import { CoreStart } from 'src/core/public';
+import { ActionByType, IncompatibleActionError } from '../../services/ui_actions';
+import { SavedObject } from '../../services/saved_objects';
 import {
+  ViewMode,
+  PanelState,
+  IEmbeddable,
   PanelNotFoundError,
   EmbeddableInput,
   SavedObjectEmbeddableInput,
   isErrorEmbeddable,
-} from '../../../../embeddable/public';
+} from '../../services/embeddable';
 import {
   placePanelBeside,
   IPanelPlacementBesideArgs,
 } from '../embeddable/panel/dashboard_panel_placement';
+import { dashboardClonePanelAction } from '../../dashboard_strings';
 import { DashboardPanelState, DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '..';
 
 export const ACTION_CLONE_PANEL = 'clonePanel';
@@ -53,9 +56,7 @@ export class ClonePanelAction implements ActionByType<typeof ACTION_CLONE_PANEL>
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }
-    return i18n.translate('dashboard.panel.clonePanel', {
-      defaultMessage: 'Clone panel',
-    });
+    return dashboardClonePanelAction.getDisplayName();
   }
 
   public getIconType({ embeddable }: ClonePanelActionContext) {
@@ -99,9 +100,7 @@ export class ClonePanelAction implements ActionByType<typeof ACTION_CLONE_PANEL>
   }
 
   private async getUniqueTitle(rawTitle: string, embeddableType: string): Promise<string> {
-    const clonedTag = i18n.translate('dashboard.panel.title.clonedTag', {
-      defaultMessage: 'copy',
-    });
+    const clonedTag = dashboardClonePanelAction.getClonedTag();
     const cloneRegex = new RegExp(`\\(${clonedTag}\\)`, 'g');
     const cloneNumberRegex = new RegExp(`\\(${clonedTag} [0-9]+\\)`, 'g');
     const baseTitle = rawTitle.replace(cloneNumberRegex, '').replace(cloneRegex, '').trim();
@@ -152,9 +151,7 @@ export class ClonePanelAction implements ActionByType<typeof ACTION_CLONE_PANEL>
       (panelState.explicitInput as SavedObjectEmbeddableInput).savedObjectId = clonedSavedObject.id;
     }
     this.core.notifications.toasts.addSuccess({
-      title: i18n.translate('dashboard.panel.clonedToast', {
-        defaultMessage: 'Cloned panel',
-      }),
+      title: dashboardClonePanelAction.getSuccessMessage(),
       'data-test-subj': 'addObjectToContainerSuccess',
     });
     return panelState;

src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx

@@ -17,18 +17,20 @@
  * under the License.
  */
 
-import { isErrorEmbeddable } from '../../embeddable_plugin';
 import { ExpandPanelAction } from './expand_panel_action';
 import { DashboardContainer } from '../embeddable';
 import { getSampleDashboardInput, getSampleDashboardPanel } from '../test_helpers';
+
+import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+import { isErrorEmbeddable } from '../../services/embeddable';
 import {
   CONTACT_CARD_EMBEDDABLE,
   ContactCardEmbeddableFactory,
   ContactCardEmbeddable,
   ContactCardEmbeddableInput,
   ContactCardEmbeddableOutput,
-} from '../../embeddable_plugin_test_samples';
-import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+} from '../../services/embeddable_test_samples';
+import { coreMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 
@@ -52,6 +54,8 @@ beforeEach(async () => {
     overlays: {} as any,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
+    uiSettings: uiSettingsServiceMock.createStartContract(),
+    http: coreMock.createStart().http,
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/actions/expand_panel_action.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-import { IEmbeddable } from '../../embeddable_plugin';
-import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
+import { dashboardExpandPanelAction } from '../../dashboard_strings';
+import { IEmbeddable } from '../../services/embeddable';
+import { ActionByType, IncompatibleActionError } from '../../services/ui_actions';
 import {
   DASHBOARD_CONTAINER_TYPE,
   DashboardContainer,
@@ -59,12 +59,8 @@ export class ExpandPanelAction implements ActionByType<typeof ACTION_EXPAND_PANE
     }
 
     return isExpanded(embeddable)
-      ? i18n.translate('dashboard.actions.toggleExpandPanelMenuItem.expandedDisplayName', {
-          defaultMessage: 'Minimize',
-        })
-      : i18n.translate('dashboard.actions.toggleExpandPanelMenuItem.notExpandedDisplayName', {
-          defaultMessage: 'Maximize panel',
-        });
+      ? dashboardExpandPanelAction.getMinimizeTitle()
+      : dashboardExpandPanelAction.getMaximizeTitle();
   }
 
   public getIconType({ embeddable }: ExpandPanelActionContext) {

src/plugins/dashboard/public/application/actions/export_csv_action.test.tsx

@@ -19,7 +19,7 @@
 
 import { CoreStart } from 'kibana/public';
 
-import { isErrorEmbeddable, IContainer, ErrorEmbeddable } from '../../embeddable_plugin';
+import { isErrorEmbeddable, IContainer, ErrorEmbeddable } from '../../services/embeddable';
 import { DashboardContainer } from '../../application/embeddable';
 import { getSampleDashboardInput, getSampleDashboardPanel } from '../../application/test_helpers';
 import {
@@ -28,8 +28,8 @@ import {
   ContactCardEmbeddableOutput,
   ContactCardExportableEmbeddableFactory,
   CONTACT_CARD_EXPORTABLE_EMBEDDABLE,
-} from '../../embeddable_plugin_test_samples';
-import { coreMock } from '../../../../../core/public/mocks';
+} from '../../services/embeddable_test_samples';
+import { coreMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
 import { ExportCSVAction } from './export_csv_action';
 import { embeddablePluginMock } from '../../../../embeddable/public/mocks';
 import { DataPublicPluginStart } from '../../../../data/public/types';
@@ -68,6 +68,8 @@ describe('Export CSV action', () => {
       overlays: coreStart.overlays,
       savedObjectMetaData: {} as any,
       uiActions: {} as any,
+      uiSettings: uiSettingsServiceMock.createStartContract(),
+      http: coreStart.http,
     };
     const input = getSampleDashboardInput({
       panels: {

src/plugins/dashboard/public/application/actions/export_csv_action.tsx

@@ -17,14 +17,15 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
 import { Datatable } from 'src/plugins/expressions/public';
-import { FormatFactory } from '../../../../data/common/field_formats/utils';
-import { DataPublicPluginStart, exporters } from '../../../../data/public';
-import { downloadMultipleAs } from '../../../../share/public';
-import { Adapters, IEmbeddable } from '../../../../embeddable/public';
-import { ActionByType } from '../../../../ui_actions/public';
 import { CoreStart } from '../../../../../core/public';
+import { FormatFactory } from '../../../../data/common/field_formats/utils';
+
+import { DataPublicPluginStart, exporters } from '../../services/data';
+import { downloadMultipleAs } from '../../services/share';
+import { Adapters, IEmbeddable } from '../../services/embeddable';
+import { ActionByType } from '../../services/ui_actions';
+import { dashboardExportCsvAction } from '../../dashboard_strings';
 
 export const ACTION_EXPORT_CSV = 'ACTION_EXPORT_CSV';
 
@@ -57,9 +58,7 @@ export class ExportCSVAction implements ActionByType<typeof ACTION_EXPORT_CSV> {
   }
 
   public readonly getDisplayName = (context: ExportContext): string =>
-    i18n.translate('dashboard.actions.DownloadCreateDrilldownAction.displayName', {
-      defaultMessage: 'Download as CSV',
-    });
+    dashboardExportCsvAction.getDisplayName();
 
   public async isCompatible(context: ExportContext): Promise<boolean> {
     return !!this.hasDatatableContent(context.embeddable?.getInspectorAdapters?.());
@@ -99,12 +98,7 @@ export class ExportCSVAction implements ActionByType<typeof ACTION_EXPORT_CSV> {
           // skip empty datatables
           if (datatable) {
             const postFix = datatables.length > 1 ? `-${i + 1}` : '';
-            const untitledFilename = i18n.translate(
-              'dashboard.actions.downloadOptionsUnsavedFilename',
-              {
-                defaultMessage: 'unsaved',
-              }
-            );
+            const untitledFilename = dashboardExportCsvAction.getUntitledFilename();
 
             memo[`${context!.embeddable!.getTitle() || untitledFilename}${postFix}.csv`] = {
               content: exporters.datatableToCSV(datatable, {