feat(edge/update): remote update structure [EE-4040] (#7553)

app/react/components/NavTabs/NavTabs.module.css

@@ -6,9 +6,9 @@
 }
 
 .parent a {
-  background-color: initial !important;
-  border: 1px solid transparent !important;
-  cursor: inherit !important;
+  background-color: initial;
+  border: 1px solid transparent;
+  cursor: inherit;
 }
 
 .parent {
@@ -22,11 +22,11 @@
 }
 
 .parent a {
-  color: var(--white-color) !important;
+  color: var(--white-color);
 }
 :global([theme='dark']) .parent a {
-  color: var(--black-color) !important;
+  color: var(--black-color);
 }
 :global([theme='highcontrast']) .parent a {
-  color: var(--black-color) !important;
+  color: var(--black-color);
 }

app/react/components/NavTabs/NavTabs.stories.tsx

@@ -18,7 +18,11 @@ function Template({ options = [] }: Args) {
   );
 
   return (
-    <NavTabs options={options} selectedId={selected} onSelect={setSelected} />
+    <NavTabs
+      options={options}
+      selectedId={selected}
+      onSelect={(value) => setSelected(value)}
+    />
   );
 }
 

app/react/components/NavTabs/NavTabs.tsx

@@ -3,19 +3,25 @@ import { ReactNode } from 'react';
 
 import styles from './NavTabs.module.css';
 
-export interface Option {
+export interface Option<T extends string | number = string> {
   label: string | ReactNode;
   children?: ReactNode;
-  id: string | number;
+  id: T;
 }
 
-interface Props {
-  options: Option[];
-  selectedId?: string | number;
-  onSelect?(id: string | number): void;
+interface Props<T extends string | number> {
+  options: Option<T>[];
+  selectedId?: T;
+  onSelect?(id: T): void;
+  disabled?: boolean;
 }
 
-export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
+export function NavTabs<T extends string | number = string>({
+  options,
+  selectedId,
+  onSelect = () => {},
+  disabled,
+}: Props<T>) {
   const selected = options.find((option) => option.id === selectedId);
 
   return (
@@ -52,7 +58,11 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
     </div>
   );
 
-  function handleSelect(option: Option) {
+  function handleSelect(option: Option<T>) {
+    if (disabled) {
+      return;
+    }
+
     if (option.children) {
       onSelect(option.id);
     }

app/react/components/datatables/Datatable.tsx

@@ -13,6 +13,7 @@ import { ReactNode } from 'react';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
 
 import { PaginationControls } from '@@/PaginationControls';
+import { IconProps } from '@@/Icon';
 
 import { Table } from './Table';
 import { multiple } from './filter-types';
@@ -28,7 +29,8 @@ interface DefaultTableSettings
 
 interface TitleOptionsVisible {
   title: string;
-  icon?: string;
+  icon?: IconProps['icon'];
+  featherIcon?: IconProps['featherIcon'];
   hide?: never;
 }