From d693c054832c44df1a2390e1b7805440b6af9f39 Mon Sep 17 00:00:00 2001
From: darshvaghela <darshv@carstream.co>
Date: Sat, 22 Apr 2023 15:21:47 +0530
Subject: [PATCH 1/2] Features enhancement (Disable/Enable)

---
 .../src/components/EnvComponents/Features.tsx | 32 +++++++++----------
 dashboard/src/components/InputField.tsx       |  3 +-
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/components/EnvComponents/Features.tsx b/dashboard/src/components/EnvComponents/Features.tsx
index e028a0a..6aa2a37 100644
--- a/dashboard/src/components/EnvComponents/Features.tsx
+++ b/dashboard/src/components/EnvComponents/Features.tsx
@@ -8,86 +8,90 @@ const Features = ({ variables, setVariables }: any) => {
 		<div>
 			{' '}
 			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Disable Features
+				Features
 			</Text>
 			<Stack spacing={6}>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Login Page:</Text>
+						<Text fontSize="sm">Login Page:</Text>
 					</Flex>
 					<Flex justifyContent="start">
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Email Verification:</Text>
+						<Text fontSize="sm">Email Verification:</Text>
 					</Flex>
 					<Flex justifyContent="start">
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Magic Login Link:</Text>
+						<Text fontSize="sm">Magic Login Link:</Text>
 					</Flex>
 					<Flex justifyContent="start">
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Basic Authentication:</Text>
+						<Text fontSize="sm">Basic Authentication:</Text>
 					</Flex>
 					<Flex justifyContent="start">
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Sign Up:</Text>
+						<Text fontSize="sm">Sign Up:</Text>
 					</Flex>
 					<Flex justifyContent="start" mb={3}>
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_SIGN_UP}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Strong Password:</Text>
+						<Text fontSize="sm">Strong Password:</Text>
 					</Flex>
 					<Flex justifyContent="start" mb={3}>
 						<InputField
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_STRONG_PASSWORD}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
 				<Flex alignItems="center">
 					<Flex w="100%" alignItems="baseline" flexDir="column">
-						<Text fontSize="sm">
-							Disable Multi Factor Authentication (MFA):
-						</Text>
+						<Text fontSize="sm">Multi Factor Authentication (MFA):</Text>
 						<Text fontSize="x-small">
 							Note: Enabling this will ignore Enforcing MFA shown below and will
 							also ignore the user MFA setting.
@@ -98,15 +102,10 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_MULTI_FACTOR_AUTHENTICATION}
+							is_Disable={true}
 						/>
 					</Flex>
 				</Flex>
-			</Stack>
-			<Divider paddingY={5} />
-			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
-				Enable Features
-			</Text>
-			<Stack spacing={6}>
 				<Flex alignItems="center">
 					<Flex w="100%" alignItems="baseline" flexDir="column">
 						<Text fontSize="sm">
@@ -122,6 +121,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.ENFORCE_MULTI_FACTOR_AUTHENTICATION}
+							is_Disable={false}
 						/>
 					</Flex>
 				</Flex>
diff --git a/dashboard/src/components/InputField.tsx b/dashboard/src/components/InputField.tsx
index aefe49c..2405357 100644
--- a/dashboard/src/components/InputField.tsx
+++ b/dashboard/src/components/InputField.tsx
@@ -48,6 +48,7 @@ const InputField = ({
 	fieldVisibility,
 	setFieldVisibility,
 	availableRoles,
+	is_Disable,
 	...downshiftProps
 }: any) => {
 	const props = {
@@ -398,7 +399,7 @@ const InputField = ({
 				</Text>
 				<Switch
 					size="md"
-					isChecked={variables[inputType]}
+					isChecked={is_Disable ? !variables[inputType] : variables[inputType]}
 					onChange={() => {
 						setVariables({
 							...variables,

From 3868157e1156012189ca9beb4eae06efa55abd7d Mon Sep 17 00:00:00 2001
From: darshvaghela <darshv@carstream.co>
Date: Sun, 23 Apr 2023 17:31:24 +0530
Subject: [PATCH 2/2] refactored code

---
 .../src/components/EnvComponents/Features.tsx     | 15 +++++++--------
 dashboard/src/components/InputField.tsx           |  7 +++++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/dashboard/src/components/EnvComponents/Features.tsx b/dashboard/src/components/EnvComponents/Features.tsx
index 6aa2a37..e7d86c4 100644
--- a/dashboard/src/components/EnvComponents/Features.tsx
+++ b/dashboard/src/components/EnvComponents/Features.tsx
@@ -20,7 +20,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -33,7 +33,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -46,7 +46,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -59,7 +59,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -72,7 +72,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_SIGN_UP}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -85,7 +85,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_STRONG_PASSWORD}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -102,7 +102,7 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.DISABLE_MULTI_FACTOR_AUTHENTICATION}
-							is_Disable={true}
+							hasReversedValue
 						/>
 					</Flex>
 				</Flex>
@@ -121,7 +121,6 @@ const Features = ({ variables, setVariables }: any) => {
 							variables={variables}
 							setVariables={setVariables}
 							inputType={SwitchInputType.ENFORCE_MULTI_FACTOR_AUTHENTICATION}
-							is_Disable={false}
 						/>
 					</Flex>
 				</Flex>
diff --git a/dashboard/src/components/InputField.tsx b/dashboard/src/components/InputField.tsx
index 2405357..059a87c 100644
--- a/dashboard/src/components/InputField.tsx
+++ b/dashboard/src/components/InputField.tsx
@@ -48,7 +48,8 @@ const InputField = ({
 	fieldVisibility,
 	setFieldVisibility,
 	availableRoles,
-	is_Disable,
+	// This prop is added to improve the user experience for the boolean ENV variable having `DISABLE_` prefix, as those values need to be considered in inverted form.
+	hasReversedValue,
 	...downshiftProps
 }: any) => {
 	const props = {
@@ -399,7 +400,9 @@ const InputField = ({
 				</Text>
 				<Switch
 					size="md"
-					isChecked={is_Disable ? !variables[inputType] : variables[inputType]}
+					isChecked={
+						hasReversedValue ? !variables[inputType] : variables[inputType]
+					}
 					onChange={() => {
 						setVariables({
 							...variables,