[i18n] Graph translate missing labels (#28819)

* Add missing translations

* Resolve review comment

x-pack/plugins/graph/public/app.js

@@ -27,6 +27,7 @@ import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
 
 import appTemplate from './templates/index.html';
 import { getHomeBreadcrumbs, getWorkspaceBreadcrumbs } from './breadcrumbs';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import './angular-venn-simple.js';
 import gws from './graphClientWorkspace.js';
@@ -754,8 +755,27 @@ app.controller('graphuiPlugin', function ($scope, $route, $http, kbnUrl, Private
 
   if ($scope.indices.length === 0) {
     toastNotifications.addWarning({
-      title: 'No data source',
-      text: <p>Go to <a href={url}>Management &gt; Index Patterns</a> and create an index pattern</p>,
+      title: i18n('xpack.graph.noDataSourceNotificationMessageTitle', {
+        defaultMessage: 'No data source',
+      }),
+      text: (
+        <p>
+          <FormattedMessage
+            id="xpack.graph.noDataSourceNotificationMessageText"
+            defaultMessage="Go to {managementIndexPatternsLink} and create an index pattern"
+            values={{
+              managementIndexPatternsLink: (
+                <a href={url}>
+                  <FormattedMessage
+                    id="xpack.graph.noDataSourceNotificationMessageText.managementIndexPatternLinkText"
+                    defaultMessage="Management &gt; Index Patterns"
+                  />
+                </a>
+              )
+            }}
+          />
+        </p>
+      ),
     });
   }
 
@@ -925,7 +945,7 @@ app.controller('graphuiPlugin', function ($scope, $route, $http, kbnUrl, Private
     if(!savedObjectIndexPattern) {
       toastNotifications.addDanger(
         i18n('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
-          defaultMessage: `'Missing index pattern {indexPattern}`,
+          defaultMessage: 'Missing index pattern {indexPattern}',
           values: { indexPattern: wsObj.indexPattern },
         })
       );

x-pack/plugins/graph/public/services/saved_workspace.js

@@ -6,6 +6,7 @@
 
 import { uiModules } from 'ui/modules';
 import { SavedObjectProvider } from 'ui/courier';
+import { i18n } from '@kbn/i18n';
 
 const module = uiModules.get('app/dashboard');
 
@@ -26,7 +27,9 @@ export function SavedWorkspaceProvider(Private) {
 
         // default values that will get assigned if the doc is new
         defaults: {
-          title: 'New Graph Workspace',
+          title: i18n.translate('xpack.graph.savedWorkspace.workspaceNameTitle', {
+            defaultMessage: 'New Graph Workspace'
+          }),
           numLinks: 0,
           numVertices: 0,
           wsState: '{}',

x-pack/plugins/graph/public/services/saved_workspaces.js

@@ -10,6 +10,7 @@ import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
+import { i18n } from '@kbn/i18n';
 
 import { SavedWorkspaceProvider } from './saved_workspace';
 
@@ -23,8 +24,12 @@ export function SavedWorkspacesProvider(kbnUrl, Private, Promise) {
 
   this.loaderProperties = {
     name: 'Graph workspace',
-    noun: 'Graph workspace',
-    nouns: 'Graph workspaces'
+    noun: i18n.translate('xpack.graph.savedWorkspaces.graphWorkspaceLabel', {
+      defaultMessage: 'Graph workspace'
+    }),
+    nouns: i18n.translate('xpack.graph.savedWorkspaces.graphWorkspacesLabel', {
+      defaultMessage: 'Graph workspaces'
+    })
   };
 
   // Returns a single dashboard by ID, should be the name of the workspace

x-pack/plugins/graph/public/templates/index.html

@@ -22,7 +22,7 @@
           <option
             value=""
             i18n-id="xpack.graph.topNavMenu.selectIndexPatternOptionLabel"
-            i18n-default-message="Select index pattern..."
+            i18n-default-message="Select index pattern…"
           ></option>
         </select>
 
@@ -94,7 +94,7 @@
             </span>
             <input
               input-focus ng-model="fieldNamesFilterString"
-              placeholder="{{ ::'xpack.graph.queryConfig.filterPlaceholder' | i18n: { defaultMessage: 'Filter...' } }}"
+              placeholder="{{ ::'xpack.graph.queryConfig.filterPlaceholder' | i18n: { defaultMessage: 'Filter…' } }}"
               ng-change="filterFieldsKeyDown()"
               class="form-control"
               name="filter"
@@ -225,7 +225,11 @@
 
       </div>
 
-      <div class="kuiLocalDropdownCloseButton" aria-label="close" ng-click="kbnTopNav.close()">
+      <div
+        class="kuiLocalDropdownCloseButton"
+        aria-label="{{ ::'xpack.graph.queryConfig.closeAriaLabel' | i18n: { defaultMessage: 'close' } }}"
+        ng-click="kbnTopNav.close()"
+      >
         <span class="kuiIcon fa-chevron-circle-up"></span>
       </div>
 
@@ -480,8 +484,15 @@
           {{detail.latestNodeSelection.data.field}} {{detail.latestNodeSelection.data.term}}
         </div>
 
-        <button class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small" ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== detail.latestNodeSelection)"
-          tooltip="group the currently selected items into {{detail.latestNodeSelection.label}}" ng-click="workspace.groupSelections(detail.latestNodeSelection)">
+        <button
+          class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small"
+          ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== detail.latestNodeSelection)"
+          tooltip="{{ 'xpack.graph.sidebar.groupButtonTooltip' | i18n: {
+            defaultMessage: 'group the currently selected items into {latestSelectionLabel}',
+            values: { latestSelectionLabel: detail.latestNodeSelection.label },
+          } }}"
+          ng-click="workspace.groupSelections(detail.latestNodeSelection)"
+        >
           <span class="kuiButton__icon kuiIcon fa-object-group"></span>
           <span
             i18n-id="xpack.graph.sidebar.groupButtonLabel"
@@ -489,8 +500,15 @@
           ></span>
         </button>
 
-        <button class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small" ng-if="detail.latestNodeSelection.numChildren>0"
-          tooltip="ungroup {{detail.latestNodeSelection.label}}" ng-click="workspace.ungroup(detail.latestNodeSelection)">
+        <button
+          class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small"
+          ng-if="detail.latestNodeSelection.numChildren>0"
+          tooltip="{{ 'xpack.graph.sidebar.ungroupButtonTooltip' | i18n: {
+            defaultMessage: 'ungroup {latestSelectionLabel}',
+            values: { latestSelectionLabel: detail.latestNodeSelection.label },
+          } }}"
+          ng-click="workspace.ungroup(detail.latestNodeSelection)"
+        >
           <span class="kuiIcon fa-object-ungroup"></span>
           <span
             i18n-id="xpack.graph.sidebar.ungroupButtonLabel"