- Fixes inability to delete single profiles

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

Hide file tree

Showing 3 changed files with 75 additions and 50 deletions.
diff --git a/src/components/ScrollableContainer.tsx b/src/components/ScrollableContainer.tsx
@@ -43,7 +43,9 @@ const ScrollableContainer: FC<Props> = ({
 
   return (
     <div ref={ref} className={classnames("scrollable-container", className)}>
-      <div className="content-details">{children}</div>
+      <div id="content-details" className="content-details">
+        {children}
+      </div>
     </div>
   );
 };

diff --git a/src/pages/profiles/ProfileSelector.tsx b/src/pages/profiles/ProfileSelector.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import {
   Button,
   Icon,
@@ -38,6 +38,14 @@ const ProfileSelector: FC<Props> = ({
     queryFn: () => fetchProfiles(project),
   });
 
+  useEffect(() => {
+    const contentdetails = document.getElementById("content-details");
+
+    if (contentdetails) {
+      contentdetails.scrollTop = contentdetails.scrollHeight;
+    }
+  }, [selected]);
+
   if (isLoading) {
     return <Loader text="Loading profiles..." />;
   }
@@ -53,7 +61,7 @@ const ProfileSelector: FC<Props> = ({
   );
 
   const addProfile = () => {
-    const nextProfile = unselected.pop()?.name;
+    const nextProfile = unselected[0]?.name;
     if (nextProfile) {
       setSelected([...selected, nextProfile]);
     }
@@ -94,59 +102,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;