[Search] Fixes visual bugs on connector overview page (elastic#178011)

## Summary Fixes visual bugs in connector overview. Removes entrypoints to broken pages. https://github.com/elastic/kibana/assets/1410658/11d31258-a0c5-4575-abf6-9cf7ac70b5e1 ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
jaredburgettelastic · Mar 5, 2024 · ae27558 · ae27558
1 parent b4fd712
commit ae27558
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 40 deletions.
diff --git a/...cations/enterprise_search_content/components/connector_detail/connector_configuration.tsx b/...cations/enterprise_search_content/components/connector_detail/connector_configuration.tsx
@@ -281,7 +281,7 @@ export const ConnectorConfiguration: React.FC = () => {
                         </EuiText>
                       </EuiFlexItem>
                       <EuiFlexItem>
-                        <EuiFlexGroup>
+                        <EuiFlexGroup responsive={false}>
                           <EuiFlexItem grow={false}>
                             <EuiButtonTo
                               data-test-subj="entSearchContent-connector-configuration-setScheduleAndSync"

diff --git a/...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx b/...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx
@@ -227,6 +227,11 @@ export const ConnectorDetail: React.FC = () => {
       isLoading={isLoading}
       pageHeader={{
         pageTitle: connector ? <ConnectorNameAndDescription connector={connector} /> : '...',
+        rightSideGroupProps: {
+          gutterSize: 's',
+          responsive: false,
+          wrap: false,
+        },
         rightSideItems: getHeaderActions(index, hasAppSearchAccess),
         tabs,
       }}

diff --git a/...ic/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx b/...ic/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
@@ -45,9 +45,13 @@ export interface StatCardProps {
   title: string;
 }
 
+const noIndexText = i18n.translate('xpack.enterpriseSearch.connectors.connectorStats.noIndex', {
+  defaultMessage: 'No index related',
+});
+
 export const StatCard: React.FC<StatCardProps> = ({ title, content, footer }) => {
   return (
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder>
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder grow>
       <EuiSplitPanel.Inner>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexItem grow={false}>
@@ -108,7 +112,7 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                     <EuiIcon type="documents" />
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiText>
+                    <EuiText size="s">
                       <p>
                         {i18n.translate(
                           'xpack.enterpriseSearch.connectors.connectorStats.p.DocumentsLabel',
@@ -125,21 +129,27 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                 </EuiFlexGroup>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiLinkTo
-                  to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
-                    connectorId: connector.id,
-                    tabId: ConnectorDetailTabId.DOCUMENTS,
-                  })}
-                >
-                  <EuiText textAlign="right">
-                    {i18n.translate(
-                      'xpack.enterpriseSearch.connectors.connectorStats.seeDocumentsTextLabel',
-                      {
-                        defaultMessage: 'See documents',
-                      }
-                    )}
+                {connector.index_name ? (
+                  <EuiLinkTo
+                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
+                      connectorId: connector.id,
+                      tabId: ConnectorDetailTabId.DOCUMENTS,
+                    })}
+                  >
+                    <EuiText size="s" textAlign="right">
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.connectors.connectorStats.seeDocumentsTextLabel',
+                        {
+                          defaultMessage: 'See documents',
+                        }
+                      )}
+                    </EuiText>
+                  </EuiLinkTo>
+                ) : (
+                  <EuiText size="s" textAlign="right">
+                    {noIndexText}
                   </EuiText>
-                </EuiLinkTo>
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           }
@@ -159,21 +169,19 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                 </EuiFlexItem>
               </EuiFlexGroup>
             ) : (
-              i18n.translate('xpack.enterpriseSearch.connectors.connectorStats.noIndex', {
-                defaultMessage: 'No index related',
-              })
+              noIndexText
             )
           }
           footer={
-            <EuiFlexGroup>
-              <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
                 <EuiLinkTo
                   to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
                     connectorId: connector.id,
                     tabId: ConnectorDetailTabId.CONFIGURATION,
                   })}
                 >
-                  <EuiText textAlign="right">
+                  <EuiText textAlign="right" size="s">
                     {i18n.translate(
                       'xpack.enterpriseSearch.connectors.connectorStats.configureLink',
                       {
@@ -206,23 +214,29 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
             )
           }
           footer={
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiLinkTo
-                  to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
-                    connectorId: connector.id,
-                    tabId: ConnectorDetailTabId.PIPELINES,
-                  })}
-                >
-                  <EuiText textAlign="right">
-                    {i18n.translate(
-                      'xpack.enterpriseSearch.connectors.connectorStats.managePipelines',
-                      {
-                        defaultMessage: 'Manage pipelines',
-                      }
-                    )}
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                {connector.index_name ? (
+                  <EuiLinkTo
+                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
+                      connectorId: connector.id,
+                      tabId: ConnectorDetailTabId.PIPELINES,
+                    })}
+                  >
+                    <EuiText textAlign="right" size="s">
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.connectors.connectorStats.managePipelines',
+                        {
+                          defaultMessage: 'Manage pipelines',
+                        }
+                      )}
+                    </EuiText>
+                  </EuiLinkTo>
+                ) : (
+                  <EuiText textAlign="right" size="s">
+                    {noIndexText}
                   </EuiText>
-                </EuiLinkTo>
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           }

diff --git a/.../enterprise_search_content/components/connector_detail/native_connector_configuration.tsx b/.../enterprise_search_content/components/connector_detail/native_connector_configuration.tsx
@@ -195,7 +195,7 @@ export const NativeConnectorConfiguration: React.FC = () => {
                         </EuiText>
                       </EuiFlexItem>
                       <EuiFlexItem>
-                        <EuiFlexGroup>
+                        <EuiFlexGroup responsive={false}>
                           <EuiFlexItem grow={false}>
                             <EuiButtonTo
                               to={`${generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {

diff --git a/...search/public/applications/enterprise_search_content/components/connectors/connectors.tsx b/...search/public/applications/enterprise_search_content/components/connectors/connectors.tsx
@@ -87,6 +87,7 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
               }),
           rightSideGroupProps: {
             gutterSize: 's',
+            responsive: false,
           },
           rightSideItems: isLoading
             ? []

diff --git a/...ch/public/applications/enterprise_search_content/components/search_index/search_index.tsx b/...ch/public/applications/enterprise_search_content/components/search_index/search_index.tsx
@@ -229,6 +229,9 @@ export const SearchIndex: React.FC = () => {
       isLoading={isInitialLoading}
       pageHeader={{
         pageTitle: indexName,
+        rightSideGroupProps: {
+          responsive: false,
+        },
         rightSideItems: getHeaderActions(index, hasAppSearchAccess),
       }}
     >