[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>
2021-07-07 10:09:55 -05:00 · 2021-07-07 10:09:55 -05:00 · 979c6e8031
parent 1c0dbea7ae
commit 979c6e8031
5 changed files with 100 additions and 61 deletions
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts
+++ b/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(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.title',
+export const NON_PLATINUM_OAUTH_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthTitle',
  {
    defaultMessage: 'Configuring OAuth for Custom Search Applications',
  }
 );

-export const LICENSE_MODAL_DESCRIPTION = i18n.translate(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.description',
+export const NON_PLATINUM_OAUTH_DESCRIPTION = i18n.translate(
+  '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(
-  'xpack.enterpriseSearch.workplaceSearch.licenseModal.link',
+export const NON_PLATINUM_OAUTH_LINK = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.nonPlatinumOauthLinkLabel',
  {
    defaultMessage: 'Explore Platinum features',
  }
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
+++ b/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', () => {
-    setMockValues({
-      hasPlatinumLicense: false,
-      oauthApplication,
+  describe('non-platinum license content', () => {
+    beforeEach(() => {
+      setMockValues({
+        hasPlatinumLicense: false,
+        oauthApplication,
+      });
    });
-    const wrapper = shallow(<OauthApplication />);

-    expect(wrapper.find(EuiModal)).toHaveLength(1);
-  });
+    it('renders pageTitle', () => {
+      const wrapper = shallow(<OauthApplication />);

-  it('closes license modal', () => {
-    setMockValues({
-      hasPlatinumLicense: false,
-      oauthApplication,
+      expect(wrapper.prop('pageHeader').pageTitle).toMatchInlineSnapshot(`
+        <React.Fragment>
+          <LicenseBadge />
+          <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', () => {
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
+++ b/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,
-  LICENSE_MODAL_DESCRIPTION,
-  LICENSE_MODAL_LINK,
+  NON_PLATINUM_OAUTH_TITLE,
+  NON_PLATINUM_OAUTH_DESCRIPTION,
+  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 = (
-    <EuiModal maxWidth={500} onClose={closeLicenseModal} data-test-subj="LicenseModal">
-      <EuiModalBody>
-        <EuiSpacer size="xl" />
-        <LicenseBadge />
-        <EuiSpacer />
-        <EuiTitle size="l">
-          <h1>{LICENSE_MODAL_TITLE}</h1>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiText color="subdued">{LICENSE_MODAL_DESCRIPTION}</EuiText>
-        <EuiSpacer />
-        <EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
-          {LICENSE_MODAL_LINK}
-        </EuiLink>
-        <EuiSpacer />
-      </EuiModalBody>
-    </EuiModal>
+  const nonPlatinumTitle = (
+    <>
+      <LicenseBadge />
+      <EuiSpacer size="s" />
+      <EuiTitle size="l">
+        <h1>{NON_PLATINUM_OAUTH_TITLE}</h1>
+      </EuiTitle>
+    </>
+  );
+
+  const nonPlatinumDescription = (
+    <>
+      <EuiText color="subdued">{NON_PLATINUM_OAUTH_DESCRIPTION}</EuiText>
+      <EuiSpacer />
+      <EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
+        {NON_PLATINUM_OAUTH_LINK}
+      </EuiLink>
+    </>
  );

  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>
  );
 };
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/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": "アラートの作成、管理、監視によりデータへの変更を検知します。"
  }
-}
+}
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/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": "通过创建、管理和监测警报来检测数据中的更改。"
  }
-}
+}