- Fixes inability to delete single profiles

- Minor UI and scss changes - Profile dropdown defaults to the first profile in the list - Scrolllbar 'follows' new additions of profiles. Signed-off-by: Nkeiruka <[email protected]>
canonical · May 22, 2024 · eeeb06a · eeeb06a
1 parent 6e2b8c9
commit eeeb06a
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 52 deletions.
diff --git a/src/components/ScrollableContainer.tsx b/src/components/ScrollableContainer.tsx
@@ -4,7 +4,6 @@ import {
   getAbsoluteHeightBelowById,
   getParentsBottomSpacing,
 } from "util/helpers";
-import classnames from "classnames";
 
 interface Props {
   children: ReactNode;
@@ -17,7 +16,6 @@ const ScrollableContainer: FC<Props> = ({
   dependencies,
   children,
   belowIds = ["status-bar"],
-  className,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -38,12 +36,22 @@ const ScrollableContainer: FC<Props> = ({
     childContainer.setAttribute("style", style);
   };
 
+  useEffect(() => {
+    const contentdetails = document.getElementById("content-details");
+
+    if (contentdetails) {
+      contentdetails.scrollTop = contentdetails.scrollHeight;
+    }
+  });
+
   useEventListener("resize", updateChildContainerHeight);
   useEffect(updateChildContainerHeight, [...dependencies, ref]);
 
   return (
-    <div ref={ref} className={classnames("scrollable-container", className)}>
-      <div className="content-details">{children}</div>
+    <div ref={ref} className={"scrollable-container"}>
+      <div id="content-details" className="content-details">
+        {children}
+      </div>
     </div>
   );
 };

diff --git a/src/pages/profiles/ProfileSelector.tsx b/src/pages/profiles/ProfileSelector.tsx
@@ -53,7 +53,7 @@ const ProfileSelector: FC<Props> = ({
   );
 
   const addProfile = () => {
-    const nextProfile = unselected.pop()?.name;
+    const nextProfile = unselected[0]?.name;
     if (nextProfile) {
       setSelected([...selected, nextProfile]);
     }
@@ -94,59 +94,65 @@ 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
+          id={"addProfileButton"}
           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,7 +120,7 @@
     }
   }
 
-  @media screen and (width <= 1400px) {
+  @media screen and (width <=1400px) {
     .cpu-limit-label,
     .memory-limit-label {
       display: block !important;