feat(ui): allows more convenient sorting of repository.

[bianbbc87]

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

Fixes: #18454

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[bunnyshell]

✅ Preview Environment created on Bunnyshell but will not be auto-deployed

See: Environment Details

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[bianbbc87]

The ideal sort described in issue was sort, but it was not possible to sort uiwise because Repository objects do not have createdAt properties.
#18454

Instead, among the properties of the repository, it is possible to search by type, project, name, and status.

type: You can search by all, git, and helm.
project : When loading the repository, all projects in the repository array can be listed and searched with the dropdown property.
name : Search statements can be used to search. Remove spaces, ignore case letters
status: You can search using all, Successful, Failed and Unknown.

i deleted sort dropdown

Please let me know if you need anything else.

[bianbbc87]

@david-wu-octopus

Hi. I referenced your code, but I couldn't sort it in date order by comparing x, y for certain conditions. (Since Repository objects don't have properties to display dates)

Instead, I made it possible to sort using other properties. Especially, I think it's convenient to automatically track and sort projects that you have. Can you please check my code?

[bianbbc87]

@pasha-codefresh
Hi, can you check my code?

[surajyadav1108]

@bianbbc87

I would suggest few changes:

1. Change the anchor element from the default argo button to a simpler anchor sort element as same for applications sort method as the button would be confusing

2. the code breaks for a repo that dosen't have a name property as it was optional for git repos so if user add a git repo through CLI or UI without setting the name property the UI breaks . I tried some changes which I will include and you write on top of it to improve

I have added some changes and it will look something like this :

• changed the anchor element
• added some scss for search field as on default it was same as background so "invisible"
• added some change in name filter(you can improve on it)

changed.mp4

[surajyadav1108]

you can add this scss on top of file repo-list.scss for search-bottom

`@import 'node_modules/argo-ui/src/styles/theme';

.search-bar .argo-field{

@include themify($themes) {                  
    border-bottom: 2px solid themed('light-argo-teal-5');;
}

&:focus {
    outline: 0;
    border-color: $argo-color-teal-6;
}

} `

[bianbbc87]

@bianbbc87

I would suggest few changes:

1. Change the anchor element from the default argo button to a simpler anchor sort element as same for applications sort method as the button would be confusing
2. the code breaks for a repo that dosen't have a name property as it was optional for git repos so if user add a git repo through CLI or UI without setting the name property the UI breaks . I tried some changes which I will include and you write on top of it to improve

I have added some changes and it will look something like this :

• changed the anchor element
• added some scss for search field as on default it was same as background so "invisible"
• added some change in name filter(you can improve on it)

changed.mp4

That's very good feedback. Thank you!

[bianbbc87]

I’m refactoring it now. 😶

[bianbbc87]

@surajyadav1108
I have reflected the modifications, and I have also added some changes below:

• reduce the width of the search bar to 50%
• modify the selection to verify the selection by adding the property value to the right of the dropdown

The above two things further strengthened the user experience.
I would appreciate any feedback or suggestions you may have to further improve the implementation. 😃

[surajyadav1108]

ok great! @bianbbc87
looking back at it, I noticed that the project has a similar issue with undefined values, just like with the name

undefined.mp4

So I have some few changes as well modify those and then it looks good to me

corrected.mp4

[bianbbc87]

@surajyadav1108
Thank you for the feedback! I'm learning a lot 😊

[surajyadav1108]

@surajyadav1108 Thank you for the feedback! I'm learning a lot 😊

ahh seems ui lint check is failing, you can fix it if you have yarn installed globally if not npm install -g yarn

• cd ui switch to ui
• yarn install should be 1.22.21 or above
• yarn run lint -- you can see the errors
• yarn run lint --fix

[bianbbc87]

@surajyadav1108

I've fixed the lint issue.
I think i need a PR label. could you add a PR label?

It's related to ui.

[surajyadav1108]

@surajyadav1108

I've fixed the lint issue. I think i need a PR label. could you add a PR label?

It's related to ui.

No write access, you will have to wait till a member approves it. meanwhile you can fix the PR title

@ishitasequeira can you merge this if it looks good ❓

[andrii-korotkov-verkada]

@bianbbc87, I've asked for review in CNCF Slack. Can you rebase on the latest master and re-test, please?