[UI] Allow single item deletion from multi-value fields #7084

rm3l · 2023-09-12T09:03:43Z

What type of PR is this:
/kind feature
/area Web-UI

What does this PR do / why we need it:

This adds the ability in the odo dev UI to delete single items from multi-value fields:

container endpoints
volume mounts
multi-text fields, like Container Command and Args, or Image Build Args
multi-key-value fields, like Container Env Vars, Deployment Annotations and Service Annotations
multi-commands fields, in use in Composite Commands

Screenshots

Which issue(s) this PR fixes:
Fixes #7055

PR acceptance criteria:

Unit test
Integration test
Documentation

How to test changes / Special notes to the reviewer:

openshift-ci · 2023-09-12T09:03:49Z

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

netlify · 2023-09-12T09:03:59Z

✅ Deploy Preview for odo-docusaurus-preview canceled.

Name	Link
🔨 Latest commit	`b0412b0`
🔍 Latest deploy log	https://app.netlify.com/sites/odo-docusaurus-preview/deploys/6504800ef0f346000899efa1

odo-robot · 2023-09-12T09:16:27Z

Kubernetes Docs Tests on commit b20ceb6 finished successfully.
View logs: TXT HTML

…mponent

odo-robot · 2023-09-13T09:37:55Z

Windows Tests (OCP) on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T09:38:43Z

OpenShift Unauthenticated Tests on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T09:39:38Z

NoCluster Tests on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T09:42:12Z

Unit Tests on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T09:48:40Z

Validate Tests on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T10:00:55Z

Kubernetes Tests on commit 83ea480 finished successfully.
View logs: TXT HTML

odo-robot · 2023-09-13T10:03:33Z

OpenShift Tests on commit 83ea480 finished with errors.
View logs: TXT HTML

ui/src/app/controls/endpoints/endpoints.component.html

ui/src/app/controls/multi-command/multi-command.component.html

ui/src/app/controls/multi-key-value/multi-key-value.component.html

Co-authored-by: Philippe Martin <phmartin@redhat.com>

…d to Co-authored-by: Philippe Martin <phmartin@redhat.com>

… attached to" This reverts commit 4bf895f.

…tached to Co-authored-by: Philippe Martin <phmartin@redhat.com>

sonarqubecloud · 2023-09-15T16:02:55Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

feloy

Works great, thanks

rm3l · 2023-09-18T08:14:06Z

  [FAILED] Expected
      <string>:   __
       /  \__     Developing using the "lwvxbb" Devfile
       \__/  \    Namespace: cmd-logs-test249kbi
       /  \__/    odo version: v3.14.0 (b0412b0ee)
       \__/
      
      â†ª Running on the cluster in Dev mode
       â€¢  Waiting for Kubernetes resources  ...
       âš   Pod is Pending
       âœ“  Pod is Running
      --> Logs for lwvxbb-app-845986b854-nl689 / runtime
       â€¢  Syncing files into the container  ...
      
 âœ“  Syncing files into the container [457ms]
       â€¢  Building your application in container (command: install)  ...
      runtime: npm notice created a lockfile as package-lock.json. You should commit this file.
      runtime: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents):
      runtime: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
      runtime: npm WARN node-echo@0.0.1 No repository field.
      runtime: npm WARN node-echo@0.0.1 No license field.
      runtime: 
      runtime: added 33 packages from 29 contributors and audited 34 packages in 1.481s
      runtime: 
      runtime: 3 packages are looking for funding
      runtime:   run `npm fund` for details
      runtime: 
      runtime: found 0 vulnerabilities
      runtime: 
      
 âœ“  Building your application in container (command: install) [2s]
      
      â†ª Deploying Kubernetes Component: myapp-inner
       â€¢  Creating resource Pod/myapp-inner  ...
      
 âœ“  Creating resource Pod/myapp-inner 
       â€¢  Executing the application (command: start)  ...
      runtime: 
      runtime: > node-echo@0.0.1 start /projects
      runtime: > node server.js
      runtime: 
      runtime: Server running on 0.0.0.0:8080
       â€¢  Waiting for the application to be ready  ...
      
 âœ“  Waiting for the application to be ready [1s]
       -  Forwarding from 127.0.0.1:34059 -> 8080
      
      
      â†ª Dev mode
       Status:
       Watching for changes in the current directory /tmp/2912389663
      
      Keyboard Commands:
      [Ctrl+c] - Exit and delete resources from the cluster
           [p] - Manually apply local changes to the application on the cluster
      
  to contain substring
      <string>: main: 

