From d53d8ff99d55a318dddc1d85b9576f79b58bec39 Mon Sep 17 00:00:00 2001
From: Yibo Wang <109543558+yibow98@users.noreply.github.com>
Date: Thu, 20 Oct 2022 13:25:24 -0700
Subject: [PATCH] [MD]Address comments from UX signoff meeting-Datasource list
 and create page (#2625)

Signed-off-by: Yibo Wang <yibow@amazon.com>
(cherry picked from commit fb4bdfa7bfd10878481814862fc794debeac272e)
Signed-off-by: Su <szhongna@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../create_button/create_button.test.tsx      |  3 +-
 .../create_button/create_button.tsx           |  8 ++--
 .../create_data_source_wizard.test.tsx.snap   | 22 +++++++--
 .../create_data_source_form.test.tsx.snap     | 44 ++++++++++++++----
 .../create_form/create_data_source_form.tsx   |  3 +-
 .../create_data_source_wizard.tsx             |  2 +-
 .../data_source_table.test.tsx.snap           | 46 ++++++++++---------
 .../data_source_table/data_source_table.tsx   | 16 +++++--
 .../experimental_callout.tsx                  |  4 +-
 10 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0823c12d8b..16cdbb98ec9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Add data source config to opensearch-dashboards-docker ([#2557](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2557))
 * [Multi DataSource] Make text content dynamically translated & update unit tests ([#2570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2570))
 * [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files))
+* [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
index 64906045b00..f54aef129df 100644
--- a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
+++ b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
@@ -13,10 +13,11 @@ const createButtonIdentifier = `[data-test-subj="createDataSourceButton"]`;
 
 describe('CreateButton', () => {
   const history = (scopedHistoryMock.create() as unknown) as ScopedHistory;
+  const dataTestSubj = 'createDataSourceButton';
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   beforeEach(() => {
-    component = shallow(<CreateButton history={history} />);
+    component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />);
   });
 
   it('should render normally', () => {
diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.tsx
index 072eb8af602..7c893af0209 100644
--- a/src/plugins/data_source_management/public/components/create_button/create_button.tsx
+++ b/src/plugins/data_source_management/public/components/create_button/create_button.tsx
@@ -11,13 +11,15 @@ import { FormattedMessage } from '@osd/i18n/react';
 
 interface Props {
   history: History;
+  isEmptyState?: boolean;
+  dataTestSubj: string;
 }
 
-export const CreateButton = ({ history }: Props) => {
+export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => {
   return (
     <EuiButton
-      data-test-subj="createDataSourceButton"
-      fill={true}
+      data-test-subj={dataTestSubj}
+      fill={isEmptyState ? false : true}
       onClick={() => history.push('/create')}
     >
       <FormattedMessage
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
index a7c32d540d2..b4331e26f79 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
@@ -112,6 +112,13 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                 </div>
               </EuiFlexGroup>
             </Header>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
             <EuiForm
               data-test-subj="data-source-creation"
             >
@@ -401,7 +408,7 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        placeholder="Sample URL: https://connectionurl.com"
+                        placeholder="https://connectionurl.com"
                         value=""
                       >
                         <EuiFormControlLayout
@@ -425,7 +432,7 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onFocus={[Function]}
-                                  placeholder="Sample URL: https://connectionurl.com"
+                                  placeholder="https://connectionurl.com"
                                   type="text"
                                   value=""
                                 />
@@ -1079,6 +1086,13 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                 </div>
               </EuiFlexGroup>
             </Header>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
             <EuiForm
               data-test-subj="data-source-creation"
             >
@@ -1368,7 +1382,7 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        placeholder="Sample URL: https://connectionurl.com"
+                        placeholder="https://connectionurl.com"
                         value=""
                       >
                         <EuiFormControlLayout
@@ -1392,7 +1406,7 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onFocus={[Function]}
-                                  placeholder="Sample URL: https://connectionurl.com"
+                                  placeholder="https://connectionurl.com"
                                   type="text"
                                   value=""
                                 />
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
index 1006968b632..fcd197cc082 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
@@ -140,6 +140,13 @@ exports[`Datasource Management: Create Datasource form should create data source
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -429,7 +436,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -453,7 +460,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
@@ -867,6 +874,13 @@ exports[`Datasource Management: Create Datasource form should create data source
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -1156,7 +1170,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -1180,7 +1194,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
@@ -1792,6 +1806,13 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -2081,7 +2102,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value=""
                     >
                       <EuiFormControlLayout
@@ -2105,7 +2126,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value=""
                               />
@@ -2717,6 +2738,13 @@ exports[`Datasource Management: Create Datasource form should throw validation e
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -3023,7 +3051,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -3047,7 +3075,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index e5d779296a5..429790231a5 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -287,6 +287,7 @@ export class CreateDataSourceForm extends React.Component<
     return (
       <EuiPageContent>
         {this.renderHeader()}
+        <EuiSpacer size="m" />
         <EuiForm data-test-subj="data-source-creation">
           {/* Endpoint section */}
           {this.renderSectionHeader(
@@ -354,7 +355,7 @@ export class CreateDataSourceForm extends React.Component<
               placeholder={i18n.translate(
                 'dataSourcesManagement.createDataSource.endpointPlaceholder',
                 {
-                  defaultMessage: 'Sample URL: https://connectionurl.com',
+                  defaultMessage: 'https://connectionurl.com',
                 }
               )}
               isInvalid={!!this.state.formErrorsByField.endpoint.length}
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
index aaa50435d5e..08ac198c756 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
@@ -75,7 +75,7 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
   };
 
   const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(i18n.translate(id, { defaultMessage }));
+    toasts.addDanger(i18n.translate(id, { defaultMessage }));
   };
 
   /* Render the creation wizard */
diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
index abd6fc95c88..53e2fac3713 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
@@ -108,6 +108,7 @@ exports[`DataSourceTable should get datasources failed should render empty table
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <CreateButton
+                    dataTestSubj="createDataSourceButton"
                     history={
                       Object {
                         "action": "PUSH",
@@ -245,6 +246,7 @@ exports[`DataSourceTable should get datasources failed should render empty table
                 />
               </EuiSpacer>
               <CreateButton
+                dataTestSubj="createDataSourceButtonEmptyState"
                 history={
                   Object {
                     "action": "PUSH",
@@ -267,25 +269,26 @@ exports[`DataSourceTable should get datasources failed should render empty table
                     "replace": [MockFunction],
                   }
                 }
+                isEmptyState={true}
               >
                 <EuiButton
-                  data-test-subj="createDataSourceButton"
-                  fill={true}
+                  data-test-subj="createDataSourceButtonEmptyState"
+                  fill={false}
                   onClick={[Function]}
                 >
                   <EuiButtonDisplay
                     baseClassName="euiButton"
-                    data-test-subj="createDataSourceButton"
+                    data-test-subj="createDataSourceButtonEmptyState"
                     disabled={false}
                     element="button"
-                    fill={true}
+                    fill={false}
                     isDisabled={false}
                     onClick={[Function]}
                     type="button"
                   >
                     <button
-                      className="euiButton euiButton--primary euiButton--fill"
-                      data-test-subj="createDataSourceButton"
+                      className="euiButton euiButton--primary"
+                      data-test-subj="createDataSourceButtonEmptyState"
                       disabled={false}
                       onClick={[Function]}
                       style={
@@ -527,6 +530,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <CreateButton
+                    dataTestSubj="createDataSourceButton"
                     history={
                       Object {
                         "action": "PUSH",
@@ -701,7 +705,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                 Object {
                   "dataType": "string",
                   "field": "title",
-                  "name": "Datasource",
+                  "name": "Title",
                   "render": [Function],
                   "sortable": [Function],
                 },
@@ -1021,7 +1025,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                     Object {
                       "dataType": "string",
                       "field": "title",
-                      "name": "Datasource",
+                      "name": "Title",
                       "render": [Function],
                       "sortable": [Function],
                     },
@@ -1095,7 +1099,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                     "allowNeutralSort": false,
                     "sort": Object {
                       "direction": "asc",
-                      "field": "Datasource",
+                      "field": "Title",
                     },
                   }
                 }
@@ -1176,7 +1180,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                         "isSortAscending": true,
                                         "isSorted": true,
                                         "key": "_data_s_title_0",
-                                        "name": "Datasource",
+                                        "name": "Title",
                                         "onSort": [Function],
                                       },
                                       Object {
@@ -1404,15 +1408,15 @@ exports[`DataSourceTable should get datasources successful should render normall
                                             values={
                                               Object {
                                                 "description": undefined,
-                                                "innerText": "Datasource",
+                                                "innerText": "Title",
                                               }
                                             }
                                           >
                                             <span
                                               className="euiTableCellContent__text"
-                                              title="Datasource"
+                                              title="Title"
                                             >
-                                              Datasource
+                                              Title
                                             </span>
                                           </EuiI18n>
                                         </EuiInnerText>
@@ -1562,7 +1566,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_alpha-test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1580,7 +1584,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -1715,7 +1719,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_beta-test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1733,7 +1737,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -1868,7 +1872,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1886,7 +1890,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -2021,7 +2025,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_test2_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -2039,7 +2043,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
index 15faf57f57a..bbb2ce5f410 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
@@ -132,7 +132,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   const columns = [
     {
       field: 'title',
-      name: 'Datasource',
+      name: 'Title',
       render: (
         name: string,
         index: {
@@ -184,6 +184,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
         confirmButtonText={i18n.translate('dataSourcesManagement.dataSourcesTable.delete', {
           defaultMessage: 'Delete',
         })}
+        buttonColor="danger"
         defaultFocusedButton="confirm"
       >
         <p>
@@ -249,7 +250,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   /* Toast Handlers */
 
   const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(
+    toasts.addDanger(
       i18n.translate(id, {
         defaultMessage,
       })
@@ -258,7 +259,14 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
 
   /* Render Ui elements*/
   /* Create Data Source button */
-  const createButton = <CreateButton history={history} />;
+  const createButton = <CreateButton history={history} dataTestSubj="createDataSourceButton" />;
+  const createButtonEmptyState = (
+    <CreateButton
+      history={history}
+      isEmptyState={true}
+      dataTestSubj="createDataSourceButtonEmptyState"
+    />
+  );
 
   /* Render header*/
   const renderHeader = () => {
@@ -332,7 +340,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
             }
           </EuiText>
           <EuiSpacer />
-          {createButton}
+          {createButtonEmptyState}
         </EuiPanel>
         <EuiSpacer size="l" />
       </>
diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
index 611e410e373..23f0d45a320 100644
--- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
+++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
@@ -23,7 +23,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) =
           {
             <FormattedMessage
               id="dataSourcesManagement.experimentalFeatureCallout.description"
-              defaultMessage="The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see "
+              defaultMessage="This feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see "
             />
           }
           <EuiLink href={docLinks.links.noDocumentation.indexPatterns.introduction} target="_blank">
@@ -44,7 +44,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) =
             {
               <FormattedMessage
                 id="dataSourcesManagement.experimentalFeatureCallout.openForumText"
-                defaultMessage="OpenSearch Forum"
+                defaultMessage="forum.opensearch.org"
               />
             }
           </EuiLink>