Describe the bug
Error message popup cannot be displayed properly

To Reproduce

At project level, add new role
Grant "get" to all resources under the related app
Project --> edit --> save
Expected behavior
Error message should be displayed properly, at least all the text should be visible

Related to argoproj/argo-cd#16745

Right now help-chat button theme looks odd looking at the entire ArgoCD UI, please match the theme same as what is used for the left-side panel.

{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}

argo-cd and argo-workflows Nav bar doesn't have a tag. So currently we cannot open it from right click.

In addition, browser doesn't register page histories, so we cannot go forward history after go back page.

Generally if it has a tag, we can open it from right click like followings.

I'm not sure this is argo-ui issue or not.

Argo-ui xtem versio is very old, 2.4.0. Currently，xterm version is > 4.0.0. Is it possible to update xterm version?

Argo Image returns 404

v2 Tooltips are not intelligent enough to adjust their positioning to fit in the window:

I'm developing a system level extension and I'm having an issue where there's a sb-page-wrapper class that has a padding of 230px that shifts my extension to the left as shown in this picture. I'd like to have my extension be able to use the space right next to the black nav bar on the left.

There's also another div with style .cd-layout--extension .cd-layout__content--sb-expanded that has padding-left: 230px as well, which leads me to believe there's a bug where we're accidently applying the padding twice.

followed the setup guide for the setup of argo-ui with given steps

• yarn install
• yarn start
yarn start failed with

[Error message "error:0308010C:digital envelope `routines::unsupported](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)

using export NODE_OPTIONS=--openssl-legacy-provider worked to start the build and server but on server module build fails with

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:14:21)

The current Page component is a bit inflexible in terms of being able to set custom values for the Helmet title and the TopBar title. Want to have the topBar title set specifically and can be different than the Helmet title. Also may not want the toolbar breadcrumbs to be part of the Helmet title.

Here is an example with it being more flexible. Note the tooltip, which is the helmet title and the top bar title on the right.

Describe the bug

Buttons change their sizes in different states (focus, hover, etc.). It causes element jumping during interaction with buttons.
Like mentioned in this issue: argoproj/argo-cd#6946

To Reproduce

1. Go to https://cd.apps.argoproj.io/applications/argo-cd?view=pods&orphaned=false
2. Press the ‘APP DETAILS’ button several times

Expected behavior

Buttons keep their size and don’t move each other and other content.

Screenshots

Document design system for Argo UI

Two CVEs are introduced via the portable-fetch dependency because of its dependency on node-fetch:

• https://app.snyk.io/org/argoproj/project/e257be49-1bf5-455e-a11b-cdab3dbef067#issue-SNYK-JS-NODEFETCH-2342118
• https://app.snyk.io/org/argoproj/project/e257be49-1bf5-455e-a11b-cdab3dbef067#issue-SNYK-JS-NODEFETCH-674311

I don't see any references in argo-ui to fetch(, which I think is the function this package introduces.

It looks like the package hasn't been updated for five years. So even if we need it, we should probably look for an alternative.

Can we just remove this dependency since it doesn't appear to be used? If not, can we use an alternative?

Following the instructions here with argoui v2.1.0-beta2 resulted in an empty Argo workflows page. No workflow data and missing assets:

Console only indicated 404s for icons and fonts

When Argo runs with multiple controllers in the cluster Argo UI should display workflows from specific controller.

Hi,

ArgoCD Team, could you please make the /settings/repos faster?

Current Problem:
We have about 50+ Repos connected and everytime we need to visit the page it needs forever to check them all.

Solution:
Either implement paging with a search or async checking of the repositories.

Thx in advance.
Sorry found no guidlines how to write a appropirate request :)

Best Regards Kani

Planning to add some documentation around using yalc. Need to confirm a few things and then I can raise a PR

do we need to publish the argo-ui repo after every change that we want reflected?
do we need to yalc add on the main (argo-workflows) repo after every change?

it happens sometimes that the already running webpack dev server does not pick up the change even though node_modules are updated. It seems to use the one in memory. Any pointers on how to fix this ?

