From 40c148ba48adc4f8f5fd806e25a7111d1519f428 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 12 Apr 2024 10:08:14 +0100
Subject: [PATCH] EmptyState: Provide custom messages for existing empty states
 (#86021)

provide custom messages for existing empty states
---
 .../app/features/admin/UserListAdminPage.tsx  |  3 +-
 public/app/features/api-keys/ApiKeysPage.tsx  |  3 +-
 .../commandPalette/CommandPalette.tsx         |  2 +-
 .../components/DataSourcesList.tsx            |  3 +-
 .../plugins/admin/components/PluginList.tsx   |  3 +-
 .../ServiceAccountsListPage.tsx               |  8 ++++-
 public/app/features/teams/TeamList.tsx        |  3 +-
 public/locales/en-US/grafana.json             | 33 +++++++++++++++++++
 public/locales/pseudo-LOCALE/grafana.json     | 33 +++++++++++++++++++
 9 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx
index 8b9c42b211c..6fbbc543a56 100644
--- a/public/app/features/admin/UserListAdminPage.tsx
+++ b/public/app/features/admin/UserListAdminPage.tsx
@@ -7,6 +7,7 @@ import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { LinkButton, RadioButtonGroup, useStyles2, FilterInput, EmptyState } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 
 import { AccessControlAction, StoreState, UserFilter } from '../../types';
 
@@ -99,7 +100,7 @@ const UserListAdminPageUnConnected = ({
         </div>
       </div>
       {!isLoading && users.length === 0 ? (
-        <EmptyState variant="not-found" />
+        <EmptyState message={t('users.empty-state.message', 'No users found')} variant="not-found" />
       ) : (
         <UsersTable
           users={users}
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index e3c85403ad7..ea9d42c8c71 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -5,6 +5,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { InlineField, InlineSwitch, Modal, Button, EmptyState } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 import { getTimeZone } from 'app/features/profile/state/selectors';
 import { AccessControlAction, ApiKey, ApikeyMigrationResult, StoreState } from 'app/types';
 
@@ -136,7 +137,7 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
               onDelete={this.onDeleteApiKey}
             />
           ) : (
-            <EmptyState variant="not-found" />
+            <EmptyState variant="not-found" message={t('api-keys.empty-state.message', 'No API keys found')} />
           )}
         </Page.Contents>
         {migrationResult && (
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index e6eb57ed7ab..a1e36d3a20b 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -121,7 +121,7 @@ const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResults
   const showEmptyState = !isFetchingSearchResults && items.length === 0;
 
   return showEmptyState ? (
-    <EmptyState variant="not-found" />
+    <EmptyState variant="not-found" message={t('command-palette.empty-state.message', 'No results found')} />
   ) : (
     <KBarResults
       items={items}
diff --git a/public/app/features/datasources/components/DataSourcesList.tsx b/public/app/features/datasources/components/DataSourcesList.tsx
index c2fa782b4af..ac15fd93cb6 100644
--- a/public/app/features/datasources/components/DataSourcesList.tsx
+++ b/public/app/features/datasources/components/DataSourcesList.tsx
@@ -7,6 +7,7 @@ import { config } from '@grafana/runtime';
 import { EmptyState, useStyles2 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 import { StoreState, AccessControlAction, useSelector } from 'app/types';
 
 import { getDataSources, getDataSourcesCount, useDataSourcesRoutes, useLoadDataSources } from '../state';
@@ -105,7 +106,7 @@ export function DataSourcesListView({
 
       {/* List */}
       {dataSources.length === 0 && !isLoading ? (
-        <EmptyState variant="not-found" />
+        <EmptyState variant="not-found" message={t('data-sources.empty-state.message', 'No data sources found')} />
       ) : (
         <ul className={styles.list}>{getDataSourcesList()}</ul>
       )}
diff --git a/public/app/features/plugins/admin/components/PluginList.tsx b/public/app/features/plugins/admin/components/PluginList.tsx
index 587c324a043..76ad72cc2b4 100644
--- a/public/app/features/plugins/admin/components/PluginList.tsx
+++ b/public/app/features/plugins/admin/components/PluginList.tsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 import { config } from '@grafana/runtime';
 import { EmptyState, Grid } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 import { CatalogPlugin, PluginListDisplayMode } from '../types';
 
@@ -20,7 +21,7 @@ export const PluginList = ({ plugins, displayMode, isLoading }: Props) => {
   const pathName = config.appSubUrl + (pathname.endsWith('/') ? pathname.slice(0, -1) : pathname);
 
   if (!isLoading && plugins.length === 0) {
-    return <EmptyState variant="not-found" />;
+    return <EmptyState variant="not-found" message={t('plugins.empty-state.message', 'No plugins found')} />;
   }
 
   return (
diff --git a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
index bc51b94d918..03b8b3a290a 100644
--- a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
@@ -8,6 +8,7 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 import { StoreState, ServiceAccountDTO, AccessControlAction, ServiceAccountStateFilter } from 'app/types';
 
 import { ServiceAccountTable } from './ServiceAccountTable';
@@ -209,7 +210,12 @@ export const ServiceAccountsListPageUnconnected = ({
             />
           </Box>
         </div>
-        {!isLoading && !noServiceAccountsCreated && serviceAccounts.length === 0 && <EmptyState variant="not-found" />}
+        {!isLoading && !noServiceAccountsCreated && serviceAccounts.length === 0 && (
+          <EmptyState
+            variant="not-found"
+            message={t('service-accounts.empty-state.message', 'No services accounts found')}
+          />
+        )}
         {!isLoading && noServiceAccountsCreated && (
           <>
             <EmptyListCTA
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 43bc88375a6..9830d3b7248 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -22,6 +22,7 @@ import {
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
+import { t } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction, Role, StoreState, Team } from 'app/types';
 
@@ -233,7 +234,7 @@ export const TeamList = ({
               </InlineField>
             </div>
             {hasFetched && teams.length === 0 ? (
-              <EmptyState variant="not-found" />
+              <EmptyState variant="not-found" message={t('teams.empty-state.message', 'No teams found')} />
             ) : (
               <Stack direction={'column'} gap={2}>
                 <InteractiveTable
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index dc683b42f36..0a041559e94 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -25,6 +25,11 @@
       "user": "User"
     }
   },
+  "api-keys": {
+    "empty-state": {
+      "message": "No API keys found"
+    }
+  },
   "bouncing-loader": {
     "label": "Loading"
   },
@@ -108,6 +113,9 @@
       "dark-theme": "Dark",
       "light-theme": "Light"
     },
+    "empty-state": {
+      "message": "No results found"
+    },
     "search-box": {
       "placeholder": "Search or jump to..."
     },
@@ -417,6 +425,9 @@
   "data-sources": {
     "datasource-add-button": {
       "label": "Add new data source"
+    },
+    "empty-state": {
+      "message": "No data sources found"
     }
   },
   "explore": {
@@ -714,6 +725,8 @@
       "connect": "Connect to this stack",
       "connecting": "Connecting to this stack...",
       "title": "Connect to a cloud stack",
+      "token-error-description": "There was an error saving the token. See the Grafana server logs for more details.",
+      "token-error-title": "Error saving token",
       "token-required-error": "Migration token is required"
     },
     "cta": {
@@ -1227,6 +1240,11 @@
       "message": "No playlists found"
     }
   },
+  "plugins": {
+    "empty-state": {
+      "message": "No plugins found"
+    }
+  },
   "profile": {
     "change-password": {
       "cancel-button": "Cancel",
@@ -1429,6 +1447,11 @@
       "placeholder": "Search for dashboards and folders"
     }
   },
+  "service-accounts": {
+    "empty-state": {
+      "message": "No services accounts found"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Share"
@@ -1557,6 +1580,11 @@
     "no-tags": "No tags found",
     "placeholder": "Filter by tag"
   },
+  "teams": {
+    "empty-state": {
+      "message": "No teams found"
+    }
+  },
   "time-picker": {
     "absolute": {
       "recent-title": "Recently used absolute ranges",
@@ -1650,6 +1678,11 @@
   "user-sessions": {
     "loading": "Loading sessions..."
   },
+  "users": {
+    "empty-state": {
+      "message": "No users found"
+    }
+  },
   "users-access-list": {
     "tabs": {
       "public-dashboard-users-tab-title": "Public dashboard users"
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c6df2a9ed4b..3a487595c91 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -25,6 +25,11 @@
       "user": "Ůşęř"
     }
   },
+  "api-keys": {
+    "empty-state": {
+      "message": "Ńő ÅPĨ ĸęyş ƒőūʼnđ"
+    }
+  },
   "bouncing-loader": {
     "label": "Ŀőäđįʼnģ"
   },
@@ -108,6 +113,9 @@
       "dark-theme": "Đäřĸ",
       "light-theme": "Ŀįģĥŧ"
     },
+    "empty-state": {
+      "message": "Ńő řęşūľŧş ƒőūʼnđ"
+    },
     "search-box": {
       "placeholder": "Ŝęäřčĥ őř ĵūmp ŧő..."
     },
@@ -417,6 +425,9 @@
   "data-sources": {
     "datasource-add-button": {
       "label": "Åđđ ʼnęŵ đäŧä şőūřčę"
+    },
+    "empty-state": {
+      "message": "Ńő đäŧä şőūřčęş ƒőūʼnđ"
     }
   },
   "explore": {
@@ -714,6 +725,8 @@
       "connect": "Cőʼnʼnęčŧ ŧő ŧĥįş şŧäčĸ",
       "connecting": "Cőʼnʼnęčŧįʼnģ ŧő ŧĥįş şŧäčĸ...",
       "title": "Cőʼnʼnęčŧ ŧő ä čľőūđ şŧäčĸ",
+      "token-error-description": "Ŧĥęřę ŵäş äʼn ęřřőř şävįʼnģ ŧĥę ŧőĸęʼn. Ŝęę ŧĥę Ğřäƒäʼnä şęřvęř ľőģş ƒőř mőřę đęŧäįľş.",
+      "token-error-title": "Ēřřőř şävįʼnģ ŧőĸęʼn",
       "token-required-error": "Mįģřäŧįőʼn ŧőĸęʼn įş řęqūįřęđ"
     },
     "cta": {
@@ -1227,6 +1240,11 @@
       "message": "Ńő pľäyľįşŧş ƒőūʼnđ"
     }
   },
+  "plugins": {
+    "empty-state": {
+      "message": "Ńő pľūģįʼnş ƒőūʼnđ"
+    }
+  },
   "profile": {
     "change-password": {
       "cancel-button": "Cäʼnčęľ",
@@ -1429,6 +1447,11 @@
       "placeholder": "Ŝęäřčĥ ƒőř đäşĥþőäřđş äʼnđ ƒőľđęřş"
     }
   },
+  "service-accounts": {
+    "empty-state": {
+      "message": "Ńő şęřvįčęş äččőūʼnŧş ƒőūʼnđ"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Ŝĥäřę"
@@ -1557,6 +1580,11 @@
     "no-tags": "Ńő ŧäģş ƒőūʼnđ",
     "placeholder": "Fįľŧęř þy ŧäģ"
   },
+  "teams": {
+    "empty-state": {
+      "message": "Ńő ŧęämş ƒőūʼnđ"
+    }
+  },
   "time-picker": {
     "absolute": {
       "recent-title": "Ŗęčęʼnŧľy ūşęđ äþşőľūŧę řäʼnģęş",
@@ -1650,6 +1678,11 @@
   "user-sessions": {
     "loading": "Ŀőäđįʼnģ şęşşįőʼnş..."
   },
+  "users": {
+    "empty-state": {
+      "message": "Ńő ūşęřş ƒőūʼnđ"
+    }
+  },
   "users-access-list": {
     "tabs": {
       "public-dashboard-users-tab-title": "Pūþľįč đäşĥþőäřđ ūşęřş"