Improve package selection Web UI workflow #1665

Racer159 · 2023-05-01T20:39:30Z

Is your feature request related to a problem? Please describe.

Our package selection workflow in the UI is a bit slow due to searching the entire home directory at one time.

Describe the solution you'd like

Recommend the following changes:

For 'init' package deployment

in the selection window, only show init packages that exist in the three places that Zarf searches for them:
- Current Working Directory
- Zarf Binary Directory
- Home .zarf-cache folder
- If a user selects an init package that does not match the current zarf version - show an error message (this needs to exist in CLI too)

Regular Package Deployment

For 'regular' packages - the UX flow proceeds in two parts:

Search # 1.
- Search and show packages located in the current working directory w/o subdirectories (matching the tab behavior on zarf package deploy)
- If packages are found show in the table and add a expand search button to table that executes search # 2
- If no packages are found - show no package found error message (gives the user option to cancel deployment or proceed to part # 2
search part # 2
- Search and show packages located in the entire home directory
- Exclude trash
- Exclude hidden folders
For both workflows, increase the height of the package selection table to show more packages at once

Design File

https://www.figma.com/file/MUItIzpzLBLuIyt225Bwgl/Zarf-Web-Ui?type=design&node-id=1544%3A56348&t=JeB5xVvOb7lcP6ZB-1

The text was updated successfully, but these errors were encountered:

… update FindInitPackage to use the version name and to look in execution, cache directory, and the current working directory. Update io.go with a FileList method that reads a directory and returns a list of filepaths matched against an optional regex.

…er for packages with the /packages/explore route.

Madeline-UX · 2023-05-17T20:49:17Z

@Racer159 - I updated this issue to discuss a new UX flow for searching for zarf packages. I changed a few things:

Instead of hiding init packages that do not match current zarf version we should provide a warning on deployment that informs them of the risk.
Additionally if that behavior is in the web UI it probably should also be added to the CLI

Racer159 · 2023-05-17T23:01:41Z

Not sure I agree with showing all init packages since that may be more dangerous then helpful - we pair them together because the init package contains the Zarf agent which can have breaking changes between versions and might break a cluster deployment in weird ways that would be hard to debug.

Madeline-UX · 2023-05-17T23:11:50Z

Is that a current behavior in the CLI as well?
What if the user wants to use a old version of the init package because that is what they have on their machine?
How can we guarantee a user got a new init package when they updated Zarf? (ex. disconnected user gets new zarf binary but not new init package and needs to destroy and reboot entire cluster and resources) Is this a failure?

Madeline-UX · 2023-05-18T17:29:03Z

Design is finalized and ready in Figma

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

…query param init: boolean and recursively streams packages from the users home folder (init packages when init = true). Update utils io.go with IsTrashBin method that takes in a directory path and checks if it is the os trash bin. Updat the ui server with new packages/find/stream routes. Update frontend api with new routes and method for recursively streaming packages. TODO: add the expanded search button and logic.. Handle warnings for init packages that dont match the executable version.

…unctionality.

…es found

…eList; Extracted hidded directory check into IsHidden utility method; Removed unused FileList method. Update all references to RecursiveFileList references to nolonger have the unused flags. Update api/packages find.go: Removed the initPackagesPattern and replaced references with currentInitPattern; Update recursivePackageStream to ignore hidden directories as well as the Trash folder.

…rch again after expanded search has been run.

…not found in cwd

…eList; Extracted hidded directory check into IsHidden utility method; Removed unused FileList method. Update all references to RecursiveFileList references to nolonger have the unused flags. Update api/packages find.go: Removed the initPackagesPattern and replaced references with currentInitPattern; Update recursivePackageStream to ignore hidden directories as well as the Trash folder.

…rch again after expanded search has been run.

…not found in cwd

… update FindInitPackage to use the version name and to look in execution, cache directory, and the current working directory. Update io.go with a FileList method that reads a directory and returns a list of filepaths matched against an optional regex.

…er for packages with the /packages/explore route.

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

…query param init: boolean and recursively streams packages from the users home folder (init packages when init = true). Update utils io.go with IsTrashBin method that takes in a directory path and checks if it is the os trash bin. Updat the ui server with new packages/find/stream routes. Update frontend api with new routes and method for recursively streaming packages. TODO: add the expanded search button and logic.. Handle warnings for init packages that dont match the executable version.

…unctionality.

…es found

…eList; Extracted hidded directory check into IsHidden utility method; Removed unused FileList method. Update all references to RecursiveFileList references to nolonger have the unused flags. Update api/packages find.go: Removed the initPackagesPattern and replaced references with currentInitPattern; Update recursivePackageStream to ignore hidden directories as well as the Trash folder.

…rch again after expanded search has been run.

…not found in cwd

… update FindInitPackage to use the version name and to look in execution, cache directory, and the current working directory. Update io.go with a FileList method that reads a directory and returns a list of filepaths matched against an optional regex.

…er for packages with the /packages/explore route.

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

…query param init: boolean and recursively streams packages from the users home folder (init packages when init = true). Update utils io.go with IsTrashBin method that takes in a directory path and checks if it is the os trash bin. Updat the ui server with new packages/find/stream routes. Update frontend api with new routes and method for recursively streaming packages. TODO: add the expanded search button and logic.. Handle warnings for init packages that dont match the executable version.

…unctionality.

…es found

…eList; Extracted hidded directory check into IsHidden utility method; Removed unused FileList method. Update all references to RecursiveFileList references to nolonger have the unused flags. Update api/packages find.go: Removed the initPackagesPattern and replaced references with currentInitPattern; Update recursivePackageStream to ignore hidden directories as well as the Trash folder.

…rch again after expanded search has been run.

…not found in cwd

## Is your feature request related to a problem? Please describe. Our package selection workflow in the UI is a bit slow due to searching the entire home directory at one time. ## Describe the solution you'd like Recommend the following changes: ### For 'init' package deployment - [x] in the selection window, only show init packages that exist in the three places that Zarf searches for them: - Current Working Directory - Zarf Binary Directory - Home `.zarf-cache` folder - Only show init packages that match the current build version. ### Regular Package Deployment For 'regular' packages - the UX flow proceeds in two parts: - [x] Search # 1. - Search and show packages located in the current working directory w/o subdirectories (matching the tab behavior on `zarf package deploy`) - If packages are found show in the table and add a expand search button to table that executes search # 2 - If no packages are found - show no package found error message (gives the user option to cancel deployment or proceed to part # 2 - [x] search part # 2 - Search and show packages located in the entire home directory - Exclude trash - Exclude hidden folders - [x] For both workflows, increase the height of the package selection table to show more packages at once ## Design File https://www.figma.com/file/MUItIzpzLBLuIyt225Bwgl/Zarf-Web-Ui?type=design&node-id=1544%3A56348&t=JeB5xVvOb7lcP6ZB-1 ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) --------- Co-authored-by: Wayne Starr <[email protected]>

Racer159 added the UI label May 1, 2023

YrrepNoj added this to Zarf Project Board May 1, 2023

Racer159 added the ux label May 1, 2023

Racer159 added this to the v0.27 (m1-5.9) milestone May 1, 2023

Racer159 added the enhancement ✨ New feature or request label May 1, 2023

mike-winberry added a commit that referenced this issue May 2, 2023

Increase timeout to complete tests. Should be shorter after #1665

6c14e9c

mike-winberry self-assigned this May 5, 2023

mike-winberry linked a pull request May 9, 2023 that will close this issue

#1665. Improve Package Selection #1687

Merged

6 tasks

mike-winberry mentioned this issue May 9, 2023

#1665. Improve Package Selection #1687

Merged

6 tasks

mike-winberry added a commit that referenced this issue May 10, 2023

#1665. Created file explorer and implemented logic for exploring fold…

34172c5

…er for packages with the /packages/explore route.

mike-winberry added a commit that referenced this issue May 10, 2023

#1665. Remove unnecessary declaration

07eeb01

Racer159 modified the milestones: v0.27 (m1-5.9), v0.27 (m2-5.16), v0.27 (m1-5.16), v0.27 (m3-5.30) May 10, 2023

mike-winberry added a commit that referenced this issue May 31, 2023

#1665. Removed the explorer logic from the api and ui.

b1cf649

mike-winberry added a commit that referenced this issue Jun 1, 2023

#1665. Updated find and the ui local package table to stream in resul…

d7b10fc

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

mike-winberry added a commit that referenced this issue Jun 2, 2023

#1665. Updated ui local-package-table to handle the expanded search f…

21a1a66

…unctionality.

mike-winberry added a commit that referenced this issue Jun 2, 2023

#1665. Update ui local-package-table with warning symbol if no packag…

b35a612

…es found

mike-winberry added a commit that referenced this issue Jun 2, 2023

#1665 Update ui local-package-table expanded search button to say sea…

c8dd9f5

…rch again after expanded search has been run.

mike-winberry added a commit that referenced this issue Jun 5, 2023

#1665. Update ui tests with expanded search logic

61c2ae0

mike-winberry added a commit that referenced this issue Jun 5, 2023

#1665. Update ui deploy_non_init to run expanded search if dos games …

0c7300e

…not found in cwd

Racer159 removed this from the v0.27 (m3-5.30) milestone Jun 5, 2023

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665 Update ui local-package-table expanded search button to say sea…

dbd6229

…rch again after expanded search has been run.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui tests with expanded search logic

f123e4f

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui deploy_non_init to run expanded search if dos games …

8ccad32

…not found in cwd

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Created file explorer and implemented logic for exploring fold…

5f55695

…er for packages with the /packages/explore route.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Remove unnecessary declaration

1937be2

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Removed the explorer logic from the api and ui.

2caf52b

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Updated find and the ui local package table to stream in resul…

9a72ef9

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Updated ui local-package-table to handle the expanded search f…

fcf1bb5

…unctionality.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui local-package-table with warning symbol if no packag…

05bd9ac

…es found

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665 Update ui local-package-table expanded search button to say sea…

e71694b

…rch again after expanded search has been run.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui tests with expanded search logic

a03a1f5

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui deploy_non_init to run expanded search if dos games …

231065d

…not found in cwd

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Created file explorer and implemented logic for exploring fold…

db518df

…er for packages with the /packages/explore route.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Remove unnecessary declaration

e15abe1

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Removed the explorer logic from the api and ui.

edf9430

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Updated find and the ui local package table to stream in resul…

82eb218

…ts as they are found and open a dialog if not. TODO add recursive file streaming and the expanded search.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Updated ui local-package-table to handle the expanded search f…

9223de0

…unctionality.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui local-package-table with warning symbol if no packag…

3e31084

…es found

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665 Update ui local-package-table expanded search button to say sea…

334c9ef

…rch again after expanded search has been run.

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui tests with expanded search logic

3490db8

mike-winberry added a commit that referenced this issue Jun 12, 2023

#1665. Update ui deploy_non_init to run expanded search if dos games …

197f50c

…not found in cwd

Racer159 closed this as completed in #1687 Jun 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve package selection Web UI workflow #1665

Improve package selection Web UI workflow #1665

Racer159 commented May 1, 2023 •

edited by Madeline-UX

Loading

Madeline-UX commented May 17, 2023

Racer159 commented May 17, 2023

Madeline-UX commented May 17, 2023

Madeline-UX commented May 18, 2023

Improve package selection Web UI workflow #1665

Improve package selection Web UI workflow #1665

Comments

Racer159 commented May 1, 2023 • edited by Madeline-UX Loading

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

For 'init' package deployment

Regular Package Deployment

Design File

Madeline-UX commented May 17, 2023

Racer159 commented May 17, 2023

Madeline-UX commented May 17, 2023

Madeline-UX commented May 18, 2023

Racer159 commented May 1, 2023 •

edited by Madeline-UX

Loading