EmptyState: Provide custom messages for existing empty states (#86021)

provide custom messages for existing empty states
This commit is contained in:
Ashley Harrison
2024-04-12 10:08:14 +01:00
committed by GitHub
parent 505bdf5a8d
commit 40c148ba48
9 changed files with 84 additions and 7 deletions

View File

@@ -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}

View File

@@ -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 && (

View File

@@ -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}

View File

@@ -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>
)}

View File

@@ -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 (

View File

@@ -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

View File

@@ -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