Please provide a way to change the color of argocd-ui by adding the colors in argocd-cm configmap rather than using it from custom CCS

{
    "Version": "v2.4.0+655be25",
    "BuildDate": "2022-04-15T00:29:43Z",
    "GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
    "GitTreeState": "clean",
    "GoVersion": "go1.18.1",
    "Compiler": "gc",
    "Platform": "linux/amd64",
    "KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
    "HelmVersion": "v3.8.1+g5cb9af4",
    "KubectlVersion": "v0.23.1",
    "JsonnetVersion": "v0.18.0"
}

https://github.com/argoproj/argo-ui/blob/master/src/components/autocomplete/autocomplete.tsx#L26

I am a front-end engineer who recently started using Argo Workflows in my company. Argo Workflows is an excellent workflow engine, but I thought the UI could use more improvement.

First, I would improve the static analysis tool. tslint is already deprecated and it is recommended to use ESLint and typescript-eslint.

https://palantir.github.io/tslint/

⚠️ TSLint has been deprecated as of 2019. Please see this issue for more details: Roadmap: TSLint → ESLint. typescript-eslint is now your best option for linting TypeScript.

So can I work on this?

Motivation

Reduce the scope of this component library, reduce its bundle size, use more tooling from the UI libraries we import, and have more consistent styling with that UI library. Should help with #453

We already use antd, let's use its components everywhere instead of having custom components in some places. At the very least, if we need custom functionality, we can wrap the antd components.

Also would be good to remove foundation-sites since that's another (dated) UI library and standardize on antd

Use Cases

A few components that can be replaced from a quick glance:

1. AutoComplete
2. Checkbox
3. Dropdown
4. Form
5. Notification
6. Popup -> Popover / Popconfirm / Modal / Alert
7. Select
8. SlidingPanel -> Drawer
9. Tabs
10. Tooltip

Probably several others too

Summary

The v2/package.json and v2/tsconfig.json were created as a quick workaround to unblock v2 usage. Now we can remove both and move new dependencies (if any) from v2/package.json to package.json

After merging the package.json and tsconfig.json we need to merge storybooks and CI for both packages

Create V2 switch component according to design
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26

ArgoCD always pulls the master version of argo-ui (link), which is somewhat risky if breaking changes go into argo-ui. Consequently, argo-ui master has to be highly stable.

Short of a proper release cycle, one easy way to stabilize this dependency is to create a "stable" branch which is manually rebased on the development branch. The development branch in GitHub terms would be the 'main' branch - the one PRs are targeted against by default. Currently, the master branch is both the development and stable branch.

This manual rebase can be done periodically (eg weekly) or whenever the maintainer feels the development branch contains changes that are safe/stable enough.

The advantage of this approach is a relatively cheap separation between stable and latest code on argo-ui, which allows low-cost "releases" that do not require updating any code in the projects that depend on argo-ui, since those projects are already targeting the stable branch. This reduces the testing overhead required for individual argo-ui PRs, since the stability of the development branch can be "lower".

The disadvantage of this approach is that it requires significant attention from a maintainer whose job it is to periodically rebase the stable branch on the development branch. The cost of reducing testing for individual PRs means that the testing is now batched into these periodic rebases, so the testing pre-rebase should be extensive.

The naming of the dev/stable branches is subjective. I would personally suggest leaving master as the dev/main branch and creating a new stable branch, eg stable, or release.

Redesign V2 input component according design:

https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26

When a workflowTemplate has a workflow parameter with an enum

  arguments:
    parameters:
      - name: scale
        value: "500"
        enum:
          - "500"
          - "1000"
          - "2000"
          - "5000"
          - "10000"

It would be useful to be able to have a placeholder instead of the default value to display to the user (example: "Please select") to ensure the user select something.
At the moment, the workaround to put it in value does not work as the value has to be in the enum.

This is based on discussions in this Slack thread (which is fairly long and winding) that I had raised after realizing the fairly neglected and incomplete state of this repo when having to do an upgrade of it for Argo Workflows in argoproj/argo-workflows#11585.

