[Workplace Search] Refactor OAuth permissions modal to be a conditional heading (#104323)

* Rename constants

* Refactor to use alternate heading instead of modal

* Fix i18n order

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

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

@@ -568,23 +568,23 @@ export const REDIRECT_INSECURE_ERROR_TEXT = i18n.translate(
   }
 );
 
-export const LICENSE_MODAL_TITLE = i18n.translate(
+export const NON_PLATINUM_OAUTH_TITLE = i18n.translate(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.title',
+  'xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthTitle',
   {
     defaultMessage: 'Configuring OAuth for Custom Search Applications',
   }
 );
 
-export const LICENSE_MODAL_DESCRIPTION = i18n.translate(
+export const NON_PLATINUM_OAUTH_DESCRIPTION = i18n.translate(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.description',
+  'xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthDescription',
   {
     defaultMessage:
       'Configure an OAuth application for secure use of the Workplace Search Search API. Upgrade to a Platinum license to enable the Search API and create your OAuth application.',
   }
 );
 
-export const LICENSE_MODAL_LINK = i18n.translate(
+export const NON_PLATINUM_OAUTH_LINK = i18n.translate(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.link',
+  'xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthLinkLabel',
   {
     defaultMessage: 'Explore Platinum features',
   }

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiModal, EuiForm } from '@elastic/eui';
+import { EuiForm } from '@elastic/eui';
 
 import { getPageDescription } from '../../../../test_helpers';
 
@@ -96,25 +96,55 @@ describe('OauthApplication', () => {
     expect(wrapper.find(CredentialItem)).toHaveLength(2);
   });
 
-  it('renders license modal', () => {
+  describe('non-platinum license content', () => {
-    setMockValues({
+    beforeEach(() => {
-      hasPlatinumLicense: false,
+      setMockValues({
-      oauthApplication,
+        hasPlatinumLicense: false,
+        oauthApplication,
+      });
     });
-    const wrapper = shallow(<OauthApplication />);
 
-    expect(wrapper.find(EuiModal)).toHaveLength(1);
+    it('renders pageTitle', () => {
-  });
+      const wrapper = shallow(<OauthApplication />);
 
-  it('closes license modal', () => {
+      expect(wrapper.prop('pageHeader').pageTitle).toMatchInlineSnapshot(`
-    setMockValues({
+        <React.Fragment>
-      hasPlatinumLicense: false,
+          <LicenseBadge />
-      oauthApplication,
+          <EuiSpacer
+            size="s"
+          />
+          <EuiTitle
+            size="l"
+          >
+            <h1>
+              Configuring OAuth for Custom Search Applications
+            </h1>
+          </EuiTitle>
+        </React.Fragment>
+      `);
     });
-    const wrapper = shallow(<OauthApplication />);
-    wrapper.find(EuiModal).prop('onClose')();
 
-    expect(wrapper.find(EuiModal)).toHaveLength(0);
+    it('renders description', () => {
+      const wrapper = shallow(<OauthApplication />);
+
+      expect(wrapper.prop('pageHeader').description).toMatchInlineSnapshot(`
+        <React.Fragment>
+          <EuiText
+            color="subdued"
+          >
+            Configure an OAuth application for secure use of the Workplace Search Search API. Upgrade to a Platinum license to enable the Search API and create your OAuth application.
+          </EuiText>
+          <EuiSpacer />
+          <EuiLink
+            external={true}
+            href="/license-management.html"
+            target="_blank"
+          >
+            Explore Platinum features
+          </EuiLink>
+        </React.Fragment>
+      `);
+    });
   });
 
   it('handles conditional copy', () => {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FormEvent, useState } from 'react';
+import React, { FormEvent } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -19,8 +19,6 @@ import {
   EuiCode,
   EuiSpacer,
   EuiLink,
-  EuiModal,
-  EuiModalBody,
   EuiTitle,
   EuiText,
 } from '@elastic/eui';
@@ -47,9 +45,9 @@ import {
   REDIRECT_SECURE_ERROR_TEXT,
   REDIRECT_URIS_LABEL,
   SAVE_CHANGES_BUTTON,
-  LICENSE_MODAL_TITLE,
+  NON_PLATINUM_OAUTH_TITLE,
-  LICENSE_MODAL_DESCRIPTION,
+  NON_PLATINUM_OAUTH_DESCRIPTION,
-  LICENSE_MODAL_LINK,
+  NON_PLATINUM_OAUTH_LINK,
 } from '../../../constants';
 import { ENT_SEARCH_LICENSE_MANAGEMENT } from '../../../routes';
 import { SettingsLogic } from '../settings_logic';
@@ -59,9 +57,6 @@ export const OauthApplication: React.FC = () => {
   const { oauthApplication } = useValues(SettingsLogic);
   const { hasPlatinumLicense } = useValues(LicensingLogic);
 
-  const [isLicenseModalVisible, setIsLicenseModalVisible] = useState(!hasPlatinumLicense);
-  const closeLicenseModal = () => setIsLicenseModalVisible(false);
-
   if (!oauthApplication) return null;
 
   const persisted = !!(oauthApplication.uid && oauthApplication.secret);
@@ -91,38 +86,47 @@ export const OauthApplication: React.FC = () => {
     updateOauthApplication();
   };
 
-  const licenseModal = (
+  const nonPlatinumTitle = (
-    <EuiModal maxWidth={500} onClose={closeLicenseModal} data-test-subj="LicenseModal">
+    <>
-      <EuiModalBody>
+      <LicenseBadge />
-        <EuiSpacer size="xl" />
+      <EuiSpacer size="s" />
-        <LicenseBadge />
+      <EuiTitle size="l">
-        <EuiSpacer />
+        <h1>{NON_PLATINUM_OAUTH_TITLE}</h1>
-        <EuiTitle size="l">
+      </EuiTitle>
-          <h1>{LICENSE_MODAL_TITLE}</h1>
+    </>
-        </EuiTitle>
+  );
-        <EuiSpacer size="s" />
+
-        <EuiText color="subdued">{LICENSE_MODAL_DESCRIPTION}</EuiText>
+  const nonPlatinumDescription = (
-        <EuiSpacer />
+    <>
-        <EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
+      <EuiText color="subdued">{NON_PLATINUM_OAUTH_DESCRIPTION}</EuiText>
-          {LICENSE_MODAL_LINK}
+      <EuiSpacer />
-        </EuiLink>
+      <EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
-        <EuiSpacer />
+        {NON_PLATINUM_OAUTH_LINK}
-      </EuiModalBody>
+      </EuiLink>
-    </EuiModal>
+    </>
   );
 
   return (
     <WorkplaceSearchPageTemplate
       pageChrome={[NAV.SETTINGS, NAV.SETTINGS_OAUTH]}
-      pageHeader={{ pageTitle: NAV.SETTINGS_OAUTH, description }}
+      pageHeader={{
+        pageTitle: hasPlatinumLicense ? NAV.SETTINGS_OAUTH : nonPlatinumTitle,
+        description: hasPlatinumLicense ? description : nonPlatinumDescription,
+      }}
     >
       <EuiForm component="form" onSubmit={handleSubmit}>
+        <EuiSpacer />
         <ContentSection>
           <EuiFormRow label={NAME_LABEL}>
             <EuiFieldText
               value={oauthApplication.name}
               data-test-subj="OAuthAppName"
-              onChange={(e) => setOauthApplication({ ...oauthApplication, name: e.target.value })}
+              onChange={(e) =>
+                setOauthApplication({
+                  ...oauthApplication,
+                  name: e.target.value,
+                })
+              }
               required
               disabled={!hasPlatinumLicense}
             />
@@ -139,7 +143,10 @@ export const OauthApplication: React.FC = () => {
               value={oauthApplication.redirectUri}
               data-test-subj="RedirectURIsTextArea"
               onChange={(e) =>
-                setOauthApplication({ ...oauthApplication, redirectUri: e.target.value })
+                setOauthApplication({
+                  ...oauthApplication,
+                  redirectUri: e.target.value,
+                })
               }
               required
               disabled={!hasPlatinumLicense}
@@ -152,7 +159,10 @@ export const OauthApplication: React.FC = () => {
               checked={oauthApplication.confidential}
               data-test-subj="ConfidentialToggle"
               onChange={(e) =>
-                setOauthApplication({ ...oauthApplication, confidential: e.target.checked })
+                setOauthApplication({
+                  ...oauthApplication,
+                  confidential: e.target.checked,
+                })
               }
               disabled={!hasPlatinumLicense}
             />
@@ -193,7 +203,6 @@ export const OauthApplication: React.FC = () => {
           </ContentSection>
         )}
       </EuiForm>
-      {isLicenseModalVisible && licenseModal}
     </WorkplaceSearchPageTemplate>
   );
 };

x-pack/plugins/translations/translations/ja-JP.json

@@ -8146,9 +8146,6 @@
     "xpack.enterpriseSearch.workplaceSearch.groups.userListCount": "{maxVisibleUsers}/{numUsers}ユーザーを表示しています。",
     "xpack.enterpriseSearch.workplaceSearch.groups.usersModalLabel": "ユーザー",
     "xpack.enterpriseSearch.workplaceSearch.keepEditing.button": "編集を続行",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.description": "Workplace Search検索APIを安全に使用するために、OAuthアプリケーションを構成します。プラチナライセンスにアップグレードして、検索APIを有効にし、OAuthアプリケーションを作成します。",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.link": "プラチナ機能の詳細",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.title": "カスタム検索アプリケーションのOAuthを構成",
     "xpack.enterpriseSearch.workplaceSearch.name.label": "名前",
     "xpack.enterpriseSearch.workplaceSearch.nav.addSource": "ソースの追加",
     "xpack.enterpriseSearch.workplaceSearch.nav.content": "コンテンツ",
@@ -8167,6 +8164,9 @@
     "xpack.enterpriseSearch.workplaceSearch.nav.settingsOauth": "OAuthアプリケーション",
     "xpack.enterpriseSearch.workplaceSearch.nav.settingsSourcePrioritization": "コンテンツソースコネクター",
     "xpack.enterpriseSearch.workplaceSearch.nav.sources": "ソース",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthTitle": "カスタム検索アプリケーションのOAuthを構成",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthDescription": "Workplace Search検索APIを安全に使用するために、OAuthアプリケーションを構成します。プラチナライセンスにアップグレードして、検索APIを有効にし、OAuthアプリケーションを作成します。",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthLinkLabel": "プラチナ機能の詳細",
     "xpack.enterpriseSearch.workplaceSearch.oauth.description": "組織のOAuthクライアントを作成します。",
     "xpack.enterpriseSearch.workplaceSearch.oauthPersisted.description": "組織のOAuthクライアント資格情報にアクセスし、OAuth設定を管理します。",
     "xpack.enterpriseSearch.workplaceSearch.ok.button": "OK",
@@ -24210,4 +24210,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}

x-pack/plugins/translations/translations/zh-CN.json

@@ -8214,9 +8214,6 @@
     "xpack.enterpriseSearch.workplaceSearch.groups.userListCount": "正在显示 {numUsers} 个用户中的 {maxVisibleUsers} 个。",
     "xpack.enterpriseSearch.workplaceSearch.groups.usersModalLabel": "用户",
     "xpack.enterpriseSearch.workplaceSearch.keepEditing.button": "继续编辑",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.description": "配置 OAuth 应用程序，以安全使用 Workplace Search 搜索 API。升级到白金级许可证，以启用搜索 API 并创建您的 OAuth 应用程序。",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.link": "了解白金级功能",
-    "xpack.enterpriseSearch.workplaceSearch.licenseModal.title": "正在为定制搜索应用程序配置 OAuth",
     "xpack.enterpriseSearch.workplaceSearch.name.label": "名称",
     "xpack.enterpriseSearch.workplaceSearch.nav.addSource": "添加源",
     "xpack.enterpriseSearch.workplaceSearch.nav.content": "内容",
@@ -8236,6 +8233,9 @@
     "xpack.enterpriseSearch.workplaceSearch.nav.settingsSourcePrioritization": "内容源连接器",
     "xpack.enterpriseSearch.workplaceSearch.nav.sources": "源",
     "xpack.enterpriseSearch.workplaceSearch.oauth.description": "为您的组织创建 OAuth 客户端。",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthDescription": "配置 OAuth 应用程序，以安全使用 Workplace Search 搜索 API。升级到白金级许可证，以启用搜索 API 并创建您的 OAuth 应用程序。",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthLinkLabel": "了解白金级功能",
+    "xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthTitle": "正在为定制搜索应用程序配置 OAuth",
     "xpack.enterpriseSearch.workplaceSearch.oauthPersisted.description": "访问您的组织的 OAuth 客户端并管理 OAuth 设置。",
     "xpack.enterpriseSearch.workplaceSearch.ok.button": "确定",
     "xpack.enterpriseSearch.workplaceSearch.organizationStats.activeUsers": "活动用户",
@@ -24588,4 +24588,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}