fix(helm): helm charts view bad icon aspect ratio EE-4451 (#7875)

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

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/react';
+
+import { BadgeIcon, BadgeSize, Props } from './BadgeIcon';
+
+export default {
+  component: BadgeIcon,
+  title: 'Components/BadgeIcon',
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['md', 'lg', 'xl', '2xl', '3xl'],
+      },
+    },
+    icon: {
+      control: {
+        type: 'select',
+        options: ['edit', 'info', 'smile', 'users'],
+      },
+    },
+  },
+} as Meta<Props>;
+
+// : JSX.IntrinsicAttributes & PropsWithChildren<Props>
+function Template({
+  size = '3xl',
+  icon = 'edit',
+}: {
+  size?: BadgeSize;
+  icon: string;
+}) {
+  return <BadgeIcon icon={icon} size={size} featherIcon />;
+}
+
+export const Example = Template.bind({});

app/react/components/BadgeIcon/BadgeIcon.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+import { Icon, IconProps } from '@@/Icon';
+
+export type BadgeSize = 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+export interface Props extends IconProps {
+  size?: BadgeSize;
+}
+
+export function BadgeIcon({ icon, featherIcon, size = '3xl' }: Props) {
+  const sizeClasses = iconSizeToClasses(size);
+  return (
+    <div
+      className={clsx(
+        sizeClasses,
+        `badge-icon
+      bg-blue-3 text-blue-8
+      th-dark:bg-gray-9 th-dark:text-blue-3
+      rounded-full
+      inline-flex items-center justify-center
+   `
+      )}
+    >
+      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
+    </div>
+  );
+}
+
+function iconSizeToClasses(size: BadgeSize) {
+  switch (size) {
+    case 'md':
+      return 'h-6 w-6 text-md';
+    case 'lg':
+      return 'h-8 w-8 text-lg';
+    case 'xl':
+      return 'h-10 w-10 text-xl';
+    case '2xl':
+      return 'h-12 w-12 text-2xl';
+    case '3xl':
+      return 'h-14 w-14 text-3xl';
+    default:
+      return 'h-14 w-14 text-3xl';
+  }
+}

app/react/components/BadgeIcon/index.ts

@@ -0,0 +1 @@
+export { BadgeIcon } from './BadgeIcon';

app/react/components/BoxSelector/BadgeIcon.tsx

@@ -1,19 +0,0 @@
-import { Icon, IconProps } from '@@/Icon';
-
-type Props = IconProps;
-
-export function BadgeIcon({ icon, featherIcon }: Props) {
-  return (
-    <div
-      className={`badge-icon
-   text-3xl h-14 w-14
-   bg-blue-3 text-blue-8
-   th-dark:bg-gray-9 th-dark:text-blue-3
-   rounded-full
-   inline-flex items-center justify-center 
-`}
-    >
-      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
-    </div>
-  );
-}

app/react/components/BoxSelector/common-options/build-methods.tsx

@@ -2,7 +2,8 @@ import { Edit, FileText, Globe, Upload } from 'react-feather';
 
 import GitIcon from '@/assets/ico/git.svg?c';
 
-import { BadgeIcon } from '../BadgeIcon';
+import { BadgeIcon } from '@@/BadgeIcon';
+
 import { BoxSelectorOption } from '../types';
 
 export const editor: BoxSelectorOption<'editor'> = {

app/react/components/FallbackImage.tsx

@@ -1,18 +1,15 @@
-import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import { Icon, IconMode, IconSize } from './Icon';
+import { BadgeIcon, BadgeSize } from './BadgeIcon/BadgeIcon';
 
 interface Props {
   // props for the image to load
   src: string; // a link to an external image
   fallbackIcon: string;
   alt?: string;
-  size?: IconSize;
+  size?: BadgeSize;
   className?: string;
-  // additional fallback icon props
-  fallbackMode?: IconMode;
-  fallbackClassName?: string;
+  // additional fallback badge props
   feather?: boolean;
 }
 
@@ -22,22 +19,18 @@ export function FallbackImage({
   alt,
   size,
   className,
-  fallbackMode,
-  fallbackClassName,
   feather,
 }: Props) {
   const [error, setError] = useState(false);
 
-  const classes = clsx(className, { [`icon-${size}`]: size });
-
   useEffect(() => {
     setError(false);
   }, [src]);
 
-  if (!error) {
+  if (!error && src) {
     return (
       <img
-        className={classes}
+        className={className}
         src={src}
         alt={alt}
         onError={() => setError(true)}
@@ -46,13 +39,5 @@ export function FallbackImage({
   }
 
   // fallback icon if there is an error loading the image
-  return (
-    <Icon
-      icon={fallbackIcon}
-      feather={feather}
-      className={fallbackClassName}
-      size={size}
-      mode={fallbackMode}
-    />
-  );
+  return <BadgeIcon icon={fallbackIcon} featherIcon={feather} size={size} />;
 }

app/react/portainer/access-control/EditDetails/useOptions.tsx

@@ -6,7 +6,7 @@ import { ownershipIcon } from '@/portainer/filters/filters';
 import { Team } from '@/react/portainer/users/teams/types';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
-import { BadgeIcon } from '@@/BoxSelector/BadgeIcon';
+import { BadgeIcon } from '@@/BadgeIcon';
 
 import { ResourceControlOwnership } from '../types';