This was also mentioned in a Maintainers meeting that I was not part of.

Future State -- intent to phase out(?)

This repo has been neglected for some time and right now there are not that many cross-project contributors. Due to this and the interim state of this repo as not entirely a library (see below), this has resulted in slowing down development while simultaneously not really creating a "consistent look and feel" between projects (such as Workflows and CD). There are some similarities and shared branding, but many differences (in part because CD has received more attention) despite having some shared components.

While it may be possible to improve this situation, some contributors believe that this may not be worthwhile and that a design guide of sorts may be a better substitute. Argoproj also already uses antd as the underlying component library. This repo has higher-level components on top of those as well as some components that are not part of antd.
(Personally, I do not really have a strong opinion myself as I am a more recent contributor to Argoproj and am more documenting the current thoughts around this for everyone. I think the "ideal state" of this repo could be great, but if it does not suffice for those purposes and may not ever suffice, while also currently slowing things down, phasing out may certainly make a lot of sense.)

Requiring downstream issues

In any case, as the repo is indeed not really actively maintained (and has no active maintainer list), we should document its current state.

Instead of having contributors create issues and PRs here ad-hoc, it may be better in the interim to require that issues and PRs have a downstream issue in consuming projects like Argo Workflows or Argo CD. That way, maintainers of the consuming projects will be aware of and can review PRs here.

Issue and PR templates can be updated to explicitly note this requirement. Perhaps the README and other docs as well.

TypeScript compatibility issues

I may perhaps be the only one interested in improving this, but as I mentioned in argoproj/argo-workflows#11510 (comment), this repo currently exports raw TSX, instead of compiled JS. This causes compat issues when consuming projects have different TS versions or settings, which means that the settings and version of this repo largely define the settings and version of consuming repos. It also means longer compilation times and that consuming repos must have many of the same devDeps despite not using them directly (which is very confusing and hard to determine -- package managers will not automatically determine this given that this is not how devDeps are meant to be used).

Of particular note is that this repo is on TS 4.9 and does not have the strictest (or even strict, for that matter) type-checking configuration.

This makes it all the more harder to decouple this repo from consuming projects as if they use any components from here, they are hard tied to its version and settings. Compiling the TSX to JS and publishing it, whether in the NPM package or directly in the repo, would significantly improve this situation.

History

This is more of a miscellaneous note, but I think the history of a repo is important context to any decisions.

Argo Workflows

As far as I know, this repo was initially the UI for Argo Workflows. Then it evolved as the Argoproj org evolved, including Argo CD and others. This can be seen in late-2019 PRs #53 and argoproj/argo-workflows#1859 that move the Workflows UI into Argo Workflows. (Notably, COVID-19 started to make its mark on the entire world around that time).

Component Library

Then there was some momentum from contributors to make this repo into a component library for all Argo Projects. Can see some mid-2021 PRs such as #96.

This appears to have never quite been completed though, and this repo has been in this interim state ever since.

v1 vs. v2

I don't know that many details here, but if I'm interpreting correctly, v1 was a first-pass assortment of components and v2 was meant to be "a true component library which is shared between all Argo Projects and published on NPM".

It looks like it was also supposed to modern hooks syntax and other things. There is not a 1-to-1 component match though.

Should use FontAwesome icons as checkboxes to avoid browser compatibility issues.

For use in argoproj/argo-cd#6091

If there is a long message outputed as a workflow run result, the item doesn't look so good.

When I changed the message to something short, it looks good

Is this a feature request of a bug?
Bug

What happened
Running:

docker build .

results in the following error:

$ webpack --config ./src/app/webpack.config.js
/src/node_modules/webpack/bin/webpack.js:348
			throw err;
			^

