Skip to content

Commit

Permalink
Chore: Rewrite custom OAuth Modals to react (#26204)
Browse files Browse the repository at this point in the history 
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
  • Loading branch information
@gabriellsh @dougfabris @carlosrodrigues94
2 people authored and carlosrodrigues94 committed Aug 3, 2022
1 parent 9083271 commit 2ad84c3
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 55 deletions.
46 changes: 46 additions & 0 deletions apps/meteor/client/views/admin/settings/groups/CreateOAuthModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { TextInput, Field } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React, { ReactElement, useState, FormEvent } from 'react';

import GenericModal from '../../../../components/GenericModal';

type CreateOAuthModalProps = {
onConfirm: (text: string) => Promise<void>;
onClose: () => void;
};

const CreateOAuthModal = ({ onConfirm, onClose }: CreateOAuthModalProps): ReactElement => {
const [text, setText] = useState<string>('');
const [error, setError] = useState<string>('');
const t = useTranslation();

const handleConfirm = (): void => {
if (!text.length) {
setError(t('Name_cant_be_empty'));
return;
}
onConfirm(text);
};

return (
<GenericModal title={t('Add_custom_oauth')} confirmText={t('Add')} onCancel={onClose} onClose={onClose} onConfirm={handleConfirm}>
<Field>
<Field.Label>{t('Give_a_unique_name_for_the_custom_oauth')}</Field.Label>
<Field.Row>
<TextInput
error={error}
placeholder={t('Custom_oauth_unique_name')}
value={text}
onChange={(e: FormEvent<HTMLInputElement>): void => {
setText(e.currentTarget.value);
setError('');
}}
/>
</Field.Row>
{error && <Field.Error>{error}</Field.Error>}
</Field>
</GenericModal>
);
};

export default CreateOAuthModal;
87 changes: 41 additions & 46 deletions apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { ISetting } from '@rocket.chat/core-typings';
import { Button } from '@rocket.chat/fuselage';
import { useModal, useToastMessageDispatch, useAbsoluteUrl, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
import { useToastMessageDispatch, useAbsoluteUrl, useMethod, useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
import React, { memo, ReactElement } from 'react';
import s from 'underscore.string';

import GenericModal from '../../../../components/GenericModal';
import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
import GroupPage from '../GroupPage';
import Section from '../Section';
import CreateOAuthModal from './CreateOAuthModal';

type OAuthGroupPageProps = ISetting;

Expand All @@ -28,7 +30,7 @@ function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
const refreshOAuthService = useMethod('refreshOAuthService');
const addOAuthService = useMethod('addOAuthService');
const removeOAuthService = useMethod('removeOAuthService');
const modal = useModal();
const setModal = useSetModal();

const handleRefreshOAuthServicesButtonClick = async (): Promise<void> => {
dispatchToastMessage({ type: 'info', message: t('Refreshing') });
Expand All @@ -41,32 +43,44 @@ function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
};

const handleAddCustomOAuthButtonClick = (): void => {
modal.open(
{
title: t('Add_custom_oauth'),
text: t('Give_a_unique_name_for_the_custom_oauth'),
type: 'input',
showCancelButton: true,
closeOnConfirm: true,
inputPlaceholder: t('Custom_oauth_unique_name'),
},
async (inputValue: unknown) => {
if (inputValue === false) {
return false;
}
if (inputValue === '') {
modal.showInputError(t('Name_cant_be_empty'));
return false;
}
try {
await addOAuthService(inputValue);
} catch (error) {
dispatchToastMessage({ type: 'error', message: String(error) });
}
},
);
const onConfirm = async (text: string): Promise<void> => {
try {
await addOAuthService(text);
dispatchToastMessage({ type: 'success', message: t('Custom_OAuth_has_been_added') });
} catch (error) {
dispatchToastMessage({ type: 'error', message: error as Error });
} finally {
setModal(null);
}
};
setModal(<CreateOAuthModal onConfirm={onConfirm} onClose={(): void => setModal(null)} />);
};

const removeCustomOauthFactory =
(id: string): (() => void) =>
(): void => {
const close = (): void => setModal(null);
setModal(
<GenericModal
onClose={close}
onCancel={close}
title={t('Are_you_sure')}
variant='danger'
confirmText={t('Yes_delete_it')}
onConfirm={async (): Promise<void> => {
try {
await removeOAuthService(id);
dispatchToastMessage({ type: 'success', message: t('Custom_OAuth_has_been_removed') });
} catch (error) {
dispatchToastMessage({ type: 'error', message: error as Error });
} finally {
setModal(null);
}
}}
></GenericModal>,
);
};

return (
<GroupPage
_id={_id}
Expand All @@ -82,26 +96,7 @@ function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
if (sectionIsCustomOAuth(sectionName)) {
const id = s.strRight(sectionName, 'Custom OAuth: ').toLowerCase();

const handleRemoveCustomOAuthButtonClick = (): void => {
modal.open(
{
title: t('Are_you_sure'),
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: t('Yes_delete_it'),
cancelButtonText: t('Cancel'),
closeOnConfirm: true,
},
async () => {
try {
await removeOAuthService(id);
} catch (error) {
dispatchToastMessage({ type: 'error', message: String(error) });
}
},
);
};
const handleRemoveCustomOAuthButtonClick = removeCustomOauthFactory(id);

return (
<Section
Expand Down
20 changes: 11 additions & 9 deletions apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@
"Add": "Add",
"Add_agent": "Add agent",
"Add_custom_emoji": "Add custom emoji",
"Add_custom_oauth": "Add custom oauth",
"Add_custom_oauth": "Add custom OAuth",
"Add_Domain": "Add Domain",
"Add_files_from": "Add files from",
"Add_manager": "Add manager",
Expand All @@ -282,8 +282,8 @@
"add-all-to-room": "Add all users to a room",
"add-livechat-department-agents": "Add Omnichannel Agents to Departments",
"add-livechat-department-agents_description": "Permission to add omnichannel agents to departments",
"add-oauth-service": "Add Oauth Service",
"add-oauth-service_description": "Permission to add a new Oauth service",
"add-oauth-service": "Add OAuth Service",
"add-oauth-service_description": "Permission to add a new OAuth service",
"add-user": "Add User",
"add-user_description": "Permission to add new users to the server via users screen",
"add-user-to-any-c-room": "Add User to Any Public Channel",
Expand Down Expand Up @@ -1373,8 +1373,10 @@
"Custom_Field_Removed": "Custom Field Removed",
"Custom_Field_Not_Found": "Custom Field not found",
"Custom_Integration": "Custom Integration",
"Custom_OAuth_has_been_added": "Custom OAuth has been added",
"Custom_OAuth_has_been_removed": "Custom OAuth has been removed",
"Custom_oauth_helper": "When setting up your OAuth Provider, you'll have to inform a Callback URL. Use <pre>%s</pre> .",
"Custom_oauth_unique_name": "Custom oauth unique name",
"Custom_oauth_unique_name": "Custom OAuth unique name",
"Custom_Script_Logged_In": "Custom Script for Logged In Users",
"Custom_Script_Logged_In_Description": "Custom Script that will run ALWAYS and to ANY user that is logged in. e.g. (whenever you enter the chat and you are logged in)",
"Custom_Script_Logged_Out": "Custom Script for Logged Out Users",
Expand Down Expand Up @@ -2207,7 +2209,7 @@
"get-server-info": "Get server info",
"github_no_public_email": "You don't have any email as public email in your GitHub account",
"github_HEAD": "HEAD",
"Give_a_unique_name_for_the_custom_oauth": "Give a unique name for the custom oauth",
"Give_a_unique_name_for_the_custom_oauth": "Give a unique name for the custom OAuth",
"Give_the_application_a_name_This_will_be_seen_by_your_users": "Give the application a name. This will be seen by your users.",
"Global": "Global",
"Global Policy": "Global Policy",
Expand Down Expand Up @@ -2953,8 +2955,8 @@
"manage-livechat-departments_description": "Permission to manage omnichannel departments",
"manage-livechat-managers": "Manage Omnichannel Managers",
"manage-livechat-managers_description": "Permission to manage omnichannel managers",
"manage-oauth-apps": "Manage Oauth Apps",
"manage-oauth-apps_description": "Permission to manage the server Oauth apps",
"manage-oauth-apps": "Manage OAuth Apps",
"manage-oauth-apps_description": "Permission to manage the server OAuth apps",
"manage-outgoing-integrations": "Manage Outgoing Integrations",
"manage-outgoing-integrations_description": "Permission to manage the server outgoing integrations",
"manage-own-incoming-integrations": "Manage Own Incoming Integrations",
Expand Down Expand Up @@ -3740,7 +3742,7 @@
"Remove_as_moderator": "Remove as moderator",
"Remove_as_owner": "Remove as owner",
"Remove_Channel_Links": "Remove channel links",
"Remove_custom_oauth": "Remove custom oauth",
"Remove_custom_oauth": "Remove custom OAuth",
"Remove_from_room": "Remove from room",
"Remove_from_team": "Remove from team",
"Remove_last_admin": "Removing last admin",
Expand Down Expand Up @@ -4491,7 +4493,7 @@
"theme-custom-css": "Custom CSS",
"theme-font-body-font-family": "Body Font Family",
"There_are_no_agents_added_to_this_department_yet": "There are no agents added to this department yet.",
"There_are_no_applications": "No oAuth Applications have been added yet.",
"There_are_no_applications": "No OAuth Applications have been added yet.",
"There_are_no_applications_installed": "There are currently no Rocket.Chat Applications installed.",
"There_are_no_available_monitors": "There are no available monitors",
"There_are_no_departments_added_to_this_tag_yet": "There are no departments added to this tag yet",
Expand Down

0 comments on commit 2ad84c3

Please sign in to comment.