feat(edge/templates): introduce edge app templates [EE-6209] (#10480)

app/react/components/Blocklist/BlocklistItem.tsx

@@ -23,7 +23,7 @@ export function BlocklistItem<T extends ElementType>({
       type="button"
       className={clsx(
         className,
-        'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0',
+        'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0 text-left',
         {
           'blocklist-item--selected': isSelected,
         }

app/react/components/FallbackImage.tsx

@@ -1,23 +1,14 @@
-import { useEffect, useState } from 'react';
-
-import { BadgeIcon, BadgeSize } from './BadgeIcon/BadgeIcon';
+import { ReactNode, useEffect, useState } from 'react';
 
 interface Props {
   // props for the image to load
   src?: string; // a link to an external image
-  fallbackIcon: string;
+  fallbackIcon: ReactNode;
   alt?: string;
-  size?: BadgeSize;
   className?: string;
 }
 
-export function FallbackImage({
-  src,
-  fallbackIcon,
-  alt,
-  size,
-  className,
-}: Props) {
+export function FallbackImage({ src, fallbackIcon, alt, className }: Props) {
   const [error, setError] = useState(false);
 
   useEffect(() => {
@@ -36,5 +27,5 @@ export function FallbackImage({
   }
 
   // fallback icon if there is an error loading the image
-  return <BadgeIcon icon={fallbackIcon} size={size} />;
+  return <>{fallbackIcon}</>;
 }

app/react/components/form-components/PortainerSelect.tsx

@@ -12,6 +12,7 @@ import { Select as ReactSelect } from '@@/form-components/ReactSelect';
 export interface Option<TValue> {
   value: TValue;
   label: string;
+  disabled?: boolean;
 }
 
 type Options<TValue> = OptionsOrGroups<
@@ -99,6 +100,7 @@ export function SingleSelect<TValue = string>({
       options={options}
       value={selectedValue}
       onChange={(option) => onChange(option ? option.value : null)}
+      isOptionDisabled={(option) => !!option.disabled}
       data-cy={dataCy}
       inputId={inputId}
       placeholder={placeholder}
@@ -155,6 +157,7 @@ export function MultiSelect<TValue = string>({
       isClearable={isClearable}
       getOptionLabel={(option) => option.label}
       getOptionValue={(option) => String(option.value)}
+      isOptionDisabled={(option) => !!option.disabled}
       options={options}
       value={selectedOptions}
       closeMenuOnSelect={false}