fix: Truncated synchronize check-boxes should have tooltips argoproj#…

…4233 (argoproj#6954) Signed-off-by: ciiay <[email protected]>
tkasuz · Aug 20, 2021 · d12eafa · d12eafa
1 parent 0dcac9a
commit d12eafa
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.scss b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.scss
@@ -2,11 +2,30 @@
     margin-top: 0.5em;
     white-space: nowrap;
 
-    label {
-        max-width: 38em;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .container {
+        max-width: 32em;
+        white-space: nowrap;
         display: inline-block;
-        vertical-align: middle;
+        margin-right: 0.3em;
+
+        label::before,
+        label::after {
+            vertical-align: middle;
+            display: inline-block;
+            max-width: 50%;
+            overflow: hidden;
+            white-space: pre;
+        }
+
+        label::before {
+            content: attr(content-start);
+            text-overflow: ellipsis;
+        }
+
+        label::after {
+            content: attr(content-end);
+            text-overflow: clip;
+            direction: rtl; // This is to help put the ellipsis in the middle instead of at the end of the resource path
+        }
     }
-}
+}
diff --git a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
@@ -1,4 +1,4 @@
-import {ErrorNotification, FormField, NotificationType, SlidingPanel} from 'argo-ui';
+import {ErrorNotification, FormField, NotificationType, SlidingPanel, Tooltip} from 'argo-ui';
 import * as React from 'react';
 import {Form, FormApi, Text} from 'react-form';
 
@@ -172,9 +172,25 @@ export const ApplicationSyncPanel = ({application, selectedResource, hide}: {app
                                                 .filter(item => !item.hook)
                                                 .map((item, i) => {
                                                     const resKey = nodeKey(item);
+                                                    const contentStart = resKey.substr(0, Math.floor(resKey.length / 2));
+                                                    let contentEnd = resKey.substr(-Math.floor(resKey.length / 2));
+                                                    // We want the ellipsis to be in the middle of our text, so we use RTL layout to put it there.
+                                                    // Unfortunately, strong LTR characters get jumbled around, so make sure that the last character isn't strong.
+                                                    const indexOfFirstLetter = /[a-z]/i.exec(contentEnd).index;
+                                                    contentEnd = contentEnd.slice(indexOfFirstLetter);
+                                                    const isLongLabel = resKey.length > 68;
                                                     return (
                                                         <div key={resKey} className='application-sync-panel__resource'>
-                                                            <CheckboxField id={resKey} field={`resources[${i}]`} /> <label htmlFor={resKey}>{resKey}</label>{' '}
+                                                            <CheckboxField id={resKey} field={`resources[${i}]`} />
+                                                            <Tooltip content={<div style={{wordBreak: 'break-all'}}>{resKey}</div>}>
+                                                                <div className='container'>
+                                                                    {isLongLabel ? (
+                                                                        <label htmlFor={resKey} content-start={contentStart} content-end={contentEnd} />
+                                                                    ) : (
+                                                                        <label htmlFor={resKey}>{resKey}</label>
+                                                                    )}
+                                                                </div>
+                                                            </Tooltip>
                                                             <ComparisonStatusIcon status={item.status} resource={item} />
                                                         </div>
                                                     );