[App Search] Update instances of EuiPanel/EuiPageContent to bordered …

…or filled panels (#96090) (#96104) * Add hasBorder to all EuiPageContent panels * EngineCreation: switch EuiPageBody to EuiPageContent + add hasBorder * Credentials: update EuiPanels w/ hasBorder * ApiCodeExample: switch to hasBorder * DataPanel: update to take & pass hasBorder prop * Analytics & EngineOverview: use hasBorder * Relevance Tuning: update EuiPanels - switch to hasBorder for top level panels - switch to color="subdued" for boost accordion - tweak padding of boost panel - CSS cleanup * Role Mappings: switch to hasBorder + remove unused class - `euiPanel--disabled` was not applying any styles + remove random 'export' string * Sample engine CTA: switch to subdued panel + fix sizing - when loading button pops in, it was causing text to overflow Co-authored-by: Constance <[email protected]>
elastic · Apr 2, 2021 · 6692fd8 · 6692fd8
1 parent 5443379
commit 6692fd8
Show file tree

Hide file tree

Showing 33 changed files with 131 additions and 129 deletions.
diff --git a/...enterprise_search/public/applications/app_search/components/analytics/views/analytics.tsx b/...enterprise_search/public/applications/app_search/components/analytics/views/analytics.tsx
@@ -83,8 +83,7 @@ export const Analytics: React.FC = () => {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={3}>
-          {/* TODO: Update this panel to use the bordered version once available */}
-          <EuiPanel hasShadow={false} color="transparent">
+          <EuiPanel hasBorder>
             <AnalyticsChart
               lines={[
                 {
@@ -196,6 +195,7 @@ export const Analytics: React.FC = () => {
       <EuiSpacer size="xl" />
 
       <DataPanel
+        hasBorder
         title={<h2>{RECENT_QUERIES}</h2>}
         subtitle={i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.analytics.recentQueriesDescription',

diff --git a/...erprise_search/public/applications/app_search/components/analytics/views/query_detail.tsx b/...erprise_search/public/applications/app_search/components/analytics/views/query_detail.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
@@ -56,17 +56,19 @@ export const QueryDetail: React.FC<Props> = ({ breadcrumbs }) => {
       />
       <EuiSpacer />
 
-      <AnalyticsChart
-        lines={[
-          {
-            id: i18n.translate(
-              'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetail.chartTooltip',
-              { defaultMessage: 'Queries per day' }
-            ),
-            data: convertToChartData({ startDate, data: queriesPerDayForQuery }),
-          },
-        ]}
-      />
+      <EuiPanel hasBorder>
+        <AnalyticsChart
+          lines={[
+            {
+              id: i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetail.chartTooltip',
+                { defaultMessage: 'Queries per day' }
+              ),
+              data: convertToChartData({ startDate, data: queriesPerDayForQuery }),
+            },
+          ]}
+        />
+      </EuiPanel>
       <EuiSpacer />
 
       <AnalyticsSection

diff --git a/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -57,7 +57,7 @@ export const Credentials: React.FC = () => {
       <EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
       <EuiPageContentBody>
         {shouldShowCredentialsForm && <CredentialsFlyout />}
-        <EuiPanel className="eui-textCenter">
+        <EuiPanel hasBorder className="eui-textCenter">
           <EuiTitle size="s">
             <h2>
               {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
@@ -116,7 +116,9 @@ export const Credentials: React.FC = () => {
         </EuiPageContentHeader>
         <EuiSpacer size="m" />
         <FlashMessages />
-        <EuiPanel>{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}</EuiPanel>
+        <EuiPanel hasBorder>
+          {!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
+        </EuiPanel>
       </EuiPageContentBody>
     </>
   );

diff --git a/...pp_search/components/credentials/credentials_flyout/form_components/key_engine_access.tsx b/...pp_search/components/credentials/credentials_flyout/form_components/key_engine_access.tsx
@@ -104,7 +104,7 @@ export const EngineSelection: React.FC = () => {
   return (
     <>
       <EuiSpacer size="s" />
-      <EuiPanel>
+      <EuiPanel hasBorder>
         <EuiTitle size="xs">
           <h4>
             {i18n.translate(

diff --git a/...earch/components/credentials/credentials_flyout/form_components/key_read_write_access.tsx b/...earch/components/credentials/credentials_flyout/form_components/key_read_write_access.tsx
@@ -22,7 +22,7 @@ export const FormKeyReadWriteAccess: React.FC = () => {
   return (
     <>
       <EuiSpacer size="s" />
-      <EuiPanel>
+      <EuiPanel hasBorder>
         <EuiTitle size="xs">
           <h3>
             {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.formReadWrite.label', {

diff --git a/...se_search/public/applications/app_search/components/curations/views/curation_creation.tsx b/...se_search/public/applications/app_search/components/curations/views/curation_creation.tsx
@@ -25,7 +25,7 @@ export const CurationCreation: React.FC = () => {
     <>
       <EuiPageHeader pageTitle={CREATE_NEW_CURATION_TITLE} />
       <FlashMessages />
-      <EuiPageContent>
+      <EuiPageContent hasBorder>
         <EuiTitle>
           <h2>
             {i18n.translate(

diff --git a/...enterprise_search/public/applications/app_search/components/curations/views/curations.tsx b/...enterprise_search/public/applications/app_search/components/curations/views/curations.tsx
@@ -54,7 +54,7 @@ export const Curations: React.FC = () => {
           </EuiButtonTo>,
         ]}
       />
-      <EuiPageContent>
+      <EuiPageContent hasBorder>
         <FlashMessages />
         <CurationsTable />
       </EuiPageContent>

diff --git a/...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx b/...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
@@ -94,6 +94,14 @@ describe('DataPanel', () => {
       expect(wrapper.find(LoadingOverlay)).toHaveLength(1);
     });
 
+    it('passes hasBorder', () => {
+      const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
+      expect(wrapper.prop('hasBorder')).toBeFalsy();
+
+      wrapper.setProps({ hasBorder: true });
+      expect(wrapper.prop('hasBorder')).toBeTruthy();
+    });
+
     it('passes class names', () => {
       const wrapper = shallow(<DataPanel title={<h1>Test</h1>} className="testing" />);
 

diff --git a/...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx b/...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
@@ -29,6 +29,7 @@ interface Props {
   iconType?: string;
   action?: React.ReactNode;
   filled?: boolean;
+  hasBorder?: boolean;
   isLoading?: boolean;
   className?: string;
 }
@@ -39,6 +40,7 @@ export const DataPanel: React.FC<Props> = ({
   iconType,
   action,
   filled,
+  hasBorder,
   isLoading,
   className,
   children,
@@ -52,6 +54,7 @@ export const DataPanel: React.FC<Props> = ({
     <EuiPanel
       {...props}
       color={filled ? 'subdued' : 'plain'}
+      hasBorder={hasBorder}
       className={classes}
       hasShadow={false}
       aria-busy={isLoading}

diff --git a/...ons/app_search/components/document_creation/creation_mode_components/api_code_example.tsx b/...ons/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
@@ -96,7 +96,7 @@ export const FlyoutBody: React.FC = () => {
         </p>
       </EuiText>
       <EuiSpacer />
-      <EuiPanel hasShadow={false} paddingSize="s" className="eui-textBreakAll">
+      <EuiPanel hasBorder paddingSize="s" className="eui-textBreakAll">
         <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
           <EuiFlexItem grow={false}>
             <EuiBadge color="primary">POST</EuiBadge>

diff --git a/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx b/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx
@@ -91,7 +91,7 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
           </EuiButton>,
         ]}
       />
-      <EuiPageContent>
+      <EuiPageContent hasBorder>
         <EuiPageContentBody>
           <FlashMessages />
           <EuiBasicTable columns={columns} items={fields} />

diff --git a/...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx b/...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
@@ -16,12 +16,11 @@ import {
   EuiFlexItem,
   EuiFieldText,
   EuiSelect,
-  EuiPageBody,
   EuiPageHeader,
+  EuiPageContent,
   EuiSpacer,
   EuiTitle,
   EuiButton,
-  EuiPanel,
 } from '@elastic/eui';
 
 import { FlashMessages } from '../../../shared/flash_messages';
@@ -48,75 +47,73 @@ export const EngineCreation: React.FC = () => {
     <div data-test-subj="EngineCreation">
       <SetPageChrome trail={[ENGINE_CREATION_TITLE]} />
       <EuiPageHeader pageTitle={ENGINE_CREATION_TITLE} />
-      <EuiPageBody>
-        <FlashMessages />
-        <EuiPanel>
-          <EuiForm>
-            <form
-              data-test-subj="EngineCreationForm"
-              onSubmit={(e) => {
-                e.preventDefault();
-                submitEngine();
-              }}
-            >
-              <EuiTitle>
-                <h2>{ENGINE_CREATION_FORM_TITLE}</h2>
-              </EuiTitle>
-              <EuiSpacer />
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <EuiFormRow
-                    data-test-subj="EngineCreationNameFormRow"
-                    label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
-                    helpText={
-                      name.length > 0 && rawName !== name ? (
-                        <>
-                          {SANITIZED_NAME_NOTE} <strong>{name}</strong>
-                        </>
-                      ) : (
-                        ALLOWED_CHARS_NOTE
-                      )
-                    }
+      <FlashMessages />
+      <EuiPageContent hasBorder>
+        <EuiForm>
+          <form
+            data-test-subj="EngineCreationForm"
+            onSubmit={(e) => {
+              e.preventDefault();
+              submitEngine();
+            }}
+          >
+            <EuiTitle>
+              <h2>{ENGINE_CREATION_FORM_TITLE}</h2>
+            </EuiTitle>
+            <EuiSpacer />
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiFormRow
+                  data-test-subj="EngineCreationNameFormRow"
+                  label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
+                  helpText={
+                    name.length > 0 && rawName !== name ? (
+                      <>
+                        {SANITIZED_NAME_NOTE} <strong>{name}</strong>
+                      </>
+                    ) : (
+                      ALLOWED_CHARS_NOTE
+                    )
+                  }
+                  fullWidth
+                >
+                  <EuiFieldText
+                    name="engine-name"
+                    value={rawName}
+                    onChange={(event) => setRawName(event.currentTarget.value)}
+                    autoComplete="off"
                     fullWidth
-                  >
-                    <EuiFieldText
-                      name="engine-name"
-                      value={rawName}
-                      onChange={(event) => setRawName(event.currentTarget.value)}
-                      autoComplete="off"
-                      fullWidth
-                      data-test-subj="EngineCreationNameInput"
-                      placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
-                      autoFocus
-                    />
-                  </EuiFormRow>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
-                    <EuiSelect
-                      name="engine-language"
-                      value={language}
-                      options={SUPPORTED_LANGUAGES}
-                      data-test-subj="EngineCreationLanguageInput"
-                      onChange={(event) => setLanguage(event.currentTarget.value)}
-                    />
-                  </EuiFormRow>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer />
-              <EuiButton
-                disabled={name.length === 0}
-                type="submit"
-                data-test-subj="NewEngineSubmitButton"
-                fill
-                color="secondary"
-              >
-                {ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
-              </EuiButton>
-            </form>
-          </EuiForm>
-        </EuiPanel>
-      </EuiPageBody>
+                    data-test-subj="EngineCreationNameInput"
+                    placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
+                    autoFocus
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
+                  <EuiSelect
+                    name="engine-language"
+                    value={language}
+                    options={SUPPORTED_LANGUAGES}
+                    data-test-subj="EngineCreationLanguageInput"
+                    onChange={(event) => setLanguage(event.currentTarget.value)}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer />
+            <EuiButton
+              disabled={name.length === 0}
+              type="submit"
+              data-test-subj="NewEngineSubmitButton"
+              fill
+              color="secondary"
+            >
+              {ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
+            </EuiButton>
+          </form>
+        </EuiForm>
+      </EuiPageContent>
     </div>
   );
 };
diff --git a/.../public/applications/app_search/components/engine_overview/components/recent_api_logs.tsx b/.../public/applications/app_search/components/engine_overview/components/recent_api_logs.tsx
@@ -34,6 +34,7 @@ export const RecentApiLogs: React.FC = () => {
           {VIEW_API_LOGS}
         </EuiButtonEmptyTo>
       }
+      hasBorder
     >
       TODO: API Logs Table
       {/* <ApiLogsTable hidePagination={true} /> */}

diff --git a/...rch/public/applications/app_search/components/engine_overview/components/total_charts.tsx b/...rch/public/applications/app_search/components/engine_overview/components/total_charts.tsx
@@ -40,6 +40,7 @@ export const TotalCharts: React.FC = () => {
               {VIEW_ANALYTICS}
             </EuiButtonEmptyTo>
           }
+          hasBorder
         >
           <AnalyticsChart
             lines={[
@@ -62,6 +63,7 @@ export const TotalCharts: React.FC = () => {
               {VIEW_API_LOGS}
             </EuiButtonEmptyTo>
           }
+          hasBorder
         >
           <AnalyticsChart
             lines={[

diff --git a/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx b/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
@@ -34,7 +34,7 @@ export const EmptyState: React.FC = () => {
     <>
       <SetPageChrome />
       <EnginesOverviewHeader />
-      <EuiPageContent className="emptyState">
+      <EuiPageContent hasBorder className="emptyState">
         {canManageEngines ? (
           <EuiEmptyPrompt
             data-test-subj="AdminEmptyEnginesPrompt"

diff --git a/...ise_search/public/applications/app_search/components/engines/components/loading_state.tsx b/...ise_search/public/applications/app_search/components/engines/components/loading_state.tsx
@@ -18,7 +18,7 @@ export const LoadingState: React.FC = () => {
     <>
       <SetPageChrome />
       <EnginesOverviewHeader />
-      <EuiPageContent paddingSize="l">
+      <EuiPageContent hasBorder paddingSize="l">
         <EuiLoadingContent lines={5} />
         <EuiSpacer size="xxl" />
         <EuiLoadingContent lines={4} />

diff --git a/.../enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx b/.../enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
@@ -84,7 +84,7 @@ export const EnginesOverview: React.FC = () => {
       <SendTelemetry action="viewed" metric="engines_overview" />
 
       <EnginesOverviewHeader />
-      <EuiPageContent panelPaddingSize="s" className="enginesOverview">
+      <EuiPageContent hasBorder panelPaddingSize="s" className="enginesOverview">
         <FlashMessages />
         <EuiPageContentHeader responsive={false}>
           <EuiPageContentHeaderSection>

diff --git a/...se_search/public/applications/app_search/components/error_connecting/error_connecting.tsx b/...se_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
@@ -19,7 +19,7 @@ export const ErrorConnecting: React.FC = () => {
       <SetPageChrome />
       <SendTelemetry action="error" metric="cannot_connect" />
 
-      <EuiPageContent>
+      <EuiPageContent hasBorder>
         <ErrorStatePrompt />
       </EuiPageContent>
     </>

diff --git a/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -86,7 +86,7 @@ export const Library: React.FC = () => {
     <>
       <SetPageChrome trail={['Library']} />
       <EuiPageHeader pageTitle="Library" />
-      <EuiPageContent>
+      <EuiPageContent hasBorder>
         <EuiPageContentBody>
           <EuiTitle size="m">
             <h2>Result</h2>