Secret (Cert, Reg) - List/Detail & Create/Edit

[maggieliu]

Use this wireframe from rancher/dashboard#257 for list of secrets/secret detail/create secret pages:

https://xd.adobe.com/view/f6684727-5553-46f3-759e-76118e955b2e-8059/

[lvuch]

Headers for value on page 3 and 5 are incorrect (related workloads and values) should match "values" on page 2 and 4.

[tfiduccia]

UI/UX review:

• [x] Type field contents should be alphanumeric. Secret should still be default

• [x] When I click on Type and I have Secret selected. It show other fields as selected

• [x] Is there a way to turn off the auto fill?

• [x] Value Field default text and typed text is not centered in field. It's in upper left

• [x] Line height is missing for Description field. I know this will add space to other fields as well. But if you have something misspelled or descenders it starts to really look crowded

• [x] Turn off Spell check for Value cause this will have cert info in it and will probably be just one long big red line

• [x] Do we want more space between rows?

• [x] Clicking on Type then trying to create a secret give me an error

• [x] Example text should be there all the time and the color needs to be lighter then the label text

• [x] Namespace section of field seems too large

• [x] Add & Read from File - change so no icon and the casing should be all caps (maybe fonts wrong as well?)

• [x] Add default text to registry domain Name field and make it says 'e.g. index.docker.io'

[lvuch]

@mantis-toboggan-md could you take a look at these last couple of tasks?

Here are some notes from what I've marked as complete and the last few that need completed

• autofill is browser feature that we cannot/should not override as it is user preference
• I think this is the case for spell check as well
• I can’t seem to get label and placeholder to not be different colors
  • on dark the label should be #B6B6C2 (secondary) and the placeholder should be #6C6C76 (disabled)

Thanks!

[deniseschannon]

Feedback based on convo with @ibuildthecloud

*[x] List View - Header Edits

• [x] Instead of “Detail” -> “Data”
• [x]Type for service account tokens should be “Service Acct Token” not just “Service Acct”
  • [x] When it’s a service account token, you can link back to the service account in the same namepsace and find it based on the annotations, service account names are unique in the same namespace:

    annotations:
    kubernetes.io/service-account.name: <service_account_name>

    • Create/Edit Pages
• [x] "Type" dropdown field should be able to select from choices but also ability to input free form text. But currently, it's weird/hard to do @lvuch can you look into this?
  • Example: Ability to use “kubernetes.io/service-account-token” as a type and gets weird right now when trying to "Edit" the token.
• [x] "Type Fields" should be Certificate, Registry, Opaque
  • [x] Specifically "Secret" should be switched to "Opaque". Opaque is the correct k8s term.
• [x] Add a Labels tab and Annotations tabs with key/value component
  • View Detail Page
• [x] If we call it "Data" in the Create/Edit page, we should call it "Data" in the view page.
• Add ability to view Labels and Annotations into 2 separate tabs

Note for reference: We dropped the ability to select multiple namespaces when creating a secret. In Ember we had the ability to create a secret for all namespaces in a project, but removing this functionality for now in Vue.

[vincent99]

"Type" dropdown field should be able to select from choices but also ability to input free form text. But currently, it's weird/hard to do @lvuch can you look into this?

https://vue-select.org/guide/values.html#tagging

[lvuch]

Placeholder text should make it more obvious that it's both a text area and dropdown

[deniseschannon]

@lvuch

• [x] Can you fix the font size/layout of the "provider" for Registry? And change the text from Provider to Address?

[deniseschannon]

Design issue with Type dropdown filed in https://github.com/rancher/dashboard/issues/552

Edit Secret Page

[x] When editing a "service account token" secret, the type dropdown is broken. It's populated correctly, but I cannot change it.

[x] When selecting between types in the dropdown (on create new), it doesn't switch the form. For opaque, it's key value pairs, but for registry it shows the Provider section.

Detail Secret Page

[x] When looking at secret that is a different type from "Certificate, Registry, Opaque", it's showing up like this. It should just show Service Acct Token, which is the typeDisplay

[x] Missing Labels and Annotations tabs from the detail page

[lvuch]

type dropdown fix https://github.com/rancher/dashboard/pull/554

[deniseschannon]

Open Remaining Issues for @mantis-toboggan-md :

Type Dropdown

• [x] It now allows us to type free form text, but I can't actually use it to input free form text as a value. We might need 2 types of dropdowns. 1 that allows you to input using free form text as a value and another that doesn't.

Edit Page

• [x] Clicking on Type then trying to create a secret give me an error
  • [x] Side note: I can't seem to create a certificate secret to view what it looks like after creation. I keep hitting this error.

List Page

• [x] Type should be converted from the k8s name to the friendly name [ ] Type: Docker JSON -> Registry [.] Type: -> `Certificate. Note: This might be a certificate already but I am having issues creating certificates

Detail Page

• [x] Fix labels and annotations to be in read-only/view mode for detail page
• [x] For the data in the SortableTable can we display all the content in the fields in the rows? We are cutting off the data for no reason.

[deniseschannon]

Detail Page

Certificate Type

• [x] When viewing an existing certificate, it pulls the data in the "Opaque" type detail instead of looking like the "Certificate" type. The detail page should be similar to Edit page, showing the 2 fields Private Key and CA Certificate with Headers.

Registry Type

• [x] The address is showing up a link, but it shouldn't be a link as it's not a valid link.

Edit Page

Certificate Type

• [x] When editing a certificate, it isn't populating the Private Key or CA Certificate fields with the data. Instead, it's populated under the "Opaque" type fields.
• [x] Example Text:
  • Private Key: Paste in the private key, typically starting with -----BEGIN RSA PRIVATE KEY-----
  • CA Certificate: Paste in the CA certificate, starting with -----BEGIN CERTIFICATE-----

Registry Type

• [x] When editing an existing a registry type that has something that's not Dockerhub, it's not populating the correct radio button for Address. By default, if it doesn't' match any of the first 3 options, it should default to custom.

[deniseschannon]

Detail Page

Opaque Type

• [x] This should be using the KeyValue component instead of a Sortable table so that it matches the Edit page.

Certificate Type

• [x] It should be CA Certificate instead of Certificate to match the Edit page header

Edit Page

• [x] Unable to edit the type of secret

Certificate Type

• [x] Add in example text:
• Private Key: Paste in the private key, typically starting with -----BEGIN RSA PRIVATE KEY-----
• CA Certificate: Paste in the CA certificate, starting with -----BEGIN CERTIFICATE-----

[mantis-toboggan-md]

@deniseschannon from what I can see editing the 'type' field of secrets is not supported; trying returns the error:

"message": "Secret \"test-change-type\" is invalid: type: Invalid value: \"kubernetes.io/tls\": field is immutable", "status": 422

[deniseschannon]

Detail Page

Opaque Type

• [x] Somehow the protip is underneath the Title

Overall, there are some design issues that will be taken care of other issues (KeyValue component https://github.com/rancher/dashboard/issues/589, masthead https://github.com/rancher/dashboard/issues/538#issuecomment-623722980)

[mantis-toboggan-md]

• [x] Example text should be there all the time and the color needs to be lighter then the label text

To clarify, this was discussed in a zoom call: all (empty) labeled inputs with example text should show that text by default and hide it when hovered. The example text should be less prominent than the label(darker than label on the dark theme, lighter than label on the light theme)

[sangeethah]

Validation for Secret (Cert, Reg , Opaque) for List/Detail & Create/Edit pages is done. Issues found when testing these pages are tracked as different issues.