Fixes inability to delete single profiles + minor UI change

Signed-off-by: Nkeiruka <[email protected]>
canonical · May 14, 2024 · a38bd96 · a38bd96
1 parent 8102f9d
commit a38bd96
Showing 1 changed file with 56 additions and 50 deletions.
diff --git a/src/pages/profiles/ProfileSelector.tsx b/src/pages/profiles/ProfileSelector.tsx
@@ -94,64 +94,70 @@ 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 style={{ display: "flex", alignItems: "start" }}>
+            {!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-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 down"
+                  title="move profile down"
+                  disabled={index === selected.length - 1}
                 >
-                  Delete
+                  <Icon name="chevron-down" />
                 </Button>
-              )}
-            </div>
-          )}
+              </div>
+            )}
+
+            {!readOnly && (
+              <Button
+                appearance="link"
+                className="profile-delete-btn"
+                onClick={() =>
+                  setSelected(selected.filter((item) => item !== value))
+                }
+                type="button"
+              >
+                Delete
+              </Button>
+            )}
+          </div>
         </div>
       ))}
       {!readOnly && (
-        <Button
-          disabled={unselected.length === 0}
-          onClick={addProfile}
-          type="button"
-        >
-          Add profile
-        </Button>
+        <div>
+          <Button
+            disabled={unselected.length === 0}
+            onClick={addProfile}
+            type="button"
+          >
+            Add profile
+          </Button>
+        </div>
       )}
     </>
   );