Fixes inability to delete single profiles + minor UI change - [WD-10834] #769

Kxiru · 2024-05-14T12:11:23Z

Done

"Add Profile" button now on a new line whenever there are no profiles in an instance (UI change)
Instances with single profiles can now delete the profile as long as an alternative disk device is specified, or the default disk device, overridden.
The above applies to when instances are being created and when they are being edited.
Changes have only been made to ProfileSelector.tsx.
Updated the "Delete" button and it's classname to be "Remove" for better UX.

QA

Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
- With a local copy of this branch, run as described here.
Perform the following QA steps:
- To test this fix, navigate to an existing instance -> "Edit Instance" -> View the ability to delete a single instance.
- Attempting to save an instance with no profile and no alternative disk device specified should result in an error, and an inability to save the changes.
- One can also create a new instance and view the same feature. Both the instance creation and instance editing pages have the same component.

Screenshots

webteam-app · 2024-05-14T12:11:29Z

Demo

Jenkins

demos.haus

src/sass/_forms.scss

mas-who · 2024-05-16T04:57:01Z

Thanks for the changes :) Just one small question regarding some scss update.

Just leaving the list of comments addressed based on our in person discussion for future reference:

Use css classes instead of inline styling
Instead of using <div> to create block elements, use css display: block
Instead of having align-items: start on the wrapping div, rather use align-self: start on the button element since its siblings do not need the alignments
Some discussions regarding vanilla and how the styling system works

mas-who · 2024-05-16T05:01:07Z

@Kxiru , there were some fixes from @edlerd that just got merged #771 and #772 . This is a good opportunity to rebase main.

mas-who · 2024-05-16T10:02:52Z

LGTM 👍

@piperdeck please have a design pass on this

piperdeck · 2024-05-16T13:36:49Z

This is looking great!

A couple things:

When a new profile is added, the dropdown defaults to the last profile in the list. This is especially strange behaviour given that the default profile seems to be correctly stickied to the top of the list, so a new profile will never default to the default profile until it's the last profile available. Can we make new attached profiles default to the first in the list rather than the last in the list?

CleanShot.2024-05-16.at.15.29.49.mp4

When the list of profiles overflows the viewport, I need to repeatedly scroll down in order to keep the "Add Profile" button in view. Could we make it so that it scrolls down automatically to keep the bottom of the list visible when you add a new profile?

CleanShot.2024-05-16.at.15.31.32.mp4

Kxiru · 2024-05-16T14:57:27Z

Thanks, @piperdeck for signing off on the existing work.
I can also definitely look into adding the additional amendments that you described.

@mas-who @edlerd , for the amendments, should these become a new PR, a new commit, or simply another amendment to the initial commit?

Please advise and I will get started.

mas-who · 2024-05-16T15:38:55Z

Thanks, @piperdeck for signing off on the existing work. I can also definitely look into adding the additional amendments that you described.

@mas-who @edlerd , for the amendments, should these become a new PR, a new commit, or simply another amendment to the initial commit?

Please advise and I will get started.

These changes are related to this update, so I'd keep it in the same PR.

Kxiru · 2024-05-20T15:44:55Z

Hi there, @piperdeck , I have implemented your suggestions. Do you mind reviewing the PR so I can grab that sweet Design review +1?
Thanks!

mas-who · 2024-05-22T10:02:23Z

README.md

@@ -5,15 +5,19 @@ Targets small and large scale private clouds.

 # Install

-Get the LXD snap
+1. Get the LXD snap


Why was this file changed? I think we should undo the changes here to keep the commit clean.

I might need some assistance here :')

Easiest way is probably just copy the same file content on the master branch on github and paste it into your local file.

mas-who · 2024-05-22T10:06:38Z

src/components/ScrollableContainer.tsx

