From faac704316d50726ee563be3ac12d931d276c202 Mon Sep 17 00:00:00 2001
From: iso9000t <119494473+iso9000t@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:27:25 +0400
Subject: [PATCH] EPMRPP-96981 || address PR comments and update component
 styles

---
 .../forms/githubAuthForm/githubAuthForm.scss  |  2 +-
 .../forms/ssoUsersForm/ssoUsersForm.jsx       | 85 ++++++++-----------
 .../forms/ssoUsersForm/ssoUsersForm.scss      | 73 ++++++++++++----
 3 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/githubAuthForm/githubAuthForm.scss b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/githubAuthForm/githubAuthForm.scss
index 5da8212417..61cbacd31f 100644
--- a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/githubAuthForm/githubAuthForm.scss
+++ b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/githubAuthForm/githubAuthForm.scss
@@ -16,5 +16,5 @@
 
 .github-auth-form {
   position: relative;
-  margin-bottom: 33px;
+  margin-bottom: 30px;
 }
diff --git a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx
index 9315649665..562c4dd873 100644
--- a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx
+++ b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx
@@ -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',
@@ -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,
 };
 
@@ -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);
diff --git a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss
index a5c351e805..72a77cfd68 100644
--- a/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss
+++ b/app/src/pages/admin/serverSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss
@@ -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;
+}
\ No newline at end of file