From d6ba465ac6514e2c2bb2848c222457f045747abb Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Wed, 29 Jan 2025 08:33:56 -0600
Subject: [PATCH] Check array length against explicit value to avoid displaying
 a zero on load and fixed a "key" warning.

---
 web-ui/src/pages/SettingsPage.jsx             |  22 ++--
 .../__snapshots__/SettingsPage.test.jsx.snap  | 124 +++++++++---------
 2 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/web-ui/src/pages/SettingsPage.jsx b/web-ui/src/pages/SettingsPage.jsx
index 16aca3e42a..595da98251 100644
--- a/web-ui/src/pages/SettingsPage.jsx
+++ b/web-ui/src/pages/SettingsPage.jsx
@@ -61,9 +61,6 @@ const SettingsPage = () => {
     }
   }, [state, csrf]);
 
-  // For specific settings, add a handleFunction to the settings object.
-  // Format should be handleSetting and then add it to the handlers object
-  // with the setting name as the key.
   const handleLogoUrl = file => {
     if (csrf) {
       // TODO: Need to upload the file to a storage bucket...
@@ -200,17 +197,20 @@ const SettingsPage = () => {
         } else {
           categories[info.category] = true;
           return (
-            <>
-            <Typography data-testid={info.category}
-                        variant="h4"
-                        sx={{textDecoration: 'underline'}}
-                        display="inline">{titleCase(info.category)}</Typography>
-            <Component key={index} {...info} />
-            </>
+            <div key={index}>
+              <Typography data-testid={info.category}
+                          variant="h4"
+                          sx={{textDecoration: 'underline'}}
+                          display="inline">{titleCase(info.category)}
+              </Typography>
+              <Component {...info} />
+            </div>
           );
         }
       })}
-      {settingsControls && settingsControls.length &&
+      {// Check length against an explicit value.  If length is zero, it will
+       // be displayed instead of evaluated to false.
+       settingsControls && settingsControls.length > 0 &&
        selectHasAdministerSettingsPermission(state) &&
       <div className="buttons">
         <Button
diff --git a/web-ui/src/pages/__snapshots__/SettingsPage.test.jsx.snap b/web-ui/src/pages/__snapshots__/SettingsPage.test.jsx.snap
index 1f12b26cb4..2f6991cdd1 100644
--- a/web-ui/src/pages/__snapshots__/SettingsPage.test.jsx.snap
+++ b/web-ui/src/pages/__snapshots__/SettingsPage.test.jsx.snap
@@ -13,77 +13,81 @@ exports[`SettingsPage > renders correctly 1`] = `
   <div
     class="settings-page"
   >
-    <h4
-      class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
-      data-testid="INTEGRATIONS"
-    >
-      Integrations
-    </h4>
-    <div
-      class="settings-type"
-    >
-      <label
-        for="another-setting"
+    <div>
+      <h4
+        class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
+        data-testid="INTEGRATIONS"
       >
-        <h5
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
-        >
-          Another Setting
-        </h5>
-      </label>
-      <p>
-        The description
-      </p>
-      <span
-        class="MuiSwitch-root MuiSwitch-sizeMedium settings-control css-julti5-MuiSwitch-root"
+        Integrations
+      </h4>
+      <div
+        class="settings-type"
       >
+        <label
+          for="another-setting"
+        >
+          <h5
+            class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
+          >
+            Another Setting
+          </h5>
+        </label>
+        <p>
+          The description
+        </p>
         <span
-          class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
+          class="MuiSwitch-root MuiSwitch-sizeMedium settings-control css-julti5-MuiSwitch-root"
         >
-          <input
-            class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
-            id="another-setting"
-            type="checkbox"
-          />
           <span
-            class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
+          >
+            <input
+              class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+              id="another-setting"
+              type="checkbox"
+            />
+            <span
+              class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+            />
+          </span>
+          <span
+            class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
           />
         </span>
-        <span
-          class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
-        />
-      </span>
+      </div>
     </div>
-    <h4
-      class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
-      data-testid="THEME"
-    >
-      Theme
-    </h4>
-    <div
-      class="settings-type"
-    >
-      <label
-        for="other-setting"
+    <div>
+      <h4
+        class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
+        data-testid="THEME"
       >
-        <h5
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
-        >
-          Other Setting
-        </h5>
-      </label>
-      <p>
-        The description
-      </p>
+        Theme
+      </h4>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary settings-control css-bz5ng3-MuiInputBase-root-MuiInput-root"
+        class="settings-type"
       >
-        <input
-          class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
-          id="other-setting"
-          type="number"
-          value="42"
-        />
+        <label
+          for="other-setting"
+        >
+          <h5
+            class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
+          >
+            Other Setting
+          </h5>
+        </label>
+        <p>
+          The description
+        </p>
+        <div
+          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary settings-control css-bz5ng3-MuiInputBase-root-MuiInput-root"
+        >
+          <input
+            class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
+            id="other-setting"
+            type="number"
+            value="42"
+          />
+        </div>
       </div>
     </div>
     <div