`kind` is too narrow and `namespace` is too wide

[jsoref]

Checklist:

• [x] I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• [x] I've included steps to reproduce the bug.
• [x] I've pasted the output of argocd version.

Describe the bug

To Reproduce

1. Visit https://cd.apps.argoproj.io/applications/argocd/argo-cd?view=tree&resource=&operation=true

Expected behavior

• Kind column should be wide enough to generally cover values
• Namespace should be relatively narrow as it's unlikely to be particularly wide in general (esp vs Kind)

Screenshots

Version

{
    "Version": "v2.6.0+b2a6387",
    "BuildDate": "2023-01-25T18:33:47Z",
    "GitCommit": "b2a6387ca05f7f4e4d31ab057a8d3dc7f741e7ad",
    "GitTreeState": "clean",
    "GoVersion": "go1.18.10",
    "Compiler": "gc",
    "Platform": "linux/amd64",
    "KustomizeVersion": "v4.5.7 2022-08-02T16:35:54Z",
    "HelmVersion": "v3.10.3+g835b733",
    "KubectlVersion": "v0.24.2",
    "JsonnetVersion": "v0.19.1"
}

Logs

Paste any relevant application logs here.

[jsoref]

So, this would do two of the things I'd like to do:

diff --git a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
index 0f5bbac2..6a3fdfe2 100644
--- a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
+++ b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
@@ -156,4 +156,4 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl
                             <div className='row'>
-                                <div className='columns large-1 show-for-large application-operation-state__icons_container_padding'>KIND</div>
-                                <div className='columns large-2 show-for-large'>NAMESPACE</div>
+                                <div className='columns large-2 show-for-large application-operation-state__icons_container_padding'>KIND</div>
+                                <div className='columns large-1 show-for-large'>NAMESPACE</div>
                                 <div className='columns large-2 small-2'>NAME</div>
@@ -172,3 +172,3 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl
                                             </div>
-                                            <span title={getKind(resource)}>{getKind(resource)}</span>
+                                            <span title={getKind(resource)}>{breakPunctuation(getKind(resource))}</span>
                                         </div>
@@ -178,3 +178,3 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl
                                         <div className='columns large-2 small-2' title={resource.name}>
-                                            {resource.name}
+                                            {breakPunctuation(resource.name)}
                                         </div>
@@ -202,2 +202,6 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl

+const breakPunctuation = (value: string): string => {
+    return value.replace(/([/\.-])/g, "$1<wbr>");
+};
+
 const getKind = (resource: models.ResourceResult): string => {

I don't have the energy to figure out how to properly deal w/ the css side of things... The last cell seems to have the right magic...

[akshat-g-07]

Hey @jsoref, Is this issue still open? If yes, I would like to contribute.

[jsoref]

There's a PR that implements a part of this, if you can do the whole thing, that'd be welcome.

[akshat-g-07]

Hey @jsoref, I think I might be able to help with the css part. Although, I need help on how to see the webpage live on my browser.

I have cloned the repo to my local. What would be the next steps to see the webpage live?

Thanks :)

[crenshaw-dev]

@akshat-g-07 this guide is pretty good for UI changes: https://argo-cd.readthedocs.io/en/latest/developer-guide/contributors-quickstart/

[akshat-g-07]

Thanks for the help @crenshaw-dev . I will start right away.

[ianrwhitney]

Hey @jsoref,

I was working on this and wondering if i can get your input on approach. If we use the breakPunctuation function implemented above we will have to use react's dangerouslySetInnerHTML to allow the html to be rendered as html vs plain text. This opens up a XSS vulnerability since the data being rendered namespace and KIND appears to be from user and cannot completely be trusted. If we want to proceed w/ breakPunctuation functionality, we could install a sanitizer like Dompurify or others to handle this and configure it to allow only wbr tags. However, adds to bundle size for one use case. Let me know what direction you want to proceed w/ or if theres another option to explore.

thanks

[jsoref]

shouldn't you be able to escape & + < (or even everything?)?

Obviously I don't want any XSSs introduced, but it feels like you shouldn't need to add lots of library dependencies to address this issue.

I don't want to microspecify implementation details...