add build secret section in the import flow

[karthikjeeyar]

Fixes

https://issues.redhat.com/browse/HAC-3481

Description

As a user, I want to add my token to the namespace so that I can use it in my build pipeinerun's partner tasks (eg: snyk).

PR contains following changes

1. Supports only Opaque secrets at the moment.
2. List the snyk-secret in the select box, when the user selects the task a predefined token key will be presented to the user and they can enter the token data.
3. Users can also enter the custom secret name and add one or more key/value pairs.
4. Drag and drop or Upload a file in value section.

Type of change

• Feature

Screen shots / Gifs for design review

Handling.build.secrets.mov

Error State:

Snyk secret (predefined secret):

After linking the newly created secret in pipelinerun yaml files, the snyk task is executed:

How to test or reproduce?

1. In Import flow, Add secret option is available under advanced options.

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

cc: @rohitkrai03 @sbose78 @christianvogt @Misjohns

[codecov]

Codecov Report

Merging #595 (7934957) into main (b90c202) will increase coverage by 0.81%.
The diff coverage is 85.07%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #595      +/-   ##
==========================================
+ Coverage   81.12%   81.94%   +0.81%     
==========================================
  Files         468      473       +5     
  Lines       11212    11382     +170     
  Branches     3186     3217      +31     
==========================================
+ Hits         9096     9327     +231     
+ Misses       1992     1933      -59     
+ Partials      124      122       -2     

Impacted Files	Coverage Δ
src/components/ImportForm/GitImportForm.tsx	76.71% <ø> (ø)
src/components/ImportForm/utils/types.ts	100.00% <ø> (ø)
src/shared/components/formik-fields/field-types.ts	100.00% <ø> (ø)
...rmik-fields/text-column-field/text-column-types.ts	100.00% <ø> (ø)
...ts/ComponentSettingsForm/ComponentSettingsView.tsx	56.36% <25.00%> (-1.97%)	⬇️
...ared/components/formik-fields/SelectInputField.tsx	81.25% <68.18%> (+61.80%)	⬆️
...ponents/ImportForm/SecretSection/SecretSection.tsx	73.33% <73.33%> (ø)
src/components/Secrets/SecretModal.tsx	80.00% <80.00%> (ø)
src/components/Secrets/OpaqueSecretForm.tsx	88.88% <88.88%> (ø)
...-value-file-input-field/KeyValueFileInputField.tsx	88.88% <88.88%> (ø)
... and 8 more

... and 3 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b90c202...7934957. Read the comment docs.

[Misjohns]

For the secret section:

• Secret remove is too far away from the field; use the same placement as the environment variable field placement.
• Secret fields are very long. Let's align those with the variable name field.

[karthikjeeyar]

@Misjohns I have fixed the width of the secret field and remove button placement.

[karthikjeeyar]

I rebased this PR with the new Import flow changes #592

[karthikjeeyar]

/retest

[rohitkrai03]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: karthikjeeyar, rohitkrai03

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [karthikjeeyar,rohitkrai03]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[karthikjeeyar]

/retest

[openshift-ci]

@karthikjeeyar: all tests passed!

Full PR test history. Your PR dashboard.

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. I understand the commands that are listed here.