feat(helm): helm actions [r8s-259] (#715)

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

app/react/components/Badge/Badge.stories.tsx

@@ -18,6 +18,7 @@ export default {
           'dangerSecondary',
           'warnSecondary',
           'infoSecondary',
+          'muted',
         ],
       },
     },
@@ -35,6 +36,7 @@ function Template({ type = 'success' }: Props) {
     dangerSecondary: 'dangerSecondary badge',
     warnSecondary: 'warnSecondary badge',
     infoSecondary: 'infoSecondary badge',
+    muted: 'muted badge',
   };
   return <Badge type={type}>{message[type]}</Badge>;
 }

app/react/components/Badge/Badge.tsx

@@ -9,7 +9,8 @@ export type BadgeType =
   | 'successSecondary'
   | 'dangerSecondary'
   | 'warnSecondary'
-  | 'infoSecondary';
+  | 'infoSecondary'
+  | 'muted';
 
 // the classes are typed in full because tailwind doesn't render the interpolated classes
 const typeClasses: Record<BadgeType, string> = {
@@ -54,6 +55,11 @@ const typeClasses: Record<BadgeType, string> = {
     'th-dark:text-blue-3 th-dark:bg-blue-9',
     'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9'
   ),
+  muted: clsx(
+    'text-gray-9 bg-gray-3',
+    'th-dark:text-gray-3 th-dark:bg-gray-9',
+    'th-highcontrast:text-gray-3 th-highcontrast:bg-gray-9'
+  ),
 };
 
 export interface Props {