[...]
Summarizing 1 Failure:
  [FAIL] odo logs command tests when component is created and odo logs is executed when running in Dev mode with --logs [It] 1. should successfully show logs of the running component
  /go/odo_1/tests/integration/cmd_logs_test.go:253

Ran 404 of 954 Specs in 1409.505 seconds
FAIL! -- 403 Passed | 1 Failed | 0 Pending | 550 Skipped

Flaky issue with odo logs - reported in #6619 (will reopen if the issue persists on other PRs)..

/override OpenShift-Integration-tests/OpenShift-Integration-tests

openshift-ci · 2023-09-18T08:14:10Z

@rm3l: Overrode contexts on behalf of rm3l: OpenShift-Integration-tests/OpenShift-Integration-tests

Details

In response to this:

 [FAILED] Expected
     <string>:   __
      /  \__     Developing using the "lwvxbb" Devfile
      \__/  \    Namespace: cmd-logs-test249kbi
      /  \__/    odo version: v3.14.0 (b0412b0ee)
      \__/
     
     â†ª Running on the cluster in Dev mode
      â€¢  Waiting for Kubernetes resources  ...
      âš   Pod is Pending
      âœ“  Pod is Running
     --> Logs for lwvxbb-app-845986b854-nl689 / runtime
      â€¢  Syncing files into the container  ...
     
âœ“  Syncing files into the container [457ms]
      â€¢  Building your application in container (command: install)  ...
     runtime: npm notice created a lockfile as package-lock.json. You should commit this file.
     runtime: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents):
     runtime: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
     runtime: npm WARN node-echo@0.0.1 No repository field.
     runtime: npm WARN node-echo@0.0.1 No license field.
     runtime: 
     runtime: added 33 packages from 29 contributors and audited 34 packages in 1.481s
     runtime: 
     runtime: 3 packages are looking for funding
     runtime:   run `npm fund` for details
     runtime: 
     runtime: found 0 vulnerabilities
     runtime: 
     
âœ“  Building your application in container (command: install) [2s]
     
     â†ª Deploying Kubernetes Component: myapp-inner
      â€¢  Creating resource Pod/myapp-inner  ...
     
âœ“  Creating resource Pod/myapp-inner 
      â€¢  Executing the application (command: start)  ...
     runtime: 
     runtime: > node-echo@0.0.1 start /projects
     runtime: > node server.js
     runtime: 
     runtime: Server running on 0.0.0.0:8080
      â€¢  Waiting for the application to be ready  ...
     
âœ“  Waiting for the application to be ready [1s]
      -  Forwarding from 127.0.0.1:34059 -> 8080
     
     
     â†ª Dev mode
      Status:
      Watching for changes in the current directory /tmp/2912389663
     
     Keyboard Commands:
     [Ctrl+c] - Exit and delete resources from the cluster
          [p] - Manually apply local changes to the application on the cluster
     
 to contain substring
     <string>: main: 

[...]
Summarizing 1 Failure:
 [FAIL] odo logs command tests when component is created and odo logs is executed when running in Dev mode with --logs [It] 1. should successfully show logs of the running component
 /go/odo_1/tests/integration/cmd_logs_test.go:253

Ran 404 of 954 Specs in 1409.505 seconds
FAIL! -- 403 Passed | 1 Failed | 0 Pending | 550 Skipped

