[Workplace Search] Refactor Add Source Views to support base service types for external connectors

x-pack/plugins/enterprise_search/public/applications/workplace_search/routes.test.tsx

@@ -21,6 +21,8 @@ import {
   SOURCES_PATH,
   PRIVATE_SOURCES_PATH,
   SOURCE_DETAILS_PATH,
+  getAddPath,
+  getEditPath,
 } from './routes';
 
 const TestComponent = ({ id, isOrg }: { id: string; isOrg?: boolean }) => {
@@ -86,3 +88,32 @@ describe('getReindexJobRoute', () => {
     );
   });
 });
+
+describe('getAddPath', () => {
+  it('should handle a service type', () => {
+    expect(getAddPath('share_point')).toEqual('/sources/add/share_point');
+  });
+
+  it('should should handle an external service type with no base service type', () => {
+    expect(getAddPath('external')).toEqual('/sources/add/external');
+  });
+
+  it('should should handle an external service type with a base service type', () => {
+    expect(getAddPath('external', 'share_point')).toEqual('/sources/add/share_point/external');
+  });
+  it('should should handle a custom service type with no base service type', () => {
+    expect(getAddPath('external')).toEqual('/sources/add/external');
+  });
+
+  it('should should handle a custom service type with a base service type', () => {
+    expect(getAddPath('custom', 'share_point_server')).toEqual(
+      '/sources/add/share_point_server/custom'
+    );
+  });
+});
+
+describe('getEditPath', () => {
+  it('should handle a service type', () => {
+    expect(getEditPath('share_point')).toEqual('/settings/connectors/share_point/edit');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/workplace_search/routes.ts

@@ -77,6 +77,11 @@ export const getReindexJobRoute = (
   isOrganization: boolean
 ) =>
   getSourcesPath(generatePath(REINDEX_JOB_PATH, { sourceId, activeReindexJobId }), isOrganization);
-export const getAddPath = (serviceType: string): string => `${SOURCES_PATH}/add/${serviceType}`;
+
+export const getAddPath = (serviceType: string, baseServiceType?: string): string =>
+  `${SOURCES_PATH}/add/` +
+  (baseServiceType ? `${baseServiceType}/${serviceType}` : `${serviceType}`);
+
+// TODO this should handle base service type once we are getting it back from registered external connectors
 export const getEditPath = (serviceType: string): string =>
   `${ORG_SETTINGS_CONNECTORS_PATH}/${serviceType}/edit`;

x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts

@@ -72,18 +72,14 @@ export interface Configuration {
 
 export interface SourceDataItem {
   name: string;
-  iconName: string;
   categories?: string[];
   serviceType: string;
+  baseServiceType?: string;
   configuration: Configuration;
-  configured?: boolean;
   connected?: boolean;
   features?: Features;
   objTypes?: string[];
   accountContextOnly: boolean;
-  internalConnectorAvailable?: boolean;
-  externalConnectorAvailable?: boolean;
-  customConnectorAvailable?: boolean;
   isBeta?: boolean;
 }
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/utils/index.ts

@@ -11,6 +11,5 @@ export { mimeType } from './mime_types';
 export { readUploadedFileAsBase64 } from './read_uploaded_file_as_base64';
 export { readUploadedFileAsText } from './read_uploaded_file_as_text';
 export { handlePrivateKeyUpload } from './handle_private_key_upload';
-export { hasMultipleConnectorOptions } from './has_multiple_connector_options';
 export { isNotNullish } from './is_not_nullish';
 export { sortByName } from './sort_by_name';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_custom_source/add_custom_source.test.tsx

@@ -7,6 +7,7 @@
 
 import '../../../../../../__mocks__/shallow_useeffect.mock';
 import { setMockValues } from '../../../../../../__mocks__/kea_logic';
+import { mockUseParams } from '../../../../../../__mocks__/react_router';
 import { sourceConfigData } from '../../../../../__mocks__/content_sources.mock';
 
 import React from 'react';
@@ -17,52 +18,55 @@ import {
   WorkplaceSearchPageTemplate,
   PersonalDashboardLayout,
 } from '../../../../../components/layout';
-import { staticSourceData } from '../../../source_data';
 
 import { AddCustomSource } from './add_custom_source';
 import { AddCustomSourceSteps } from './add_custom_source_logic';
 import { ConfigureCustom } from './configure_custom';
 import { SaveCustom } from './save_custom';
 
 describe('AddCustomSource', () => {
-  const props = {
-    sourceData: staticSourceData[0],
-    initialValues: undefined,
-  };
-
   const values = {
     sourceConfigData,
     isOrganization: true,
   };
 
   beforeEach(() => {
     setMockValues({ ...values });
+    mockUseParams.mockReturnValue({ baseServiceType: 'share_point_server' });
   });
 
   it('renders', () => {
-    const wrapper = shallow(<AddCustomSource {...props} />);
+    const wrapper = shallow(<AddCustomSource />);
 
     expect(wrapper.find(WorkplaceSearchPageTemplate)).toHaveLength(1);
   });
 
+  it('returns null if there is no matching source data for the service type', () => {
+    mockUseParams.mockReturnValue({ baseServiceType: 'doesnt_exist' });
+
+    const wrapper = shallow(<AddCustomSource />);
+
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
   it('should show correct layout for personal dashboard', () => {
     setMockValues({ isOrganization: false });
-    const wrapper = shallow(<AddCustomSource {...props} />);
+    const wrapper = shallow(<AddCustomSource />);
 
     expect(wrapper.find(WorkplaceSearchPageTemplate)).toHaveLength(0);
     expect(wrapper.find(PersonalDashboardLayout)).toHaveLength(1);
   });
 
   it('should show Configure Custom for custom configuration step', () => {
     setMockValues({ currentStep: AddCustomSourceSteps.ConfigureCustomStep });
-    const wrapper = shallow(<AddCustomSource {...props} />);
+    const wrapper = shallow(<AddCustomSource />);
 
     expect(wrapper.find(ConfigureCustom)).toHaveLength(1);
   });
 
   it('should show Save Custom for save custom step', () => {
     setMockValues({ currentStep: AddCustomSourceSteps.SaveCustomStep });
-    const wrapper = shallow(<AddCustomSource {...props} />);
+    const wrapper = shallow(<AddCustomSource />);
 
     expect(wrapper.find(SaveCustom)).toHaveLength(1);
   });

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_custom_source/add_custom_source.tsx

@@ -7,6 +7,8 @@
 
 import React from 'react';
 
+import { useParams } from 'react-router-dom';
+
 import { useValues } from 'kea';
 
 import { AppLogic } from '../../../../../app_logic';
@@ -16,25 +18,32 @@ import {
 } from '../../../../../components/layout';
 import { NAV } from '../../../../../constants';
 
-import { SourceDataItem } from '../../../../../types';
+import { getSourceData } from '../../../source_data';
 
 import { AddCustomSourceLogic, AddCustomSourceSteps } from './add_custom_source_logic';
 import { ConfigureCustom } from './configure_custom';
 import { SaveCustom } from './save_custom';
 
-interface Props {
-  sourceData: SourceDataItem;
-  initialValue?: string;
-}
-export const AddCustomSource: React.FC<Props> = ({ sourceData, initialValue = '' }) => {
-  const addCustomSourceLogic = AddCustomSourceLogic({ sourceData, initialValue });
+export const AddCustomSource: React.FC = () => {
+  const { baseServiceType } = useParams<{ baseServiceType?: string }>();
+  const sourceData = getSourceData('custom', baseServiceType);
+
+  const addCustomSourceLogic = AddCustomSourceLogic({
+    baseServiceType,
+    initialValue: sourceData?.name,
+  });
+
   const { currentStep } = useValues(addCustomSourceLogic);
   const { isOrganization } = useValues(AppLogic);
 
+  if (!sourceData) {
+    return null;
+  }
+
   const Layout = isOrganization ? WorkplaceSearchPageTemplate : PersonalDashboardLayout;
 
   return (
-    <Layout pageChrome={[NAV.SOURCES, NAV.ADD_SOURCE, sourceData.name || '...']}>
+    <Layout pageChrome={[NAV.SOURCES, NAV.ADD_SOURCE, sourceData.name]}>
       {currentStep === AddCustomSourceSteps.ConfigureCustomStep && <ConfigureCustom />}
       {currentStep === AddCustomSourceSteps.SaveCustomStep && <SaveCustom />}
     </Layout>

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_custom_source/add_custom_source_logic.test.ts

@@ -14,42 +14,25 @@ import { sourceConfigData } from '../../../../../__mocks__/content_sources.mock'
 
 import { nextTick } from '@kbn/test-jest-helpers';
 
-import { docLinks } from '../../../../../../shared/doc_links';
 import { itShowsServerErrorAsFlashMessage } from '../../../../../../test_helpers';
 
 jest.mock('../../../../../app_logic', () => ({
   AppLogic: { values: { isOrganization: true } },
 }));
 import { AppLogic } from '../../../../../app_logic';
 
-import { SOURCE_NAMES } from '../../../../../constants';
-import { CustomSource, SourceDataItem } from '../../../../../types';
+import { CustomSource } from '../../../../../types';
 
 import { AddCustomSourceLogic, AddCustomSourceSteps } from './add_custom_source_logic';
 
-const CUSTOM_SOURCE_DATA_ITEM: SourceDataItem = {
-  name: SOURCE_NAMES.CUSTOM,
-  iconName: SOURCE_NAMES.CUSTOM,
-  serviceType: 'custom',
-  configuration: {
-    isPublicKey: false,
-    hasOauthRedirect: false,
-    needsBaseUrl: false,
-    documentationUrl: docLinks.workplaceSearchCustomSources,
-    applicationPortalUrl: '',
-  },
-  accountContextOnly: false,
-};
-
 const DEFAULT_VALUES = {
   currentStep: AddCustomSourceSteps.ConfigureCustomStep,
   buttonLoading: false,
   customSourceNameValue: '',
   newCustomSource: {} as CustomSource,
-  sourceData: CUSTOM_SOURCE_DATA_ITEM,
 };
 
-const MOCK_PROPS = { initialValue: '', sourceData: CUSTOM_SOURCE_DATA_ITEM };
+const MOCK_PROPS = {};
 
 const MOCK_NAME = 'name';
 
@@ -151,11 +134,7 @@ describe('AddCustomSourceLogic', () => {
               customSourceNameValue: MOCK_NAME,
             },
             {
-              ...MOCK_PROPS,
-              sourceData: {
-                ...CUSTOM_SOURCE_DATA_ITEM,
-                serviceType: 'sharepoint-server',
-              },
+              baseServiceType: 'share_point_server',
             }
           );
 
@@ -165,7 +144,7 @@ describe('AddCustomSourceLogic', () => {
             body: JSON.stringify({
               service_type: 'custom',
               name: MOCK_NAME,
-              base_service_type: 'sharepoint-server',
+              base_service_type: 'share_point_server',
             }),
           });
         });
@@ -200,10 +179,7 @@ describe('AddCustomSourceLogic', () => {
             },
             {
               ...MOCK_PROPS,
-              sourceData: {
-                ...CUSTOM_SOURCE_DATA_ITEM,
-                serviceType: 'sharepoint-server',
-              },
+              baseServiceType: 'share_point_server',
             }
           );
 
@@ -215,7 +191,7 @@ describe('AddCustomSourceLogic', () => {
               body: JSON.stringify({
                 service_type: 'custom',
                 name: MOCK_NAME,
-                base_service_type: 'sharepoint-server',
+                base_service_type: 'share_point_server',
               }),
             }
           );

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_custom_source/add_custom_source_logic.ts

@@ -13,8 +13,8 @@ import { AppLogic } from '../../../../../app_logic';
 import { CustomSource, SourceDataItem } from '../../../../../types';
 
 export interface AddCustomSourceProps {
-  sourceData: SourceDataItem;
-  initialValue: string;
+  baseServiceType?: string;
+  initialValue?: string;
 }
 
 export enum AddCustomSourceSteps {
@@ -67,7 +67,7 @@ export const AddCustomSourceLogic = kea<
       },
     ],
     customSourceNameValue: [
-      props.initialValue,
+      props.initialValue || '',
       {
         setCustomSourceNameValue: (_, customSourceNameValue) => customSourceNameValue,
       },
@@ -78,7 +78,6 @@ export const AddCustomSourceLogic = kea<
         setNewCustomSource: (_, newCustomSource) => newCustomSource,
       },
     ],
-    sourceData: [props.sourceData],
   }),
   listeners: ({ actions, values, props }) => ({
     createContentSource: async () => {
@@ -90,21 +89,12 @@ export const AddCustomSourceLogic = kea<
 
       const { customSourceNameValue } = values;
 
-      const baseParams = {
+      const params = {
         service_type: 'custom',
         name: customSourceNameValue,
+        base_service_type: props.baseServiceType,
       };
 
-      // pre-configured custom sources have a serviceType reflecting their target service
-      // we submit this as `base_service_type` to keep track of
-      const params =
-        props.sourceData.serviceType === 'custom'
-          ? baseParams
-          : {
-              ...baseParams,
-              base_service_type: props.sourceData.serviceType,
-            };
-
       try {
         const response = await HttpLogic.values.http.post<CustomSource>(route, {
           body: JSON.stringify(params),

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_custom_source/save_custom.tsx

@@ -38,7 +38,7 @@ import { AddCustomSourceLogic } from './add_custom_source_logic';
 export const SaveCustom: React.FC = () => {
   const { newCustomSource, sourceData } = useValues(AddCustomSourceLogic);
   const { isOrganization } = useValues(AppLogic);
-  const { serviceType, name, categories = [] } = sourceData;
+  const { serviceType, baseServiceType, name, categories = [] } = sourceData;
 
   return (
     <>
@@ -92,7 +92,7 @@ export const SaveCustom: React.FC = () => {
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem>
-          <CustomSourceDeployment source={newCustomSource} sourceData={sourceData} />
+          <CustomSourceDeployment source={newCustomSource} baseServiceType={baseServiceType} />
         </EuiFlexItem>
       </EuiFlexGroup>
       {serviceType !== 'custom' && (