Fix Listing Page Layout Inconsistencies (#103182)

* Added dashboard no items message to dashboard_strings, wrote new message for read only empty state. Moved visualize library dashboard callout under title
2025-04-23 17:28:26 -04:00 · 2021-06-29 15:46:18 -04:00 · 2021-06-29 15:46:18 -04:00 · a5660fe82c
commit a5660fe82c
parent e8584e533b
7 changed files with 125 additions and 215 deletions
--- a/src/plugins/dashboard/public/application/listing/snapshots/dashboard_listing.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/listing/snapshots/dashboard_listing.test.tsx.snap
@ -34,21 +34,13 @@ exports[`after fetch When given a title that matches multiple dashboards, filter
            iconType="plusInCircle"
            onClick={[Function]}
          >
-            <FormattedMessage
-              defaultMessage="Create new dashboard"
-              id="dashboard.listing.createNewDashboard.createButtonLabel"
-              values={Object {}}
-            />
+            Create new dashboard
          </EuiButton>
        }
        body={
          <React.Fragment>
            <p>
-              <FormattedMessage
-                defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-                id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-                values={Object {}}
-              />
+              You can combine data views from any Kibana app into one dashboard and see everything in one place.
            </p>
            <p>
              <FormattedMessage
@ -59,11 +51,7 @@ exports[`after fetch When given a title that matches multiple dashboards, filter
                    "sampleDataInstallLink": <EuiLink
                      onClick={[Function]}
                    >
-                      <FormattedMessage
-                        defaultMessage="Install some sample data"
-                        id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                        values={Object {}}
-                      />
+                      Install some sample data
                    </EuiLink>,
                  }
                }
@ -76,11 +64,7 @@ exports[`after fetch When given a title that matches multiple dashboards, filter
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Create your first dashboard"
-              id="dashboard.listing.createNewDashboard.title"
-              values={Object {}}
-            />
+            Create your first dashboard
          </h1>
        }
      />
@ -151,16 +135,17 @@ exports[`after fetch hideWriteControls 1`] = `
  <TableListView
    emptyPrompt={
      <EuiEmptyPrompt
-        iconType="dashboardApp"
+        body={
+          <p>
+            There are no available dashboards. To change your permissions to view the dashboards in this space, contact your administrator.
+          </p>
+        }
+        iconType="glasses"
        title={
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Looks like you don't have any dashboards."
-              id="dashboard.listing.noItemsMessage"
-              values={Object {}}
-            />
+            No dashboards to view
          </h1>
        }
      />
@ -242,21 +227,13 @@ exports[`after fetch initialFilter 1`] = `
            iconType="plusInCircle"
            onClick={[Function]}
          >
-            <FormattedMessage
-              defaultMessage="Create new dashboard"
-              id="dashboard.listing.createNewDashboard.createButtonLabel"
-              values={Object {}}
-            />
+            Create new dashboard
          </EuiButton>
        }
        body={
          <React.Fragment>
            <p>
-              <FormattedMessage
-                defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-                id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-                values={Object {}}
-              />
+              You can combine data views from any Kibana app into one dashboard and see everything in one place.
            </p>
            <p>
              <FormattedMessage
@ -267,11 +244,7 @@ exports[`after fetch initialFilter 1`] = `
                    "sampleDataInstallLink": <EuiLink
                      onClick={[Function]}
                    >
-                      <FormattedMessage
-                        defaultMessage="Install some sample data"
-                        id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                        values={Object {}}
-                      />
+                      Install some sample data
                    </EuiLink>,
                  }
                }
@ -284,11 +257,7 @@ exports[`after fetch initialFilter 1`] = `
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Create your first dashboard"
-              id="dashboard.listing.createNewDashboard.title"
-              values={Object {}}
-            />
+            Create your first dashboard
          </h1>
        }
      />
@ -369,21 +338,13 @@ exports[`after fetch renders all table rows 1`] = `
            iconType="plusInCircle"
            onClick={[Function]}
          >
-            <FormattedMessage
-              defaultMessage="Create new dashboard"
-              id="dashboard.listing.createNewDashboard.createButtonLabel"
-              values={Object {}}
-            />
+            Create new dashboard
          </EuiButton>
        }
        body={
          <React.Fragment>
            <p>
-              <FormattedMessage
-                defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-                id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-                values={Object {}}
-              />
+              You can combine data views from any Kibana app into one dashboard and see everything in one place.
            </p>
            <p>
              <FormattedMessage
@ -394,11 +355,7 @@ exports[`after fetch renders all table rows 1`] = `
                    "sampleDataInstallLink": <EuiLink
                      onClick={[Function]}
                    >
-                      <FormattedMessage
-                        defaultMessage="Install some sample data"
-                        id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                        values={Object {}}
-                      />
+                      Install some sample data
                    </EuiLink>,
                  }
                }
@ -411,11 +368,7 @@ exports[`after fetch renders all table rows 1`] = `
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Create your first dashboard"
-              id="dashboard.listing.createNewDashboard.title"
-              values={Object {}}
-            />
+            Create your first dashboard
          </h1>
        }
      />
@ -496,21 +449,13 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
            iconType="plusInCircle"
            onClick={[Function]}
          >
-            <FormattedMessage
-              defaultMessage="Create new dashboard"
-              id="dashboard.listing.createNewDashboard.createButtonLabel"
-              values={Object {}}
-            />
+            Create new dashboard
          </EuiButton>
        }
        body={
          <React.Fragment>
            <p>
-              <FormattedMessage
-                defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-                id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-                values={Object {}}
-              />
+              You can combine data views from any Kibana app into one dashboard and see everything in one place.
            </p>
            <p>
              <FormattedMessage
@ -521,11 +466,7 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
                    "sampleDataInstallLink": <EuiLink
                      onClick={[Function]}
                    >
-                      <FormattedMessage
-                        defaultMessage="Install some sample data"
-                        id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                        values={Object {}}
-                      />
+                      Install some sample data
                    </EuiLink>,
                  }
                }
@ -538,11 +479,7 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Create your first dashboard"
-              id="dashboard.listing.createNewDashboard.title"
-              values={Object {}}
-            />
+            Create your first dashboard
          </h1>
        }
      />
@ -623,21 +560,13 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
            iconType="plusInCircle"
            onClick={[Function]}
          >
-            <FormattedMessage
-              defaultMessage="Create new dashboard"
-              id="dashboard.listing.createNewDashboard.createButtonLabel"
-              values={Object {}}
-            />
+            Create new dashboard
          </EuiButton>
        }
        body={
          <React.Fragment>
            <p>
-              <FormattedMessage
-                defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-                id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-                values={Object {}}
-              />
+              You can combine data views from any Kibana app into one dashboard and see everything in one place.
            </p>
            <p>
              <FormattedMessage
@ -648,11 +577,7 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
                    "sampleDataInstallLink": <EuiLink
                      onClick={[Function]}
                    >
-                      <FormattedMessage
-                        defaultMessage="Install some sample data"
-                        id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                        values={Object {}}
-                      />
+                      Install some sample data
                    </EuiLink>,
                  }
                }
@ -665,11 +590,7 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
          <h1
            id="dashboardListingHeading"
          >
-            <FormattedMessage
-              defaultMessage="Create your first dashboard"
-              id="dashboard.listing.createNewDashboard.title"
-              values={Object {}}
-            />
+            Create your first dashboard
          </h1>
        }
      />
--- a/src/plugins/dashboard/public/application/listing/dashboard_listing.tsx
+++ b/src/plugins/dashboard/public/application/listing/dashboard_listing.tsx
@ -8,10 +8,14 @@

 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { attemptLoadDashboardByTitle } from '../lib';
 import { DashboardAppServices, DashboardRedirect } from '../../types';
-import { getDashboardBreadcrumb, dashboardListingTable } from '../../dashboard_strings';
+import {
+  getDashboardBreadcrumb,
+  dashboardListingTable,
+  noItemsStrings,
+} from '../../dashboard_strings';
 import { ApplicationStart, SavedObjectsFindOptionsReference } from '../../../../../core/public';
 import { syncQueryStateWithUrl } from '../../services/data';
 import { IKbnUrlStateStorage } from '../../services/kibana_utils';
@ -247,15 +251,9 @@ const getNoItemsMessage = (
  if (hideWriteControls) {
    return (
      <EuiEmptyPrompt
-        iconType="dashboardApp"
-        title={
-          <h1 id="dashboardListingHeading">
-            <FormattedMessage
-              id="dashboard.listing.noItemsMessage"
-              defaultMessage="Looks like you don't have any dashboards."
-            />
-          </h1>
-        }
+        iconType="glasses"
+        title={<h1 id="dashboardListingHeading">{noItemsStrings.getReadonlyTitle()}</h1>}
+        body={<p>{noItemsStrings.getReadonlyBody()}</p>}
      />
    );
  }
@ -263,22 +261,10 @@ const getNoItemsMessage = (
  return (
    <EuiEmptyPrompt
      iconType="dashboardApp"
-      title={
-        <h1 id="dashboardListingHeading">
-          <FormattedMessage
-            id="dashboard.listing.createNewDashboard.title"
-            defaultMessage="Create your first dashboard"
-          />
-        </h1>
-      }
+      title={<h1 id="dashboardListingHeading">{noItemsStrings.getReadEditTitle()}</h1>}
      body={
-        <Fragment>
-          <p>
-            <FormattedMessage
-              id="dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription"
-              defaultMessage="You can combine data views from any Kibana app into one dashboard and see everything in one place."
-            />
-          </p>
+        <>
+          <p>{noItemsStrings.getReadEditDashboardDescription()}</p>
          <p>
            <FormattedMessage
              id="dashboard.listing.createNewDashboard.newToKibanaDescription"
@ -292,16 +278,13 @@ const getNoItemsMessage = (
                      })
                    }
                  >
-                    <FormattedMessage
-                      id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
-                      defaultMessage="Install some sample data"
-                    />
+                    {noItemsStrings.getSampleDataLinkText()}
                  </EuiLink>
                ),
              }}
            />
          </p>
