[Workplace Search] Polish Workplace Search Sources & Groups UI (#85071)

* Add spacer to sources page title * Add space to source list description * Remove sidebar content from headers * Polish inner source overview content * Polish source content loading state and view * Hide sources header / remove spacers * Formatting fix * Fix lint issues * Add align right to schema table * Remove rendom EmptyPrompt WTF * Make SourceIcon take a variable size * Add back SourceInfoCard with update design Co-authored-by: scottybollinger <scotty.bollinger@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 8, 2020 · 30611f4 · 30611f4
1 parent 516d886
commit 30611f4
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 206 deletions.
diff --git a/...ic/applications/workplace_search/components/shared/component_loader/component_loader.scss b/...ic/applications/workplace_search/components/shared/component_loader/component_loader.scss
@@ -11,7 +11,6 @@
   align-items: center;
   min-height: 200px;
   border-radius: 4px;
-  background-color: #FAFBFD;
 
   .componentLoaderText {
     margin-left: 10px;

diff --git a/...search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx b/...search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { camelCase } from 'lodash';
 
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, IconSize } from '@elastic/eui';
 
 import './source_icon.scss';
 
@@ -21,6 +21,7 @@ interface SourceIconProps {
   className?: string;
   wrapped?: boolean;
   fullBleed?: boolean;
+  size?: IconSize;
 }
 
 export const SourceIcon: React.FC<SourceIconProps> = ({
@@ -29,13 +30,14 @@ export const SourceIcon: React.FC<SourceIconProps> = ({
   className,
   wrapped,
   fullBleed = false,
+  size = 'xxl',
 }) => {
   const icon = (
     <EuiIcon
       type={fullBleed ? imagesFull[camelCase(serviceType)] : images[camelCase(serviceType)]}
       title={name}
       className={className}
-      size="xxl"
+      size={size}
     />
   );
   return wrapped ? (

diff --git a/...plications/workplace_search/components/shared/view_content_header/view_content_header.tsx b/...plications/workplace_search/components/shared/view_content_header/view_content_header.tsx
@@ -44,6 +44,7 @@ export const ViewContentHeader: React.FC<ViewContentHeaderProps> = ({
       <EuiFlexGroup alignItems={alignItems} justifyContent="spaceBetween">
         <EuiFlexItem>
           <EuiTitle size={titleSize}>{titleElement}</EuiTitle>
+          <EuiSpacer size="s" />
           {description && (
             <EuiText grow={false} color="subdued">
               <p>{description}</p>

diff --git a/.../applications/workplace_search/views/content_sources/components/add_source/add_source.tsx b/.../applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
@@ -12,11 +12,10 @@ import { useHistory } from 'react-router-dom';
 
 import { AppLogic } from '../../../../app_logic';
 import { Loading } from '../../../../../../applications/shared/loading';
-import { ViewContentHeader } from '../../../../components/shared/view_content_header';
 import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
 import { staticSourceData } from '../../source_data';
 import { SourceLogic } from '../../source_logic';
-import { SourceDataItem, FeatureIds } from '../../../../types';
+import { SourceDataItem } from '../../../../types';
 import { SOURCE_ADDED_PATH, getSourcesPath } from '../../../../routes';
 
 import { AddSourceHeader } from './add_source_header';
@@ -90,7 +89,6 @@ export const AddSource: React.FC<AddSourceProps> = ({
   }, []);
 
   const isCustom = serviceType === CUSTOM_SERVICE_TYPE;
-  const isRemote = features?.platinumPrivateContext.includes(FeatureIds.Remote);
 
   const getFirstStep = () => {
     if (isCustom) return Steps.ConfigureCustomStep;
@@ -121,61 +119,10 @@ export const AddSource: React.FC<AddSourceProps> = ({
     history.push(`${getSourcesPath(SOURCE_ADDED_PATH, isOrganization)}/?name=${sourceName}`);
   };
 
-  const pageTitle = () => {
-    if (currentStep === Steps.ConnectInstanceStep || currentStep === Steps.ConfigureOauthStep) {
-      return 'Connect';
-    }
-    if (currentStep === Steps.ReAuthenticateStep) {
-      return 'Re-authenticate';
-    }
-    if (currentStep === Steps.ConfigureCustomStep || currentStep === Steps.SaveCustomStep) {
-      return 'Create a';
-    }
-    return 'Configure';
-  };
-
-  const CREATE_CUSTOM_SOURCE_SIDEBAR_BLURB =
-    'Custom API Sources provide a set of feature-rich endpoints for indexing data from any content repository.';
-  const CONFIGURE_ORGANIZATION_SOURCE_SIDEBAR_BLURB =
-    'Follow the configuration flow to add a new content source to Workplace Search. First, create an OAuth application in the content source. After that, connect as many instances of the content source that you need.';
-  const CONFIGURE_PRIVATE_SOURCE_SIDEBAR_BLURB =
-    'Follow the configuration flow to add a new private content source to Workplace Search. Private content sources are added by each person via their own personal dashboards. Their data stays safe and visible only to them.';
-  const CONNECT_ORGANIZATION_SOURCE_SIDEBAR_BLURB = `Upon successfully connecting ${name}, source content will be synced to your organization and will be made available and searchable.`;
-  const CONNECT_PRIVATE_REMOTE_SOURCE_SIDEBAR_BLURB = (
-    <>
-      {name} is a <strong>remote source</strong>, which means that each time you search, we reach
-      out to the content source and get matching results directly from {name}&apos;s servers.
-    </>
-  );
-  const CONNECT_PRIVATE_STANDARD_SOURCE_SIDEBAR_BLURB = (
-    <>
-      {name} is a <strong>standard source</strong> for which content is synchronized on a regular
-      basis, in a relevant and secure way.
-    </>
-  );
-
-  const CONNECT_PRIVATE_SOURCE_SIDEBAR_BLURB = isRemote
-    ? CONNECT_PRIVATE_REMOTE_SOURCE_SIDEBAR_BLURB
-    : CONNECT_PRIVATE_STANDARD_SOURCE_SIDEBAR_BLURB;
-  const CONFIGURE_SOURCE_SIDEBAR_BLURB = accountContextOnly
-    ? CONFIGURE_PRIVATE_SOURCE_SIDEBAR_BLURB
-    : CONFIGURE_ORGANIZATION_SOURCE_SIDEBAR_BLURB;
-
-  const CONFIG_SIDEBAR_BLURB = isCustom
-    ? CREATE_CUSTOM_SOURCE_SIDEBAR_BLURB
-    : CONFIGURE_SOURCE_SIDEBAR_BLURB;
-  const CONNECT_SIDEBAR_BLURB = isOrganization
-    ? CONNECT_ORGANIZATION_SOURCE_SIDEBAR_BLURB
-    : CONNECT_PRIVATE_SOURCE_SIDEBAR_BLURB;
-
-  const PAGE_DESCRIPTION =
-    currentStep === Steps.ConnectInstanceStep ? CONNECT_SIDEBAR_BLURB : CONFIG_SIDEBAR_BLURB;
-
   const header = <AddSourceHeader name={name} serviceType={serviceType} categories={categories} />;
 
   return (
     <>
-      <ViewContentHeader title={pageTitle()} description={PAGE_DESCRIPTION} />
       {currentStep === Steps.ConfigIntroStep && (
         <ConfigurationIntro name={name} advanceStep={goToSaveConfig} header={header} />
       )}

diff --git a/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx b/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
@@ -31,7 +31,7 @@ import { AvailableSourcesList } from './available_sources_list';
 import { ConfiguredSourcesList } from './configured_sources_list';
 
 const NEW_SOURCE_DESCRIPTION =
-  'When configuring and connecting a source, you are creating distinct entities with searchable content synchronized from the content platform itself. A source can be added using one of the available source connectors or via Custom API Sources, for additional flexibility.';
+  'When configuring and connecting a source, you are creating distinct entities with searchable content synchronized from the content platform itself. A source can be added using one of the available source connectors or via Custom API Sources, for additional flexibility. ';
 const ORG_SOURCE_DESCRIPTION =
   'Shared content sources are available to your entire organization or can be assigned to specific user groups.';
 const PRIVATE_SOURCE_DESCRIPTION =
@@ -99,7 +99,7 @@ export const AddSourceList: React.FC = () => {
       <ViewContentHeader title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
       {showConfiguredSourcesList || isOrganization ? (
         <ContentSection>
-          <EuiSpacer />
+          <EuiSpacer size="m" />
           <EuiFormRow>
             <EuiFieldSearch
               data-test-subj="FilterSourcesInput"

diff --git a/...search/public/applications/workplace_search/views/content_sources/components/overview.tsx b/...search/public/applications/workplace_search/views/content_sources/components/overview.tsx
@@ -248,11 +248,9 @@ export const Overview: React.FC = () => {
     };
 
     return !groups.length ? null : (
-      <EuiPanel>
-        <EuiText size="s">
-          <h6>
-            <EuiTextColor color="subdued">Group Access</EuiTextColor>
-          </h6>
+      <>
+        <EuiText>
+          <h4>Group Access</h4>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiFlexGroup direction="column" gutterSize="s">
@@ -275,35 +273,36 @@ export const Overview: React.FC = () => {
             </EuiFlexItem>
           ))}
         </EuiFlexGroup>
-      </EuiPanel>
+      </>
     );
   };
 
   const detailsSummary = (
-    <EuiPanel>
-      <EuiText size="s">
-        <h6>
-          <EuiTextColor color="subdued">Configuration</EuiTextColor>
-        </h6>
-      </EuiText>
-      <EuiSpacer />
-      <EuiText size="s">
-        {details.map((detail, index) => (
-          <EuiFlexGroup
-            wrap
-            gutterSize="s"
-            alignItems="center"
-            justifyContent="spaceBetween"
-            key={index}
-          >
-            <EuiFlexItem grow={false}>
-              <strong>{detail.title}</strong>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>{detail.description}</EuiFlexItem>
-          </EuiFlexGroup>
-        ))}
+    <>
+      <EuiSpacer size="l" />
+      <EuiText>
+        <h4>Configuration</h4>
       </EuiText>
-    </EuiPanel>
+      <EuiSpacer size="s" />
+      <EuiPanel>
+        <EuiText size="s">
+          {details.map((detail, index) => (
+            <EuiFlexGroup
+              wrap
+              gutterSize="s"
+              alignItems="center"
+              justifyContent="spaceBetween"
+              key={index}
+            >
+              <EuiFlexItem grow={false}>
+                <strong>{detail.title}</strong>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>{detail.description}</EuiFlexItem>
+            </EuiFlexGroup>
+          ))}
+        </EuiText>
+      </EuiPanel>
+    </>
   );
 
   const documentPermissions = (
@@ -472,10 +471,9 @@ export const Overview: React.FC = () => {
   return (
     <>
       <ViewContentHeader title="Source overview" />
-      <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="xl" alignItems="flexStart">
         <EuiFlexItem>
-          <EuiFlexGroup gutterSize="xl" direction="column">
+          <EuiFlexGroup gutterSize="s" direction="column">
             <EuiFlexItem>
               <DocumentSummary />
             </EuiFlexItem>
@@ -525,7 +523,6 @@ export const Overview: React.FC = () => {
             )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiEmptyPrompt />
       </EuiFlexGroup>
     </>
   );

diff --git a/...ications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx b/...ications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx
@@ -34,10 +34,12 @@ export const SchemaFieldsTable: React.FC = () => {
   const { filteredSchemaFields, filterValue } = useValues(SchemaLogic);
 
   return Object.keys(filteredSchemaFields).length > 0 ? (
-    <EuiTable>
+    <EuiTable tableLayout="auto">
       <EuiTableHeader>
         <EuiTableHeaderCell>{SCHEMA_ERRORS_TABLE_FIELD_NAME_HEADER}</EuiTableHeaderCell>
-        <EuiTableHeaderCell>{SCHEMA_ERRORS_TABLE_DATA_TYPE_HEADER}</EuiTableHeaderCell>
+        <EuiTableHeaderCell align="right">
+          {SCHEMA_ERRORS_TABLE_DATA_TYPE_HEADER}
+        </EuiTableHeaderCell>
       </EuiTableHeader>
       <EuiTableBody>
         {Object.keys(filteredSchemaFields).map((fieldName) => (
@@ -49,7 +51,7 @@ export const SchemaFieldsTable: React.FC = () => {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiTableRowCell>
-            <EuiTableRowCell>
+            <EuiTableRowCell align="right">
               <SchemaExistingField
                 disabled={fieldName === 'id'}
                 key={fieldName}

diff --git a/.../public/applications/workplace_search/views/content_sources/components/source_content.tsx b/.../public/applications/workplace_search/views/content_sources/components/source_content.tsx
@@ -95,24 +95,20 @@ export const SourceContent: React.FC = () => {
 
   const emptyState = (
     <EuiPanel className="euiPanel--inset">
-      <EuiSpacer size="xxl" />
-      <EuiPanel className="euiPanel--inset">
-        <EuiEmptyPrompt
-          title={<h2>{emptyMessage}</h2>}
-          iconType="documents"
-          body={
-            isCustomSource ? (
-              <p>
-                Learn more about adding content in our{' '}
-                <EuiLink target="_blank" href={CUSTOM_SOURCE_DOCS_URL}>
-                  documentation
-                </EuiLink>
-              </p>
-            ) : null
-          }
-        />
-      </EuiPanel>
-      <EuiSpacer size="l" />
+      <EuiEmptyPrompt
+        title={<h2>{emptyMessage}</h2>}
+        iconType="documents"
+        body={
+          isCustomSource ? (
+            <p>
+              Learn more about adding content in our{' '}
+              <EuiLink target="_blank" href={CUSTOM_SOURCE_DOCS_URL}>
+                documentation
+              </EuiLink>
+            </p>
+          ) : null
+        }
+      />
     </EuiPanel>
   );
 
@@ -185,7 +181,6 @@ export const SourceContent: React.FC = () => {
   return (
     <>
       <ViewContentHeader title="Source content" />
-      <EuiSpacer size="l" />
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiFieldSearch