From 979c6e8031a109276c5eab307d52b801fb005e7f Mon Sep 17 00:00:00 2001 From: Scotty Bollinger Date: Wed, 7 Jul 2021 10:09:55 -0500 Subject: [PATCH] [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> --- .../workplace_search/constants.ts | 12 +-- .../components/oauth_application.test.tsx | 60 +++++++++++---- .../settings/components/oauth_application.tsx | 73 +++++++++++-------- .../translations/translations/ja-JP.json | 8 +- .../translations/translations/zh-CN.json | 8 +- 5 files changed, 100 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts index cf459171a808..0e56ee8f6724 100644 --- 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', } diff --git 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 index f8c70d6bbba7..4d329ff357b8 100644 --- 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(); - expect(wrapper.find(EuiModal)).toHaveLength(1); - }); + it('renders pageTitle', () => { + const wrapper = shallow(); - it('closes license modal', () => { - setMockValues({ - hasPlatinumLicense: false, - oauthApplication, + expect(wrapper.prop('pageHeader').pageTitle).toMatchInlineSnapshot(` + + + + +

+ Configuring OAuth for Custom Search Applications +

+ + + `); }); - const wrapper = shallow(); - wrapper.find(EuiModal).prop('onClose')(); - expect(wrapper.find(EuiModal)).toHaveLength(0); + it('renders description', () => { + const wrapper = shallow(); + + expect(wrapper.prop('pageHeader').description).toMatchInlineSnapshot(` + + + 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. + + + + Explore Platinum features + + + `); + }); }); it('handles conditional copy', () => { diff --git 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 index ca8eadbcf75f..075d95f72603 100644 --- 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 = ( - - - - - - -

{LICENSE_MODAL_TITLE}

- - - {LICENSE_MODAL_DESCRIPTION} - - - {LICENSE_MODAL_LINK} - - - - + const nonPlatinumTitle = ( + <> + + + +

{NON_PLATINUM_OAUTH_TITLE}

+ + + ); + + const nonPlatinumDescription = ( + <> + {NON_PLATINUM_OAUTH_DESCRIPTION} + + + {NON_PLATINUM_OAUTH_LINK} + + ); return ( + 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 = () => { )} - {isLicenseModalVisible && licenseModal} ); }; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 9efedf495737..b16c5764f9d7 100644 --- 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": "アラートの作成、管理、監視によりデータへの変更を検知します。" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 384237e2d140..f1b174e5ad0e 100644 --- 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": "通过创建、管理和监测警报来检测数据中的更改。" } -} \ No newline at end of file +}