-        </Fragment>
+        </>
      }
      actions={
        <EuiButton
@ -310,10 +293,7 @@ const getNoItemsMessage = (
          iconType="plusInCircle"
          data-test-subj="createDashboardPromptButton"
        >
-          <FormattedMessage
-            id="dashboard.listing.createNewDashboard.createButtonLabel"
-            defaultMessage="Create new dashboard"
-          />
+          {noItemsStrings.getCreateNewDashboardText()}
        </EuiButton>
      }
    />
--- a/src/plugins/dashboard/public/dashboard_strings.ts
+++ b/src/plugins/dashboard/public/dashboard_strings.ts
@ -455,3 +455,31 @@ export const getCreateVisualizationButtonTitle = () =>
  i18n.translate('dashboard.solutionToolbar.addPanelButtonLabel', {
    defaultMessage: 'Create visualization',
  });
+
+export const noItemsStrings = {
+  getReadonlyTitle: () =>
+    i18n.translate('dashboard.listing.readonlyNoItemsTitle', {
+      defaultMessage: 'No dashboards to view',
+    }),
+  getReadonlyBody: () =>
+    i18n.translate('dashboard.listing.readonlyNoItemsBody', {
+      defaultMessage: `There are no available dashboards. To change your permissions to view the dashboards in this space, contact your administrator.`,
+    }),
+  getReadEditTitle: () =>
+    i18n.translate('dashboard.listing.createNewDashboard.title', {
+      defaultMessage: 'Create your first dashboard',
+    }),
+  getReadEditDashboardDescription: () =>
+    i18n.translate('dashboard.listing.createNewDashboard.combineDataViewFromKibanaAppDescription', {
+      defaultMessage:
+        'You can combine data views from any Kibana app into one dashboard and see everything in one place.',
+    }),
+  getSampleDataLinkText: () =>
+    i18n.translate('dashboard.listing.createNewDashboard.sampleDataInstallLinkText', {
+      defaultMessage: `Install some sample data`,
+    }),
+  getCreateNewDashboardText: () =>
+    i18n.translate('dashboard.listing.createNewDashboard.createButtonLabel', {
+      defaultMessage: `Create new dashboard`,
+    }),
+};
--- a/src/plugins/visualize/public/application/components/visualize_listing.scss
+++ b/src/plugins/visualize/public/application/components/visualize_listing.scss
@ -20,21 +20,6 @@
  text-align: left;
 }

-.visListingCallout {
-  @include kbnThemeStyle('v7') {
-    max-width: 1000px;
-  }
-  @include kbnThemeStyle('v8') {
-    max-width: 1200px;
-  }
-  width: 100%;
-
-  margin-left: auto;
-  margin-right: auto;
-
-  padding: $euiSize $euiSize 0 $euiSize;
-}
-
 .visListingCallout__link {
  text-decoration: underline;
 }
