Fixes inability to delete single profiles + minor UI change

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

Hide file tree

Showing 2 changed files with 70 additions and 54 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,12 +120,13 @@
     }
   }
 
-  @media screen and (width <= 1400px) {
+  @media screen and (width <=1400px) {
+
     .cpu-limit-label,
     .memory-limit-label {
       display: block !important;
 
-      > * {
+      >* {
         margin-right: 0 !important;
       }
     }
@@ -126,7 +136,7 @@
     max-width: 54rem;
   }
 
-  .read-only .monaco-editor .cursors-layer > .cursor {
+  .read-only .monaco-editor .cursors-layer>.cursor {
     display: none !important;
   }
 
@@ -136,7 +146,7 @@
     align-items: flex-end;
     display: flex;
 
-    > * {
+    >* {
       margin-bottom: $spv--large;
       margin-right: $sph--x-large;
     }
@@ -161,7 +171,7 @@
   }
 
   .snapshot-schedule {
-    > * {
+    >* {
       margin-bottom: $spv--large;
     }
   }
@@ -197,7 +207,7 @@
   }
 
   .checkbox-label-tooltip {
-    > span {
+    >span {
       display: inherit !important;
       margin-left: $sph--x-small;
     }
@@ -221,7 +231,7 @@
 }
 
 .image-select-modal {
-  > section {
+  >section {
     min-height: 100%;
   }
 
@@ -288,6 +298,7 @@
   }
 
   @include large {
+
     .search-image,
     .iso-btn {
       margin-top: calc(2.5rem + 3px);
@@ -352,4 +363,4 @@
     margin-top: 1rem;
     max-width: 70.5rem;
   }
-}
+}