review: review changes

Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 13, 2025 · eba7f20 · eba7f20
1 parent 77e3ea9
commit eba7f20
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 79 deletions.
diff --git a/src/components/ConfigurationRow.tsx b/src/components/ConfigurationRow.tsx
@@ -75,6 +75,22 @@ export const getConfigurationRow = ({
     }
   };
 
+  const isDisabled = () => {
+    return disabled || !!formik.values.editRestriction;
+  };
+
+  const getDisabledReasonOrTitle = (title?: string) => {
+    if (formik.values.editRestriction) {
+      return formik.values.editRestriction;
+    }
+
+    if (disabledReason) {
+      return disabledReason;
+    }
+
+    return title;
+  };
+
   const getForm = (): ReactNode => {
     return (
       <div className="override-form">
@@ -86,7 +102,7 @@ export const getConfigurationRow = ({
               onBlur: formik.handleBlur,
               onChange: formik.handleChange,
               value,
-              disabled: disabled || !!formik.values.editRestriction,
+              disabled: isDisabled(),
               help: (
                 <ConfigFieldDescription
                   description={
@@ -104,10 +120,8 @@ export const getConfigurationRow = ({
           onClick={toggleDefault}
           type="button"
           appearance="base"
-          title={
-            formik.values.editRestriction ?? disabledReason ?? "Clear override"
-          }
-          disabled={disabled || !!formik.values.editRestriction}
+          title={getDisabledReasonOrTitle("Clear override")}
+          disabled={isDisabled()}
           hasIcon
           className="u-no-margin--bottom"
         >
@@ -126,12 +140,9 @@ export const getConfigurationRow = ({
   );
 
   const wrapDisabledTooltip = (children: ReactNode): ReactNode => {
-    if ((disabled && disabledReason) || formik.values.editRestriction) {
+    if (disabledReason || formik.values.editRestriction) {
       return (
-        <Tooltip
-          message={formik.values.editRestriction ?? disabledReason}
-          position="right"
-        >
+        <Tooltip message={getDisabledReasonOrTitle()} position="right">
           {children}
         </Tooltip>
       );
@@ -141,16 +152,6 @@ export const getConfigurationRow = ({
 
   const renderOverride = (): ReactNode => {
     if (formik.values.readOnly) {
-      const getTitle = () => {
-        if (formik.values.editRestriction) {
-          return formik.values.editRestriction;
-        }
-        if (disabled) {
-          return disabledReason;
-        }
-
-        return isOverridden ? "Edit" : "Create override";
-      };
       return (
         <>
           {overrideValue}
@@ -165,8 +166,10 @@ export const getConfigurationRow = ({
             className="u-no-margin--bottom"
             type="button"
             appearance="base"
-            title={getTitle()}
-            disabled={disabled || !!formik.values.editRestriction}
+            title={getDisabledReasonOrTitle(
+              isOverridden ? "Edit" : "Create override",
+            )}
+            disabled={isDisabled()}
             hasIcon
           >
             <Icon name="edit" />
@@ -182,7 +185,7 @@ export const getConfigurationRow = ({
         onClick={toggleDefault}
         className="u-no-margin--bottom"
         type="button"
-        disabled={disabled || !!formik.values.editRestriction}
+        disabled={isDisabled()}
         appearance="base"
         title={formik.values.editRestriction ?? "Create override"}
         hasIcon

diff --git a/src/components/forms/FormSubmitBtn.tsx b/src/components/forms/FormSubmitBtn.tsx
@@ -17,14 +17,8 @@ const FormSubmitBtn: FC<Props> = ({ formik, disabled, isYaml = false }) => {
     <ActionButton
       appearance="positive"
       loading={formik.isSubmitting}
-      disabled={
-        !formik.isValid ||
-        disabled ||
-        changeCount === 0 ||
-        !!formik.values.editRestriction
-      }
+      disabled={!formik.isValid || disabled || changeCount === 0}
       onClick={() => void formik.submitForm()}
-      title={formik.values.editRestriction}
     >
       {changeCount === 0 || isYaml
         ? "Save changes"

diff --git a/src/components/forms/InheritedDeviceRow.tsx b/src/components/forms/InheritedDeviceRow.tsx
@@ -83,46 +83,47 @@ export const getInheritedDeviceRow = ({
         )}
       </div>
     ),
-    override:
-      readOnly || disabledReason ? (
-        overrideValue ? (
-          <div className="mono-font">
-            <b>{overrideValue}</b>
-          </div>
-        ) : (
-          ""
-        )
-      ) : overrideValue ? (
-        <div className="override-form">
-          <div>{overrideForm}</div>
-          {clearOverride && (
-            <div>
-              <Button
-                onClick={clearOverride}
-                type="button"
-                appearance="base"
-                title="Clear override"
-                hasIcon
-                className="u-no-margin--bottom"
-              >
-                <Icon name="close" className="clear-configuration-icon" />
-              </Button>
-            </div>
-          )}
+    override: readOnly ? (
+      overrideValue ? (
+        <div className="mono-font">
+          <b>{overrideValue}</b>
         </div>
       ) : (
-        addOverride && (
-          <Button
-            onClick={addOverride}
-            type="button"
-            appearance="base"
-            title="Create override"
-            className="u-no-margin--bottom"
-            hasIcon
-          >
-            <Icon name="edit" />
-          </Button>
-        )
-      ),
+        ""
+      )
+    ) : overrideValue ? (
+      <div className="override-form">
+        <div>{overrideForm}</div>
+        {clearOverride && (
+          <div>
+            <Button
+              onClick={clearOverride}
+              type="button"
+              appearance="base"
+              title={disabledReason ?? "Clear override"}
+              hasIcon
+              className="u-no-margin--bottom"
+              disabled={!!disabledReason}
+            >
+              <Icon name="close" className="clear-configuration-icon" />
+            </Button>
+          </div>
+        )}
+      </div>
+    ) : (
+      addOverride && (
+        <Button
+          onClick={addOverride}
+          type="button"
+          appearance="base"
+          title={disabledReason ?? "Create override"}
+          className="u-no-margin--bottom"
+          hasIcon
+          disabled={!!disabledReason}
+        >
+          <Icon name="edit" />
+        </Button>
+      )
+    ),
   });
 };
diff --git a/src/components/forms/NetworkDevicesForm.tsx b/src/components/forms/NetworkDevicesForm.tsx
@@ -258,13 +258,8 @@ or remove the originating item"
               }}
               type="button"
               hasIcon
-              disabled={
-                !!formik.values.editRestriction || !managedNetworks.length
-              }
-              title={
-                formik.values.editRestriction ??
-                (!managedNetworks.length ? "No networks available" : "")
-              }
+              disabled={!!formik.values.editRestriction}
+              title={formik.values.editRestriction}
             >
               <Icon name="plus" />
               <span>Attach network</span>

diff --git a/src/components/forms/ProxyDeviceForm.tsx b/src/components/forms/ProxyDeviceForm.tsx
@@ -108,9 +108,7 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
           options={options}
           help={<ConfigFieldDescription description={help} />}
           className="u-no-margin--bottom"
-          disabled={
-            disabledText != undefined || !!formik.values.editRestriction
-          }
+          disabled={!!disabledText || !!formik.values.editRestriction}
           title={formik.values.editRestriction ?? disabledText}
         />
       ),