Merge pull request #996 from devtron-labs/feat/app-list-table

feat: use Table in devtron, argo & flux listings

Author: whoami-amrit

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.22.0-alpha-11",
+    "version": "1.22.0-alpha-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -19,6 +19,7 @@ import Draggable, { DraggableProps } from 'react-draggable'
 import { ReactComponent as SortIcon } from '@Icons/ic-arrow-up-down.svg'
 import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
 import { Tooltip } from '@Common/Tooltip'
+import { Icon } from '@Shared/Components/Icon'
 
 import { SortingOrder } from '../Constants'
 import { noop } from '../Helper'
@@ -68,6 +69,7 @@ const SortableTableHeaderCell = ({
     id,
     handleResize,
     isResizable,
+    infoTooltipText,
 }: SortableTableHeaderCellProps) => {
     const isCellResizable = !!(isResizable && id && handleResize)
 
@@ -107,7 +109,18 @@ const SortableTableHeaderCell = ({
                 data-testid={title}
             >
                 <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
-                    <span className="dc__uppercase dc__truncate">{title}</span>
+                    <div className="dc__gap-4 flex left">
+                        <span className="dc__uppercase dc__truncate">{title}</span>
+
+                        {infoTooltipText && (
+                            <Icon
+                                name="ic-help-outline"
+                                color="N600"
+                                size={12}
+                                tooltipProps={{ content: infoTooltipText, alwaysShowTippyOnHover: true }}
+                            />
+                        )}
+                    </div>
                 </Tooltip>
                 {renderSortIcon()}
             </button>

src/Assets/IconV2/ic-ses.svg

@@ -26,6 +26,10 @@ export type SortableTableHeaderCellProps = {
      * @default false
      */
     showTippyOnTruncate?: boolean
+    /**
+     * If provided, shown in a tooltip on info-icon-outline beside the label
+     */
+    infoTooltipText?: string
 } & (
     | {
           /**

src/Assets/IconV2/ic-slack.svg

@@ -10,7 +10,6 @@ import './ConflictedResourcesTable.scss'
 const Wrapper = ({ children }: TableViewWrapperProps<unknown, FiltersTypeEnum.STATE>) => (
     <div className="dc__overflow-hidden flexbox-col flex-grow-1">{children}</div>
 )
-const filter = () => true
 
 const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourcesTableProps) => {
     const rows: RowsType<ResourceConflictItemType> = useMemo(
@@ -42,7 +41,7 @@ const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourc
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             ViewWrapper={Wrapper}
-            filter={filter}
+            filter={null}
         />
     )
 }

src/Assets/IconV2/ic-smtp.svg

@@ -252,9 +252,12 @@ import { ReactComponent as ICSecurityPolicy } from '@IconsV2/ic-security-policy.
 import { ReactComponent as ICSecurityScan } from '@IconsV2/ic-security-scan.svg'
 import { ReactComponent as ICSecurityVulnerability } from '@IconsV2/ic-security-vulnerability.svg'
 import { ReactComponent as ICSelected } from '@IconsV2/ic-selected.svg'
+import { ReactComponent as ICSes } from '@IconsV2/ic-ses.svg'
 import { ReactComponent as ICShapes } from '@IconsV2/ic-shapes.svg'
 import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
+import { ReactComponent as ICSlack } from '@IconsV2/ic-slack.svg'
 import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertical.svg'
+import { ReactComponent as ICSmtp } from '@IconsV2/ic-smtp.svg'
 import { ReactComponent as ICSoftwareReleaseManagement } from '@IconsV2/ic-software-release-management.svg'
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
 import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.svg'
@@ -308,6 +311,7 @@ import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
 import { ReactComponent as ICWarningFill } from '@IconsV2/ic-warning-fill.svg'
 import { ReactComponent as ICWarningStroke } from '@IconsV2/ic-warning-stroke.svg'
 import { ReactComponent as ICWebhook } from '@IconsV2/ic-webhook.svg'
+import { ReactComponent as ICWebhookConfig } from '@IconsV2/ic-webhook-config.svg'
 import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg'
 import { ReactComponent as ICWorldGlobe } from '@IconsV2/ic-world-globe.svg'
 
@@ -568,9 +572,12 @@ export const iconMap = {
     'ic-security-scan': ICSecurityScan,
     'ic-security-vulnerability': ICSecurityVulnerability,
     'ic-selected': ICSelected,
+    'ic-ses': ICSes,
     'ic-shapes': ICShapes,
     'ic-shield-check': ICShieldCheck,
+    'ic-slack': ICSlack,
     'ic-sliders-vertical': ICSlidersVertical,
+    'ic-smtp': ICSmtp,
     'ic-software-release-management': ICSoftwareReleaseManagement,
     'ic-sort-ascending': ICSortAscending,
     'ic-sort-descending': ICSortDescending,
@@ -623,6 +630,7 @@ export const iconMap = {
     'ic-warning-fill': ICWarningFill,
     'ic-warning-stroke': ICWarningStroke,
     'ic-warning': ICWarning,
+    'ic-webhook-config': ICWebhookConfig,
     'ic-webhook': ICWebhook,
     'ic-wifi-slash': ICWifiSlash,
     'ic-world-globe': ICWorldGlobe,