Skip to content

Commit

Permalink
EPMRPP-96981 || address PR comments and update component styles
Browse files Browse the repository at this point in the history
  • Loading branch information
iso9000t committed Nov 20, 2024
1 parent 0e5dc17 commit faac704
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 68 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@

.github-auth-form {
position: relative;
margin-bottom: 33px;
margin-bottom: 30px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,22 @@
* limitations under the License.
*/

import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { defineMessages, useIntl } from 'react-intl';
import classNames from 'classnames/bind';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { InputBigSwitcher } from 'components/inputs/inputBigSwitcher';
import { SectionHeader } from 'components/main/sectionHeader';
import { ADMIN_SERVER_SETTINGS_PAGE_EVENTS } from 'components/main/analytics/events';
import { FormField } from 'components/fields/formField';
import { ENABLED_KEY } from 'pages/admin/serverSettingsPage/common/constants';
import { ssoUsersOnlySelector, fetchAppInfoAction } from 'controllers/appInfo';
import formStyles from 'pages/admin/serverSettingsPage/common/formController/formController.scss';
import './ssoUsersForm.scss';
import styles from './ssoUsersForm.scss';

const formCx = classNames.bind(formStyles);
const cx = classNames.bind(styles);

const localMessages = defineMessages({
const messages = defineMessages({
switcherLabel: {
id: 'SsoUsersForm.switcherLabel',
defaultMessage: 'SSO users only',
Expand All @@ -42,67 +40,61 @@ const localMessages = defineMessages({
},
});

function SsoUsersFormComponent({ initialize, enabled, fetchAppInfo }) {
const SsoUsersFormComponent = ({ enabled: enabledFromStore, fetchAppInfo }) => {
const { formatMessage } = useIntl();
const [enabled, setEnabled] = useState(enabledFromStore);
const inputId = 'ssoUsersToggle';

useEffect(() => {
fetchAppInfo();
}, [fetchAppInfo]);

useEffect(() => {
initialize({ [ENABLED_KEY]: enabled });
}, [initialize, enabled]);
setEnabled(enabledFromStore);
}, [enabledFromStore]);

const renderToggle = ({ input }) => (
<InputBigSwitcher
value={input.value}
onChange={input.onChange}
mobileDisabled
onChangeEventInfo={ADMIN_SERVER_SETTINGS_PAGE_EVENTS.SSO_USERS_SWITCHER}
/>
);

const getCustomBlockText = () => {
const getDescription = () => {
return enabled
? 'New users can be created via SSO only.'
: 'Users can manually send invitations for other users. If enabled new users can be created via SSO only.';
};

const handleToggle = (value) => {
setEnabled(value);
};

return (
<div className={formCx('form-controller')}>
<div className={formCx('heading-wrapper')}>
<SectionHeader text={formatMessage(localMessages.formHeader)} />
<SectionHeader text={formatMessage(messages.formHeader)} />
</div>
<div className={formCx('form')}>
<FormField
name={ENABLED_KEY}
label={formatMessage(localMessages.switcherLabel)}
labelClassName={formCx('label')}
format={Boolean}
parse={Boolean}
customBlock={{
wrapperClassName: 'custom-text-wrapper',
node: (
<span
className={`custom-span-class ${
enabled ? 'enabled-description' : 'disabled-description'
}`}
>
{getCustomBlockText()}
</span>
),
}}
>
<Field name={ENABLED_KEY} component={renderToggle} />
</FormField>
<div className={cx('form-group')}>
<label htmlFor={inputId} className={cx('form-group-label')}>
{formatMessage(messages.switcherLabel)}
</label>
<div className={cx('form-group-content')}>
<div className={cx('input-container')}>
<InputBigSwitcher
id={inputId}
value={enabled}
onChange={handleToggle}
mobileDisabled
onChangeEventInfo={ADMIN_SERVER_SETTINGS_PAGE_EVENTS.SSO_USERS_SWITCHER}
/>
<div className={cx('description')} aria-live="polite">
{getDescription()}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
};

SsoUsersFormComponent.propTypes = {
enabled: PropTypes.bool,
initialize: PropTypes.func.isRequired,
fetchAppInfo: PropTypes.func.isRequired,
};

Expand All @@ -118,9 +110,4 @@ const mapDispatchToProps = {
fetchAppInfo: fetchAppInfoAction,
};

const ReduxWrappedForm = reduxForm({
form: 'SsoUsersForm',
enableReinitialize: true,
})(SsoUsersFormComponent);

export const SsoUsersForm = connect(mapStateToProps, mapDispatchToProps)(ReduxWrappedForm);
export const SsoUsersForm = connect(mapStateToProps, mapDispatchToProps)(SsoUsersFormComponent);
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,68 @@
* limitations under the License.
*/

:global {
.custom-text-wrapper {
width: 100%;
max-width: 700px;
padding-left: 0;
}

.form-field {
.form-group {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-bottom: 25px;

@media (max-width: $SCREEN_XS_MAX) {
flex-direction: column;
align-items: flex-start;
margin-bottom: 15px;
}
}

.custom-span-class {
display: block;
font-size: 12px;
line-height: 1.5;
color: $COLOR--gray-60;
margin-left: 9px;
width: 300px;
.form-group-label {
min-width: 210px;
width: 210px;
padding-right: 4px;
text-align: right;
font-size: 13px;
line-height: 13px;
color: $COLOR--charcoal-grey;
box-sizing: border-box;

@media (max-width: $SCREEN_SM_MAX) {
min-width: 150px;
width: 150px;
}
@media (max-width: $SCREEN_XS_MAX) {
width: 100%;
margin-bottom: 8px;
padding: 0;
text-align: left;
}
}

.form-group-content {
flex: 1;
padding: 0 15px;

.enabled-description {
margin-top: 0;
@media (max-width: $SCREEN_XS_MAX) {
padding: 0;
width: 100%;
}
}

.disabled-description {
margin-top: 13px;
.input-container {
display: flex;
align-items: center;
gap: 15px;
min-height: 36px;

@media (max-width: $SCREEN_XS_MAX) {
flex-direction: column;
align-items: flex-start;
}
}

.description {
width: 300px;
font-size: 12px;
line-height: 1.5;
color: $COLOR--gray-60;
}

0 comments on commit faac704

Please sign in to comment.