--- a/src/plugins/visualize/public/application/components/visualize_listing.tsx
+++ b/src/plugins/visualize/public/application/components/visualize_listing.tsx
@ -9,7 +9,7 @@
 import './visualize_listing.scss';

 import React, { useCallback, useRef, useMemo, useEffect, MouseEvent } from 'react';
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import useUnmount from 'react-use/lib/useUnmount';
@ -147,68 +147,66 @@ export const VisualizeListing = () => {
  }, [savedObjectsTagging]);

  const calloutMessage = (
-    <>
-      <FormattedMessage
-        data-test-subj="visualize-dashboard-flow-prompt"
-        id="visualize.visualizeListingDashboardFlowDescription"
-        defaultMessage="Building a dashboard? Create content directly from the {dashboardApp} using a new integrated workflow."
-        values={{
-          dashboardApp: (
-            <EuiLink
-              className="visListingCallout__link"
-              onClick={(event: MouseEvent) => {
-                event.preventDefault();
-                application.navigateToUrl(application.getUrlForApp('dashboards'));
-              }}
-            >
-              <FormattedMessage
-                id="visualize.visualizeListingDashboardAppName"
-                defaultMessage="Dashboard application"
-              />
-            </EuiLink>
-          ),
-        }}
-      />
-    </>
+    <FormattedMessage
+      data-test-subj="visualize-dashboard-flow-prompt"
+      id="visualize.visualizeListingDashboardFlowDescription"
+      defaultMessage="Building a dashboard? Create and add your visualizations right from the {dashboardApp}."
+      values={{
+        dashboardApp: (
+          <EuiLink
+            className="visListingCallout__link"
+            onClick={(event: MouseEvent) => {
+              event.preventDefault();
+              application.navigateToUrl(application.getUrlForApp('dashboards'));
+            }}
+          >
+            <FormattedMessage
+              id="visualize.visualizeListingDashboardAppName"
+              defaultMessage="Dashboard application"
+            />
+          </EuiLink>
+        ),
+      }}
+    />
  );

  return (
-    <>
+    <TableListView
+      headingId="visualizeListingHeading"
+      // we allow users to create visualizations even if they can't save them
+      // for data exploration purposes
+      createItem={createNewVis}
+      tableCaption={i18n.translate('visualize.listing.table.listTitle', {
+        defaultMessage: 'Visualize Library',
+      })}
+      findItems={fetchItems}
+      deleteItems={visualizeCapabilities.delete ? deleteItems : undefined}
+      editItem={visualizeCapabilities.save ? editItem : undefined}
+      tableColumns={tableColumns}
+      listingLimit={listingLimit}
+      initialPageSize={savedObjectsPublic.settings.getPerPage()}
+      initialFilter={''}
+      rowHeader="title"
+      emptyPrompt={noItemsFragment}
+      entityName={i18n.translate('visualize.listing.table.entityName', {
+        defaultMessage: 'visualization',
+      })}
+      entityNamePlural={i18n.translate('visualize.listing.table.entityNamePlural', {
+        defaultMessage: 'visualizations',
+      })}
+      tableListTitle={i18n.translate('visualize.listing.table.listTitle', {
+        defaultMessage: 'Visualize Library',
+      })}
+      toastNotifications={toastNotifications}
+      searchFilters={searchFilters}
+    >
      {dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
        dashboardCapabilities.createNew && (
-          <div className="visListingCallout">
+          <>
            <EuiCallOut size="s" title={calloutMessage} iconType="iInCircle" />
-          </div>
+            <EuiSpacer size="m" />
+          </>
        )}
-      <TableListView
-        headingId="visualizeListingHeading"
-        // we allow users to create visualizations even if they can't save them
-        // for data exploration purposes
-        createItem={createNewVis}
-        tableCaption={i18n.translate('visualize.listing.table.listTitle', {
-          defaultMessage: 'Visualize Library',
-        })}
-        findItems={fetchItems}
-        deleteItems={visualizeCapabilities.delete ? deleteItems : undefined}
-        editItem={visualizeCapabilities.save ? editItem : undefined}
-        tableColumns={tableColumns}
-        listingLimit={listingLimit}
-        initialPageSize={savedObjectsPublic.settings.getPerPage()}
-        initialFilter={''}
-        rowHeader="title"
-        emptyPrompt={noItemsFragment}
-        entityName={i18n.translate('visualize.listing.table.entityName', {
-          defaultMessage: 'visualization',
-        })}
-        entityNamePlural={i18n.translate('visualize.listing.table.entityNamePlural', {
-          defaultMessage: 'visualizations',
-        })}
-        tableListTitle={i18n.translate('visualize.listing.table.listTitle', {
-          defaultMessage: 'Visualize Library',
-        })}
-        toastNotifications={toastNotifications}
-        searchFilters={searchFilters}
-      />
-    </>
+    </TableListView>
  );
 };
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -623,7 +623,6 @@
    "dashboard.listing.createNewDashboard.newToKibanaDescription": "Kibanaは初心者ですか？{sampleDataInstallLink}してお試しください。",
    "dashboard.listing.createNewDashboard.sampleDataInstallLinkText": "サンプルデータをインストール",
    "dashboard.listing.createNewDashboard.title": "初めてのダッシュボードを作成してみましょう。",
-    "dashboard.listing.noItemsMessage": "ダッシュボードがないようです。",
    "dashboard.listing.table.descriptionColumnName": "説明",
    "dashboard.listing.table.entityName": "ダッシュボード",
    "dashboard.listing.table.entityNamePlural": "ダッシュボード",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -626,7 +626,6 @@
    "dashboard.listing.createNewDashboard.newToKibanaDescription": "Kibana 新手？{sampleDataInstallLink}来试用一下。",
    "dashboard.listing.createNewDashboard.sampleDataInstallLinkText": "安装一些样例数据",
    "dashboard.listing.createNewDashboard.title": "创建您的首个仪表板",
-    "dashboard.listing.noItemsMessage": "似乎您没有任何仪表板。",
    "dashboard.listing.table.descriptionColumnName": "描述",
    "dashboard.listing.table.entityName": "仪表板",
    "dashboard.listing.table.entityNamePlural": "仪表板",