Flaky issue with odo logs - reported in #6619 (will reopen if the issue persists on other PRs)..

/override OpenShift-Integration-tests/OpenShift-Integration-tests

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. Required by Prow. kind/feature Categorizes issue as a feature request. For PRs, that means that the PR is the implementation labels Sep 12, 2023

openshift-ci bot added the area/Dev-UI Issues or PRs related to the odo dev Web UI, a.k.a Devfile Builder label Sep 12, 2023

rm3l added 7 commits September 13, 2023 11:25

Support single endpoint deletion from multi-endpoints component

bdcf736

Support single command deletion from multi-commands component

b3514e2

Support single key-value item deletion from multi-key-value component

4b7d0e3

Support single text item deletion from multi-text component

eaecfad

Support single volume mount item deletion from multi-volume-mounts co…

b149eb0

…mponent

Add Cypress test cases

a1ceb78

Git-ignore Cypress screenshots folder

0a0ca54

rm3l force-pushed the 7055-ui-multi-value-fields-should-allow-to-delete-single-item branch from 2bbc1ce to 0a0ca54 Compare September 13, 2023 09:30

Generate static UI

b43be6d

rm3l changed the title ~~[WIP] [UI] Allow single item deletion from multi-value fields~~ [UI] Allow single item deletion from multi-value fields Sep 13, 2023

rm3l marked this pull request as ready for review September 13, 2023 09:38

openshift-ci bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. Required by Prow. label Sep 13, 2023

openshift-ci bot requested review from feloy and kadel September 13, 2023 09:39

feloy reviewed Sep 13, 2023

View reviewed changes

ui/src/app/controls/endpoints/endpoints.component.html Outdated Show resolved Hide resolved

ui/src/app/controls/multi-command/multi-command.component.html Show resolved Hide resolved

ui/src/app/controls/multi-key-value/multi-key-value.component.html Outdated Show resolved Hide resolved

rm3l and others added 2 commits September 15, 2023 14:47

Update Delete icon and add tooltip to it

d588446

Co-authored-by: Philippe Martin <phmartin@redhat.com>

Move the "delete endpoint" button closer to the element it is attache…

4bf895f

…d to Co-authored-by: Philippe Martin <phmartin@redhat.com>

rm3l and others added 4 commits September 15, 2023 14:54

Generate static UI

8f70f87

Revert "Move the "delete endpoint" button closer to the element it is…

e6d0d0b

… attached to" This reverts commit 4bf895f.

Move the "delete endpoint" buttons closer to the elements they are at…

3001acb

…tached to Co-authored-by: Philippe Martin <phmartin@redhat.com>

Generate static UI

b0412b0

rm3l requested a review from feloy September 15, 2023 16:03

feloy approved these changes Sep 18, 2023

View reviewed changes

openshift-ci bot assigned feloy Sep 18, 2023

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. Required by Prow. label Sep 18, 2023

openshift-merge-robot merged commit 9724292 into redhat-developer:main Sep 18, 2023

rm3l deleted the 7055-ui-multi-value-fields-should-allow-to-delete-single-item branch September 18, 2023 08:18

[UI] Allow single item deletion from multi-value fields #7084

[UI] Allow single item deletion from multi-value fields #7084

Uh oh!

Conversation

rm3l commented Sep 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openshift-ci bot commented Sep 12, 2023

Uh oh!

netlify bot commented Sep 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for odo-docusaurus-preview canceled.

Uh oh!

odo-robot bot commented Sep 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

odo-robot bot commented Sep 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented Sep 15, 2023

Uh oh!

feloy left a comment

Choose a reason for hiding this comment

Uh oh!

rm3l commented Sep 18, 2023

Uh oh!

openshift-ci bot commented Sep 18, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rm3l commented Sep 12, 2023 •

edited

Loading

netlify bot commented Sep 12, 2023 •

edited

Loading

odo-robot bot commented Sep 12, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading

odo-robot bot commented Sep 13, 2023 •

edited

Loading