SyntaxError: Error parsing /src/node_modules/node-libs-browser/package.json: Unexpected token � in JSON at position 0
    at JSON.parse (<anonymous>)
    at readPackage (module.js:133:52)
    at tryPackage (module.js:143:13)
    at Function.Module._findPath (module.js:225:20)
    at Function.Module._resolveFilename (module.js:553:25)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/src/node_modules/webpack/lib/node/NodeSourcePlugin.js:8:25)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at WebpackOptionsApply.process (/src/node_modules/webpack/lib/WebpackOptionsApply.js:71:25)
    at webpack (/src/node_modules/webpack/lib/webpack.js:37:48)
    at processOptions (/src/node_modules/webpack/bin/webpack.js:335:15)
    at yargs.parse (/src/node_modules/webpack/bin/webpack.js:396:2)
    at Object.Yargs.self.parse (/src/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/src/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:193:16)
    at bootstrap_node.js:617:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c NODE_ENV='production' yarn build && yarn cache clean && yarn install --production' returned a non-zero code: 1

What you expect to happen
The image should build successfully

Details
I'm using latest master b0676cd

The problem is an extra newline character at the end of package.json

Redesign V2 dropdown component
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26

May be wrong

• needed to change const uuid = require('uuid/v1'); to const uuid = require('uuid');
• needed to change import createHistory from 'history/createBrowserHistory'; to import { createBrowserHistory as createHistory } from 'history';
• the storybook takes a lot of time to load

• css not working in storybook

If the app name is too big external link icon and favorite icon overlap the app name. Word wrap the name or on mouse over show the complete name and fix the name length width.

{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}

When Argo CD runs subpath mode and share origin with multiple applications and uses same local storage key, it became not to work.

As my experience, external application uses theme key in local storage and save "DARK" or "LIGHT" to it.
After that, when I access to Argo CD, it outputs a following error in a browser.

VM172:1 Uncaught SyntaxError: Unexpected token 'D', "DARK" is not valid JSON
    at JSON.parse (<anonymous>)
    at 10180 (main.9ecae91d8fd1deedf944.js:2:1501193)
    at i (main.9ecae91d8fd1deedf944.js:2:2463187)
    at 58535 (main.9ecae91d8fd1deedf944.js:2:2104618)
    at i (main.9ecae91d8fd1deedf944.js:2:2463187)
    at main.9ecae91d8fd1deedf944.js:2:2468811
    at main.9ecae91d8fd1deedf944.js:2:2468821
10180 @ main.9ecae91d8fd1deedf944.js:2
i @ main.9ecae91d8fd1deedf944.js:2
58535 @ main.9ecae91d8fd1deedf944.js:2
i @ main.9ecae91d8fd1deedf944.js:2
(anonymous) @ main.9ecae91d8fd1deedf944.js:2
(anonymous) @ main.9ecae91d8fd1deedf944.js:2

I think it occurs below because theme item is not JSON.

https://github.com/argoproj/argo-ui/blob/master/v2/shared/context/theme.tsx#L10

So I think this should change key name more specific like "argo-ui-theme" because Argo CD can run by subpath mode.
Or should add error handlings to it.

Redesign V2 button component according to design:

https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26

Steps to reproduce:

1. Setup an app in Argo CD.

2. Try to set some 'External Vairables' for the application. Click Save and observe.

Right now the banner color is so dark that text is not clearly visible, match the left-side panel theme to match better overall experience

{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}

These are some of the accessibility issues i have identified on the side nav bar, with some quick solutions (may not be the best):

• there is no indication that this is a menu or nav - can use nav element
• there is no indication for the current active item for the screenreader user - can use aria-current="true"
• keyboard users can focus on the next item using tab, but can't activate it using space / Enter - can use button instead of a div with onClick
• there is a visual change on mouse hover but not on keyboard focus (although the tooltip gets shown, which is an indication that the focus has changed) - apply the same styles as hover

I've always wondered that the Helm icon in the Argo CD UI looks a bit strange, but today I decided to go down that rabbit hole and found out that this is actually being rendered by custom icon font. This screenshot is from Edge, but it looks similarly bad on all other browser I had available (Chrome and Firefox):

Redesign V2 checkbox component according to design
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26

React forms is deprecated and we need stop using it for new ui