@@ -38,12 +36,22 @@ const ScrollableContainer: FC<Props> = ({
    childContainer.setAttribute("style", style);
  };

+  useEffect(() => {


let's revert all the changes in ScrollableContainer as the component is used in many other places. I would put this logic in ProfileSelector and the useEffect can track the selected prop.

As a side note, an useEffect hook with no dependencies array is an anti-pattern in React and should be avoided.

mas-who · 2024-05-22T10:08:40Z

src/pages/profiles/ProfileSelector.tsx

        </div>
      ))}
      {!readOnly && (
        <Button
+          id={"addProfileButton"}


Suggested change

id={"addProfileButton"}

id="addProfileButton"

mas-who · 2024-05-22T10:08:53Z

src/pages/profiles/ProfileSelector.tsx

          disabled={unselected.length === 0}
+          className={"profile-add-btn"}


Suggested change

className={"profile-add-btn"}

className="profile-add-btn"

mas-who · 2024-05-22T10:09:19Z

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;


nice, quick and easy solution 🙂

.github/workflows/coverage.yaml

- 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]>

piperdeck · 2024-05-23T18:43:18Z

LGTM

Kxiru added Review: Design needed Review: Code needed Review: QA needed labels May 14, 2024

Kxiru assigned piperdeck May 14, 2024

Kxiru force-pushed the allow-edit-create-instance-without-profile branch 12 times, most recently from 4a5e12e to a38bd96 Compare May 14, 2024 15:17

Kxiru requested review from edlerd and mas-who May 15, 2024 09:14

Kxiru force-pushed the allow-edit-create-instance-without-profile branch 3 times, most recently from a28aeab to b1a4be8 Compare May 15, 2024 12:50

mas-who reviewed May 16, 2024

View reviewed changes

src/sass/_forms.scss Show resolved Hide resolved

mas-who added Review: QA +1 and removed Review: QA needed labels May 16, 2024

Kxiru force-pushed the allow-edit-create-instance-without-profile branch from b1a4be8 to 25293de Compare May 16, 2024 09:34

mas-who approved these changes May 16, 2024

View reviewed changes

mas-who removed the Review: Code needed label May 16, 2024

mas-who added the Review: Code +1 label May 16, 2024

Kxiru force-pushed the allow-edit-create-instance-without-profile branch 4 times, most recently from 82d8fd5 to 49e2504 Compare May 20, 2024 15:39

mas-who reviewed May 22, 2024

View reviewed changes

Kxiru force-pushed the allow-edit-create-instance-without-profile branch from 49e2504 to 324f28e Compare May 22, 2024 10:08

mas-who reviewed May 22, 2024

View reviewed changes

Kxiru force-pushed the allow-edit-create-instance-without-profile branch from 324f28e to 94aa2c6 Compare May 22, 2024 10:11

edlerd reviewed May 22, 2024

View reviewed changes

.github/workflows/coverage.yaml Outdated Show resolved Hide resolved

Kxiru force-pushed the allow-edit-create-instance-without-profile branch 2 times, most recently from eeeb06a to dbdd1a5 Compare May 22, 2024 11:10

- Fixes inability to delete single profiles

8ce0549

- 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]>

Kxiru force-pushed the allow-edit-create-instance-without-profile branch from dbdd1a5 to 8ce0549 Compare May 22, 2024 11:12

piperdeck added Review: Design +1 and removed Review: Design needed labels May 23, 2024

Kxiru merged commit 74d0169 into canonical:main May 24, 2024
12 checks passed

github-actions bot pushed a commit that referenced this pull request May 24, 2024

workflow: remove all reports for PR #769

f718e19

Kxiru deleted the allow-edit-create-instance-without-profile branch May 27, 2024 10:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes inability to delete single profiles + minor UI change - [WD-10834] #769

Fixes inability to delete single profiles + minor UI change - [WD-10834] #769

Kxiru commented May 14, 2024 •

edited

Loading

webteam-app commented May 14, 2024

mas-who commented May 16, 2024

mas-who commented May 16, 2024

mas-who commented May 16, 2024

piperdeck commented May 16, 2024

Kxiru commented May 16, 2024

mas-who commented May 16, 2024

Kxiru commented May 20, 2024

mas-who May 22, 2024

Kxiru May 22, 2024

mas-who May 22, 2024

mas-who May 22, 2024

mas-who May 22, 2024

mas-who May 22, 2024

mas-who May 22, 2024

piperdeck commented May 23, 2024

		disabled={unselected.length === 0}
		className={"profile-add-btn"}

Fixes inability to delete single profiles + minor UI change - [WD-10834] #769

Fixes inability to delete single profiles + minor UI change - [WD-10834] #769

Conversation

Kxiru commented May 14, 2024 • edited Loading

Done

QA

Screenshots

webteam-app commented May 14, 2024

mas-who commented May 16, 2024

mas-who commented May 16, 2024

mas-who commented May 16, 2024

piperdeck commented May 16, 2024

Kxiru commented May 16, 2024

mas-who commented May 16, 2024

Kxiru commented May 20, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piperdeck commented May 23, 2024

Kxiru commented May 14, 2024 •

edited

Loading