feat(ui): Inject Custom CSS

[dtaniwaki]

Checklist:

• My organization is added to USERS.md.

Fixes #1451

You can test this feature by executing the following commands.

$ kubectl -n argo create configmap custom-css --from-literal "custom.css=.nav-bar { background-color: #2196f3; }"
$ kubectl -n argo patch configmap workflow-controller-configmap -p '{"data":{"ui.cssurl":"./extra/custom.css"}}'
$ kubectl -n argo patch deployment argo-server -p '{"spec":{"template":{"spec":{"containers":[{"name":"argo-server","args":["server", "--secure=false", "--auth-mode=hybrid", "--extra-files-dir=/shared/app/custom"], "volumeMounts": [{"name": "custom-css", "mountPath": "/shared/app/custom"}]}], "volumes": [{"name":"custom-css", "configMap": {"name": "custom-css"}}]}}}}'

[dtaniwaki]

Any good path for extra files?

[dtaniwaki]

I updated the code so the server won't return 304 on removed extra files.

[alexec]

I suggest doing this different.

1. Add a new field to GetInfo called “env”. This can be “dev” , “e2e” or “prod”.
2. Use this to load a CSS file based on the name. Eg dev.css
3. Bundle CSS using those conventional names.
4. Add a new parameter to Argo server, “—env” or “ARGO_ENV”.
5. Display that value below the version number top left.

This would be less flexible, but flexible enough.
It would be secure.
It would be simple, I think we’d use it.

[dtaniwaki]

Thank you for your suggestion. I have 2 questions for the env idea.

What env should we use for a locally running argo server?

We could have 2 argo servers with different instance ID in the production. Should we use different env names like prod_1 and prod_2?

[dtaniwaki]

By the way, as for the env-like name, I injected it by the following CSS.

    .nav-bar {
      background-color: #3f51b5;
    }
    .nav-bar__logo::before {
      content: 'stg';
      color: white;
      text-align: center;
      display: block;
    }

And got the following result.

[dtaniwaki]

However, the env idea is also good. I'd like to hear other people's thoughts too.

[alexec]

See comments.

[dtaniwaki]

Hmm... No other comments.

@jessesuen Do you have any thought about the compatibility with ArgoCD?

[alexec]

I'd like to revisit this. I like the idea of applying different CSS depending on the environment (e.g. production vs pre-production) or organisation (e.g. dev-ops vs stream processing or other part of your org).

There is a risk of combinatorial explosion of different CSS. So I think we should have themes. E.g. "dark" and "light" and supply the CSS with the app.

Don't worry about Argo CD compatibility. We don't aim for that except in patterns and style.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kenchan0130]

Is there any progress on this?
I'd like to apply CSS with values as well as Argo CD.

[alexec]

This appears to have bene abandoned. Would you like to pick up the work?

[tooptoop4]

where @dtaniwaki