Fixes inability to delete single profiles + minor UI change

Signed-off-by: Nkeiruka <[email protected]>
canonical · May 15, 2024 · b1a4be8 · b1a4be8
1 parent 8102f9d
commit b1a4be8
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 49 deletions.
diff --git a/src/pages/profiles/ProfileSelector.tsx b/src/pages/profiles/ProfileSelector.tsx
@@ -94,59 +94,64 @@ const ProfileSelector: FC<Props> = ({
               title={title}
             ></Select>
           </div>
-          {!readOnly && (index > 0 || selected.length > 1) && (
-            <div>
-              <Button
-                appearance="link"
-                className="profile-action-btn"
-                onClick={() => {
-                  const newSelection = [...selected];
-                  newSelection.splice(index, 1);
-                  newSelection.splice(index - 1, 0, value);
-                  setSelected(newSelection);
-                }}
-                type="button"
-                aria-label="move profile up"
-                title="move profile up"
-                disabled={index === 0}
-              >
-                <Icon name="chevron-up" />
-              </Button>
-              <Button
-                appearance="link"
-                className="profile-action-btn"
-                onClick={() => {
-                  const newSelection = [...selected];
-                  newSelection.splice(index, 1);
-                  newSelection.splice(index + 1, 0, value);
-                  setSelected(newSelection);
-                }}
-                type="button"
-                aria-label="move profile down"
-                title="move profile down"
-                disabled={index === selected.length - 1}
-              >
-                <Icon name="chevron-down" />
-              </Button>
-              {index > 0 && (
+
+          <div className="profile-actions">
+            {!readOnly && (index > 0 || selected.length > 1) && (
+              <div>
                 <Button
                   appearance="link"
-                  className="profile-delete-btn"
-                  onClick={() =>
-                    setSelected(selected.filter((item) => item !== value))
-                  }
+                  className="profile-action-btn"
+                  onClick={() => {
+                    const newSelection = [...selected];
+                    newSelection.splice(index, 1);
+                    newSelection.splice(index - 1, 0, value);
+                    setSelected(newSelection);
+                  }}
                   type="button"
+                  aria-label="move profile up"
+                  title="move profile up"
+                  disabled={index === 0}
                 >
-                  Delete
+                  <Icon name="chevron-up" />
                 </Button>
-              )}
-            </div>
-          )}
+                <Button
+                  appearance="link"
+                  className="profile-action-btn"
+                  onClick={() => {
+                    const newSelection = [...selected];
+                    newSelection.splice(index, 1);
+                    newSelection.splice(index + 1, 0, value);
+                    setSelected(newSelection);
+                  }}
+                  type="button"
+                  aria-label="move profile down"
+                  title="move profile down"
+                  disabled={index === selected.length - 1}
+                >
+                  <Icon name="chevron-down" />
+                </Button>
+              </div>
+            )}
+
+            {!readOnly && (
+              <Button
+                appearance="link"
+                className="profile-remove-btn"
+                onClick={() =>
+                  setSelected(selected.filter((item) => item !== value))
+                }
+                type="button"
+              >
+                Remove
+              </Button>
+            )}
+          </div>
         </div>
       ))}
       {!readOnly && (
         <Button
           disabled={unselected.length === 0}
+          className={"profile-add-btn"}
           onClick={addProfile}
           type="button"
         >

diff --git a/src/sass/_forms.scss b/src/sass/_forms.scss
@@ -81,14 +81,23 @@
       }
     }
 
-    .profile-action-btn {
-      margin-right: $sph--large;
+    .profile-actions {
+      display: flex;
+
+      .profile-action-btn {
+        margin-right: $sph--large;
+      }
     }
 
-    .profile-delete-btn {
+    .profile-remove-btn {
+      align-self: flex-start;
       margin-left: $sph--large;
     }
 
+    .profile-add-btn {
+      display: block;
+    }
+
     .delete-device {
       margin-top: $spv--x-large;
     }
@@ -111,9 +120,8 @@
     }
   }
 
-  @media screen and (width <= 1400px) {
-    .cpu-limit-label,
-    .memory-limit-label {
+  @media screen and (width <=1400px) {
+    .cpu-limit-label .memory-limit-label {
       display: block !important;
 
       > * {