feat(helm): update helm view [r8s-256] (#582)

Co-authored-by: Cara Ryan <cara.ryan@portainer.io>
Co-authored-by: James Player <james.player@portainer.io>
Co-authored-by: stevensbkang <skan070@gmail.com>

app/react/components/CodeEditor.tsx

@@ -36,7 +36,7 @@ interface Props extends AutomationTestingProps {
   placeholder?: string;
   type?: Type;
   readonly?: boolean;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   value: string;
   height?: string;
   versions?: number[];
@@ -136,7 +136,7 @@ function schemaValidationExtensions(schema: JSONSchema7) {
 
 export function CodeEditor({
   id,
-  onChange,
+  onChange = () => {},
   placeholder,
   readonly,
   value,

app/react/components/NavTabs/index.ts

@@ -1 +1,2 @@
 export { NavTabs } from './NavTabs';
+export type { Option } from './NavTabs';

app/react/components/StatusBadge.tsx

@@ -3,6 +3,56 @@ import { AriaAttributes, PropsWithChildren } from 'react';
 
 import { Icon, IconProps } from '@@/Icon';
 
+export type StatusBadgeType =
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'successLite'
+  | 'dangerLite'
+  | 'warningLite'
+  | 'mutedLite'
+  | 'infoLite'
+  | 'default';
+
+const typeClasses: Record<StatusBadgeType, string> = {
+  success: clsx(
+    'text-white bg-success-7',
+    'th-dark:text-white th-dark:bg-success-9'
+  ),
+  warning: clsx(
+    'text-white bg-warning-7',
+    'th-dark:text-white th-dark:bg-warning-9'
+  ),
+  danger: clsx(
+    'text-white bg-error-7',
+    'th-dark:text-white th-dark:bg-error-9'
+  ),
+  info: clsx('text-white bg-blue-7', 'th-dark:text-white th-dark:bg-blue-9'),
+  // the lite classes are a bit lighter in light mode and the same in dark mode
+  successLite: clsx(
+    'text-success-9 bg-success-3',
+    'th-dark:text-white th-dark:bg-success-9'
+  ),
+  warningLite: clsx(
+    'text-warning-9 bg-warning-3',
+    'th-dark:text-white th-dark:bg-warning-9'
+  ),
+  dangerLite: clsx(
+    'text-error-9 bg-error-3',
+    'th-dark:text-white th-dark:bg-error-9'
+  ),
+  mutedLite: clsx(
+    'text-gray-9 bg-gray-3',
+    'th-dark:text-white th-dark:bg-gray-9'
+  ),
+  infoLite: clsx(
+    'text-blue-9 bg-blue-3',
+    'th-dark:text-white th-dark:bg-blue-9'
+  ),
+  default: '',
+};
+
 export function StatusBadge({
   className,
   children,
@@ -12,7 +62,7 @@ export function StatusBadge({
 }: PropsWithChildren<
   {
     className?: string;
-    color?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+    color?: StatusBadgeType;
     icon?: IconProps['icon'];
   } & AriaAttributes
 >) {
@@ -21,13 +71,8 @@ export function StatusBadge({
       className={clsx(
         'inline-flex items-center gap-1 rounded',
         'w-fit px-1.5 py-0.5',
-        'text-sm font-medium text-white',
-        {
-          'bg-success-7 th-dark:bg-success-9': color === 'success',
-          'bg-warning-7 th-dark:bg-warning-9': color === 'warning',
-          'bg-error-7 th-dark:bg-error-9': color === 'danger',
-          'bg-blue-9': color === 'info',
-        },
+        'text-sm font-medium',
+        typeClasses[color],
         className
       )}
       // eslint-disable-next-line react/jsx-props-no-spreading

app/react/components/datatables/Datatable.tsx

@@ -70,6 +70,7 @@ export interface Props<D extends DefaultType> extends AutomationTestingProps {
   getRowCanExpand?(row: Row<D>): boolean;
   noWidget?: boolean;
   extendTableOptions?: (options: TableOptions<D>) => TableOptions<D>;
+  includeSearch?: boolean;
 }
 
 export function Datatable<D extends DefaultType>({
@@ -98,6 +99,7 @@ export function Datatable<D extends DefaultType>({
   totalCount = dataset.length,
   isServerSidePagination = false,
   extendTableOptions = (value) => value,
+  includeSearch,
 }: Props<D> & PaginationProps) {
   const pageCount = useMemo(
     () => Math.ceil(totalCount / settings.pageSize),
@@ -192,6 +194,7 @@ export function Datatable<D extends DefaultType>({
         renderTableActions={() => renderTableActions(selectedItems)}
         renderTableSettings={() => renderTableSettings(tableInstance)}
         data-cy={`${dataCy}-header`}
+        includeSearch={includeSearch}
       />
 
       <DatatableContent<D>

app/react/components/datatables/DatatableHeader.tsx

@@ -16,6 +16,7 @@ type Props = {
   renderTableActions?(): ReactNode;
   description?: ReactNode;
   titleId?: string;
+  includeSearch?: boolean;
 } & AutomationTestingProps;
 
 export function DatatableHeader({
@@ -28,8 +29,9 @@ export function DatatableHeader({
   description,
   titleId,
   'data-cy': dataCy,
+  includeSearch = !!title,
 }: Props) {
-  if (!title) {
+  if (!title && !includeSearch) {
     return null;
   }
 
@@ -50,12 +52,12 @@ export function DatatableHeader({
   return (
     <Table.Title
       id={titleId}
-      label={title}
+      label={title ?? ''}
       icon={titleIcon}
       description={description}
       data-cy={dataCy}
     >
-      {searchBar}
+      {includeSearch && searchBar}
       {tableActions}
       {tableTitleSettings}
     </Table.Title>

app/react/components/modals/Modal/Modal.tsx

@@ -47,10 +47,14 @@ export function Modal({
         <DialogContent
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
-          className={clsx(styles.modalDialog, 'bg-transparent p-0', {
-            'w-[450px]': size === 'md',
-            'w-[700px]': size === 'lg',
-          })}
+          className={clsx(
+            styles.modalDialog,
+            'max-w-[calc(100vw-2rem)] bg-transparent p-0',
+            {
+              'w-[450px]': size === 'md',
+              'w-[700px]': size === 'lg',
+            }
+          )}
         >
           <div className={clsx(styles.modalContent, 'relative', className)}>
             {children}