Display different config for Oauth1 and Oauth2 connections (#112787)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/workplace_search/__mocks__/content_sources.mock.ts

@@ -25,6 +25,7 @@ export const contentSources = [
     allowsReauth: true,
     boost: 1,
     activities: [],
+    isOauth1: false,
   },
   {
     id: '124',
@@ -40,6 +41,7 @@ export const contentSources = [
     allowsReauth: true,
     boost: 0.5,
     activities: [],
+    isOauth1: true,
   },
 ];
 
@@ -303,6 +305,7 @@ export const sourceConfigData = {
   privateSourcesEnabled: false,
   categories: ['wiki', 'atlassian', 'intranet'],
   configuredFields: {
+    isOauth1: false,
     clientId: 'CyztADsSECRETCSAUCEh1a',
     clientSecret: 'GSjJxqSECRETCSAUCEksHk',
     baseUrl: 'https://mine.atlassian.net',

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_config_fields/source_config_fields.test.tsx

@@ -25,6 +25,7 @@ describe('SourceConfigFields', () => {
   it('renders with all items, hiding API Keys', () => {
     const wrapper = shallow(
       <SourceConfigFields
+        isOauth1={false}
         clientId="123"
         clientSecret="456"
         publicKey="abc"
@@ -39,7 +40,13 @@ describe('SourceConfigFields', () => {
 
   it('shows API keys', () => {
     const wrapper = shallow(
-      <SourceConfigFields clientSecret="456" publicKey="abc" consumerKey="def" baseUrl="ghi" />
+      <SourceConfigFields
+        isOauth1
+        clientSecret="456"
+        publicKey="abc"
+        consumerKey="def"
+        baseUrl="ghi"
+      />
     );
 
     expect(wrapper.find(ApiKey)).toHaveLength(2);

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_config_fields/source_config_fields.tsx

@@ -20,6 +20,7 @@ import { ApiKey } from '../api_key';
 import { CredentialItem } from '../credential_item';
 
 interface SourceConfigFieldsProps {
+  isOauth1?: boolean;
   clientId?: string;
   clientSecret?: string;
   publicKey?: string;
@@ -28,14 +29,13 @@ interface SourceConfigFieldsProps {
 }
 
 export const SourceConfigFields: React.FC<SourceConfigFieldsProps> = ({
+  isOauth1,
   clientId,
   clientSecret,
   publicKey,
   consumerKey,
   baseUrl,
 }) => {
-  const showApiKey = (publicKey || consumerKey) && !clientId;
-
   const credentialItem = (label: string, item?: string) =>
     item && <CredentialItem label={label} value={item} testSubj={label} hideCopy />;
 
@@ -58,10 +58,10 @@ export const SourceConfigFields: React.FC<SourceConfigFieldsProps> = ({
 
   return (
     <>
-      {showApiKey && keyElement}
-      {credentialItem(CLIENT_ID_LABEL, clientId)}
+      {isOauth1 && keyElement}
+      {!isOauth1 && credentialItem(CLIENT_ID_LABEL, clientId)}
       <EuiSpacer size="s" />
-      {credentialItem(CLIENT_SECRET_LABEL, clientSecret)}
+      {!isOauth1 && credentialItem(CLIENT_SECRET_LABEL, clientSecret)}
       <EuiSpacer size="s" />
       {credentialItem(BASE_URL_LABEL, baseUrl)}
     </>

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

@@ -108,6 +108,7 @@ export interface ContentSourceDetails extends ContentSource {
   allowsReauth: boolean;
   boost: number;
   activities: SourceActivity[];
+  isOauth1: boolean;
 }
 
 interface DescriptionList {

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

@@ -77,6 +77,7 @@ export const SourceSettings: React.FC = () => {
       custom: isCustom,
       isIndexedSource,
       areThumbnailsConfigEnabled,
+      isOauth1,
       indexing: {
         enabled,
         features: {
@@ -98,10 +99,9 @@ export const SourceSettings: React.FC = () => {
     getSourceConfigData(serviceType);
   }, []);
 
-  const {
-    configuration: { isPublicKey },
-    editPath,
-  } = staticSourceData.find((source) => source.serviceType === serviceType) as SourceDataItem;
+  const { editPath } = staticSourceData.find(
+    (source) => source.serviceType === serviceType
+  ) as SourceDataItem;
 
   const [inputValue, setValue] = useState(name);
   const [confirmModalVisible, setModalVisibility] = useState(false);
@@ -207,10 +207,11 @@ export const SourceSettings: React.FC = () => {
       {showConfig && (
         <ContentSection title={SOURCE_CONFIG_TITLE}>
           <SourceConfigFields
+            isOauth1={isOauth1}
             clientId={clientId}
             clientSecret={clientSecret}
-            publicKey={isPublicKey ? publicKey : undefined}
-            consumerKey={consumerKey || undefined}
+            publicKey={publicKey}
+            consumerKey={consumerKey}
             baseUrl={baseUrl}
           />
           <EuiFormRow>