chore(deps): upgrade tailwind and prettier [EE-5218] (#10068)

2025-08-05 05:45:22 +02:00 · 2023-09-04 16:20:36 +01:00 · 2023-09-04 16:20:36 +01:00 · 0e2eb17220
commit 0e2eb17220
parent cb7377ead6
69 changed files with 444 additions and 316 deletions
--- a/app/react/components/BoxSelector/BoxOption.tsx
+++ b/app/react/components/BoxSelector/BoxOption.tsx
@ -51,7 +51,7 @@ export function BoxOption<T extends Value>({
        {!disabled && (
          <div
            className={clsx(
-              'absolute top-4 right-4 flex h-4 w-4 items-center justify-center border border-solid  font-bold text-white',
+              'absolute right-4 top-4 flex h-4 w-4 items-center justify-center border border-solid  font-bold text-white',
              {
                'border-gray-6 bg-white': !selected,
                'border-blue-8 bg-blue-8': selected,
--- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
+++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
@ -11,7 +11,7 @@ interface Props {
 export function LimitedToBeIndicator({ tooltipId, url }: Props) {
  return (
    <div className="absolute left-0 top-0 w-full">
-      <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm th-dark:bg-[color:var(--bg-BE-only)]">
+      <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 px-3 py-1 text-sm th-dark:bg-[color:var(--bg-BE-only)]">
        <a
          className="text-warning-9 th-dark:text-blue-8"
          href={url}
--- a/app/react/components/DashboardItem/DashboardItem.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.tsx
@ -43,7 +43,7 @@ export function DashboardItem({
    >
      <div
        className={clsx(
-          'text-muted absolute top-2 right-2 flex items-center text-xs transition-opacity',
+          'text-muted absolute right-2 top-2 flex items-center text-xs transition-opacity',
          isRefetching ? 'opacity-100' : 'opacity-0'
        )}
      >
@ -52,7 +52,7 @@ export function DashboardItem({
      </div>
      <div
        className={clsx(
-          'text-muted absolute top-2 right-2 flex items-center text-xs transition-opacity',
+          'text-muted absolute right-2 top-2 flex items-center text-xs transition-opacity',
          isLoading ? 'opacity-100' : 'opacity-0'
        )}
      >
--- a/app/react/components/EnvironmentStatusBadgeItem.tsx
+++ b/app/react/components/EnvironmentStatusBadgeItem.tsx
@ -21,7 +21,7 @@ export function EnvironmentStatusBadgeItem({
      className={clsx(
        'flex items-center gap-1',
        'rounded border-2 border-solid',
-        'w-fit py-px px-1',
+        'w-fit px-1 py-px',
        'text-xs font-semibold text-gray-7',
        {
          'border-green-3 bg-green-2': color === 'success',
--- a/app/react/components/InsightsBox/InsightsBox.tsx
+++ b/app/react/components/InsightsBox/InsightsBox.tsx
@ -64,7 +64,7 @@ export function InsightsBox({
        <Button
          icon={X}
          className={clsx(
-            'absolute top-3 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5',
+            'absolute right-2 top-3 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5',
            type === 'slim' && insightCloseId && 'top-1'
          )}
          color="link"
--- a/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
+++ b/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
@ -6,7 +6,9 @@
  background-color: var(--bg-tooltip-color) !important;
  color: var(--text-tooltip-color) !important;
  border-radius: 10px !important;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  box-shadow:
+    0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
  max-width: 400px;
  min-width: 50px;
  font-size: 1rem !important;
--- a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
+++ b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
@ -6,7 +6,9 @@
  background-color: var(--bg-tooltip-color) !important;
  color: var(--text-tooltip-color) !important;
  border-radius: 10px !important;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  box-shadow:
+    0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
  min-width: 50px;
  font-size: 1rem !important;
  text-align: left;
--- a/app/react/components/datatables/types.ts
+++ b/app/react/components/datatables/types.ts
@ -84,7 +84,7 @@ export function createPersistedStore<T extends BasicTableSettings>(
  storageKey: string,
  initialSortBy?: string | { id: string; desc: boolean },
  create: (set: ZustandSetFunc<T>) => Omit<T, keyof BasicTableSettings> = () =>
-    ({} as T)
+    ({}) as T
 ) {
  return createStore<T>()(
    persist(
@ -93,7 +93,7 @@ export function createPersistedStore<T extends BasicTableSettings>(
          ...sortableSettings<T>(set, initialSortBy),
          ...paginationSettings<T>(set),
          ...create(set),
-        } as T),
+        }) as T,
      {
        name: `datatable_settings_${keyBuilder(storageKey)}`,
      }
--- a/app/react/components/datatables/useTableState.ts
+++ b/app/react/components/datatables/useTableState.ts
@ -10,7 +10,7 @@ export type TableState<TSettings extends BasicTableSettings> = TSettings & {
 };

 export function useTableState<
-  TSettings extends BasicTableSettings = BasicTableSettings
+  TSettings extends BasicTableSettings = BasicTableSettings,
 >(
  store: ReturnType<typeof createPersistedStore<TSettings>>,
  storageKey: string
--- a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
@ -22,7 +22,7 @@ export function FormSectionTitle({
      <label
        htmlFor={htmlFor}
        className={clsx(
-          'col-sm-12 mt-1 mb-2 flex cursor-pointer items-center pl-0 font-medium',
+          'col-sm-12 mb-2 mt-1 flex cursor-pointer items-center pl-0 font-medium',
          tailwindTitleSize[titleSize]
        )}
      >
@ -33,7 +33,7 @@ export function FormSectionTitle({
  return (
    <div
      className={clsx(
-        'col-sm-12 mt-1 mb-2 pl-0 font-medium',
+        'col-sm-12 mb-2 mt-1 pl-0 font-medium',
        tailwindTitleSize[titleSize]
      )}
    >
--- a/app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx
+++ b/app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx
@ -14,7 +14,7 @@ export function InputGroupButtonWrapper({
        'input-group-btn [&>button]:!ml-0',
        // the button should be rounded at the end (right) if it's the last child and start (left) if it's the first child
        // if the button is in the middle of the group, it shouldn't be rounded
-        '[&>button]:!rounded-none [&:last-child>button]:!rounded-r-[5px] [&:first-child>button]:!rounded-l-[5px]'
+        '[&:first-child>button]:!rounded-l-[5px] [&:last-child>button]:!rounded-r-[5px] [&>button]:!rounded-none'
      )}
    >
      {children}
--- a/app/react/components/form-components/ReactSelect.css
+++ b/app/react/components/form-components/ReactSelect.css
@ -57,16 +57,28 @@
 /* Match the same box shadow styles as the other portainer inputs, which are inherited from the bootstrap form-control class */
 .portainer-selector-root .portainer-selector__control--is-focused {
  border-color: #66afe9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+  -webkit-box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+  transition:
+    border-color ease-in-out 0.15s,
+    -webkit-box-shadow ease-in-out 0.15s;
 }

 .portainer-selector-root .portainer-selector__control--is-focused:hover {
  border-color: #66afe9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+  -webkit-box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+  transition:
+    border-color ease-in-out 0.15s,
+    -webkit-box-shadow ease-in-out 0.15s;
 }

 .portainer-selector-root.sm .portainer-selector__control {
--- a/app/react/components/form-components/ReactSelect.tsx
+++ b/app/react/components/form-components/ReactSelect.tsx
@ -19,7 +19,7 @@ interface DefaultOption {
 type RegularProps<
  Option = DefaultOption,
  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 > = { isCreatable?: false; size?: 'sm' | 'md' } & ReactSelectProps<
  Option,
  IsMulti,
@ -30,7 +30,7 @@ type RegularProps<
 type CreatableProps<
  Option = DefaultOption,
  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 > = { isCreatable: true; size?: 'sm' | 'md' } & ReactSelectCreatableProps<
  Option,
  IsMulti,
@ -40,7 +40,7 @@ type CreatableProps<
 type Props<
  Option = DefaultOption,
  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 > =
  | CreatableProps<Option, IsMulti, Group>
  | RegularProps<Option, IsMulti, Group>;
@ -48,7 +48,7 @@ type Props<
 export function Select<
  Option = DefaultOption,
  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >({
  className,
  isCreatable = false,
@ -70,7 +70,7 @@ export function Select<
 export function Creatable<
  Option = DefaultOption,
  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >({ className, ...props }: ReactSelectCreatableProps<Option, IsMulti, Group>) {
  return (
    <ReactSelectCreatable
--- a/app/react/components/form-components/SwitchField/Switch.css
+++ b/app/react/components/form-components/SwitchField/Switch.css
@ -38,9 +38,15 @@
 .switch :checked + i {
  padding-right: 0;
  padding-left: var(--switch-size);
-  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #337ab7;
-  -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #337ab7;
-  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #337ab7;
+  -webkit-box-shadow:
+    inset 0 0 1px rgba(0, 0, 0, 0.5),
+    inset 0 0 40px #337ab7;
+  -moz-box-shadow:
+    inset 0 0 1px rgba(0, 0, 0, 0.5),
+    inset 0 0 40px #337ab7;
+  box-shadow:
+    inset 0 0 1px rgba(0, 0, 0, 0.5),
+    inset 0 0 40px #337ab7;
 }

 .switch :disabled + i {
@ -60,7 +66,9 @@

 .switch.business i {
  background-color: var(--BE-only);
-  box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px var(--BE-only);
+  box-shadow:
+    inset 0 0 1px rgb(0 0 0 / 50%),
+    inset 0 0 40px var(--BE-only);
 }

 .switch input[type='checkbox']:disabled + .slider {
--- a/app/react/components/form-components/useCaretPosition.ts
+++ b/app/react/components/form-components/useCaretPosition.ts
@ -1,7 +1,7 @@
 import { useRef, useState, useCallback, useEffect } from 'react';

 export function useCaretPosition<
-  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
 >() {
  const node = useRef<T>(null);
  const [start, setStart] = useState(0);
--- a/app/react/components/modals/Modal/CloseButton.tsx
+++ b/app/react/components/modals/Modal/CloseButton.tsx
@ -15,7 +15,7 @@ export function CloseButton({
      className={clsx(
        styles.close,
        className,
-        'close-button absolute top-4 right-5'
+        'close-button absolute right-5 top-4'
      )}
      onClick={() => onClose()}
    >
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
@ -67,7 +67,7 @@ export function EnvironmentsDatatable() {
              env.Id,
              edgeStackQuery.data?.Status[env.Id]
            ),
-          } satisfies EdgeStackEnvironment)
+          }) satisfies EdgeStackEnvironment
      ),
    [
      currentFileVersion,
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
@ -125,7 +125,7 @@ function ErrorCell({ getValue }: CellContext<EdgeStackEnvironment, string>) {
      className="flex cursor-pointer"
      onClick={() => setIsExpanded(!isExpanded)}
    >
-      <div className="pt-0.5 pr-1">
+      <div className="pr-1 pt-0.5">
        <Icon icon={isExpanded ? ChevronDown : ChevronRight} />
      </div>
      <div
--- a/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx
@ -196,14 +196,17 @@ function getUniqNames(appName: string, services: ServiceFormValues[]) {
 function getServiceTypeCounts(
  services: ServiceFormValues[]
 ): Record<ServiceTypeValue, number> {
-  return services.reduce((acc, service) => {
-    const type = serviceTypeEnumsToValues[service.Type];
-    const count = acc[type];
-    return {
-      ...acc,
-      [type]: count ? count + 1 : 1,
-    };
-  }, {} as Record<ServiceTypeValue, number>);
+  return services.reduce(
+    (acc, service) => {
+      const type = serviceTypeEnumsToValues[service.Type];
+      const count = acc[type];
+      return {
+        ...acc,
+        [type]: count ? count + 1 : 1,
+      };
+    },
+    {} as Record<ServiceTypeValue, number>
+  );
 }

 /**
@ -213,15 +216,18 @@ function getServiceTypeHasErrors(
  services: ServiceFormValues[],
  errors: FormikErrors<ServiceFormValues[] | undefined>
 ): Record<ServiceTypeValue, boolean> {
-  return services.reduce((acc, service, index) => {
-    const type = serviceTypeEnumsToValues[service.Type];
-    const serviceHasErrors = !!errors?.[index];
-    // if the service type already has an error, don't overwrite it
-    if (acc[type] === true) return acc;
-    // otherwise, set the error to the value of serviceHasErrors
-    return {
-      ...acc,
-      [type]: serviceHasErrors,
-    };
-  }, {} as Record<ServiceTypeValue, boolean>);
+  return services.reduce(
+    (acc, service, index) => {
+      const type = serviceTypeEnumsToValues[service.Type];
+      const serviceHasErrors = !!errors?.[index];
+      // if the service type already has an error, don't overwrite it
+      if (acc[type] === true) return acc;
+      // otherwise, set the error to the value of serviceHasErrors
+      return {
+        ...acc,
+        [type]: serviceHasErrors,
+      };
+    },
+    {} as Record<ServiceTypeValue, boolean>
+  );
 }
--- a/app/react/kubernetes/applications/CreateView/application-services/PublishingExplaination.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/PublishingExplaination.tsx
@ -30,7 +30,7 @@ export function PublishingExplaination() {
            ingresses
          </a>
          :
-          <ul className="mt-3 ml-5 [&>li]:mb-3 [&>li>ul>li]:ml-5">
+          <ul className="ml-5 mt-3 [&>li>ul>li]:ml-5 [&>li]:mb-3">
            <li>
              <b>Inside</b> the cluster{' '}
              <b>
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
@ -97,15 +97,16 @@ function getIngressPathsForAppServices(
    if (!ingress.Paths) {
      return [];
    }
-    const matchingIngressPaths = ingress.Paths?.filter((path) =>
-      services?.some((service) => {
-        const servicePorts = service.spec?.ports?.map((port) => port.port);
-        // include the ingress if the ingress path has a matching service name and port
-        return (
-          path.ServiceName === service.metadata?.name &&
-          servicePorts?.includes(path.Port)
-        );
-      })
+    const matchingIngressPaths = ingress.Paths?.filter(
+      (path) =>
+        services?.some((service) => {
+          const servicePorts = service.spec?.ports?.map((port) => port.port);
+          // include the ingress if the ingress path has a matching service name and port
+          return (
+            path.ServiceName === service.metadata?.name &&
+            servicePorts?.includes(path.Port)
+          );
+        })
    ).map((path) => {
      const secure =
        (ingress.TLS &&
--- a/app/react/kubernetes/applications/application.service.ts
+++ b/app/react/kubernetes/applications/application.service.ts
@ -84,7 +84,7 @@ async function getApplicationsForNamespace(

 // if not known, get the type of an application (Deployment, DaemonSet, StatefulSet or naked pod) by name
 export async function getApplication<
-  T extends Application | string = Application
+  T extends Application | string = Application,
 >(
  environmentId: EnvironmentId,
  namespace: string,
@ -233,7 +233,7 @@ async function patchApplicationByKind<T extends Application>(
 }

 async function getApplicationByKind<
-  T extends Application | string = Application
+  T extends Application | string = Application,
 >(
  environmentId: EnvironmentId,
  namespace: string,
--- a/app/react/kubernetes/applications/autoscaling.service.ts
+++ b/app/react/kubernetes/applications/autoscaling.service.ts
@ -12,7 +12,7 @@ import { parseKubernetesAxiosError } from '../axiosError';

 // when yaml is set to true, the expected return type is a string
 export function useHorizontalAutoScalarQuery<
-  T extends HorizontalPodAutoscaler | string = HorizontalPodAutoscaler
+  T extends HorizontalPodAutoscaler | string = HorizontalPodAutoscaler,
 >(
  environmentId: EnvironmentId,
  namespace: string,
@ -62,7 +62,7 @@ export async function getNamespaceHorizontalPodAutoscalers(
 }

 export async function getNamespaceHorizontalPodAutoscaler<
-  T extends HorizontalPodAutoscaler | string = HorizontalPodAutoscaler
+  T extends HorizontalPodAutoscaler | string = HorizontalPodAutoscaler,
 >(
  environmentId: EnvironmentId,
  namespace: string,
--- a/app/react/kubernetes/applications/utils.ts
+++ b/app/react/kubernetes/applications/utils.ts
@ -233,23 +233,31 @@ export function getRollbackPatchPayload(
      // keep the annotations to skip from the deployment, in the patch
      const applicationAnnotations = application.metadata?.annotations || {};
      const applicationAnnotationsInPatch =
-        unchangedAnnotationKeysForRollbackPatch.reduce((acc, annotationKey) => {
-          if (applicationAnnotations[annotationKey]) {
-            acc[annotationKey] = applicationAnnotations[annotationKey];
-          }
-          return acc;
-        }, {} as Record<string, string>);
+        unchangedAnnotationKeysForRollbackPatch.reduce(
+          (acc, annotationKey) => {
+            if (applicationAnnotations[annotationKey]) {
+              acc[annotationKey] = applicationAnnotations[annotationKey];
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );

      // add any annotations from the target revision that shouldn't be skipped
      const revisionAnnotations = previousRevision.metadata?.annotations || {};
      const revisionAnnotationsInPatch = Object.entries(
        revisionAnnotations
-      ).reduce((acc, [annotationKey, annotationValue]) => {
-        if (!unchangedAnnotationKeysForRollbackPatch.includes(annotationKey)) {
-          acc[annotationKey] = annotationValue;
-        }
-        return acc;
-      }, {} as Record<string, string>);
+      ).reduce(
+        (acc, [annotationKey, annotationValue]) => {
+          if (
+            !unchangedAnnotationKeysForRollbackPatch.includes(annotationKey)
+          ) {
+            acc[annotationKey] = annotationValue;
+          }
+          return acc;
+        },
+        {} as Record<string, string>
+      );

      const patchAnnotations = {
        ...applicationAnnotationsInPatch,
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.ts
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.ts
@ -14,11 +14,12 @@ export function getIsConfigMapInUse(
      ? app?.spec
      : app?.spec?.template?.spec;

-    const hasEnvVarReference = appSpec?.containers.some((container) =>
-      container.env?.some(
-        (envVar) =>
-          envVar.valueFrom?.configMapKeyRef?.name === configMap.metadata?.name
-      )
+    const hasEnvVarReference = appSpec?.containers.some(
+      (container) =>
+        container.env?.some(
+          (envVar) =>
+            envVar.valueFrom?.configMapKeyRef?.name === configMap.metadata?.name
+        )
    );
    const hasVolumeReference = appSpec?.volumes?.some(
      (volume) => volume.configMap?.name === configMap.metadata?.name
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/utils.ts
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/utils.ts
@ -11,11 +11,12 @@ export function getIsSecretInUse(secret: Secret, applications: Application[]) {
      ? app?.spec
      : app?.spec?.template?.spec;

-    const hasEnvVarReference = appSpec?.containers.some((container) =>
-      container.env?.some(
-        (envVar) =>
-          envVar.valueFrom?.secretKeyRef?.name === secret.metadata?.name
-      )
+    const hasEnvVarReference = appSpec?.containers.some(
+      (container) =>
+        container.env?.some(
+          (envVar) =>
+            envVar.valueFrom?.secretKeyRef?.name === secret.metadata?.name
+        )
    );
    const hasVolumeReference = appSpec?.volumes?.some(
      (volume) => volume.secret?.secretName === secret.metadata?.name
--- a/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
@ -44,7 +44,7 @@ export function Annotations({
              />
            </div>
            {errors[`annotations.key[${i}]`] && (
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                {errors[`annotations.key[${i}]`]}
              </FormError>
            )}
@ -64,7 +64,7 @@ export function Annotations({
              />
            </div>
            {errors[`annotations.value[${i}]`] && (
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                {errors[`annotations.value[${i}]`]}
              </FormError>
            )}
--- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
@ -79,7 +79,7 @@ export function CreateIngressView() {
      string[],
      Ingress[],
      Record<string, number>,
-      Record<string, string>
+      Record<string, string>,
    ] => {
      const ruleCounterByNamespace: Record<string, number> = {};
      const hostWithTLS: Record<string, string> = {};
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@ -311,7 +311,7 @@ export function IngressForm({
              <TooltipWithChildren message="Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.">
                <span>
                  <Button
-                    className="btn btn-sm btn-light mb-2 !ml-0"
+                    className="btn btn-sm btn-light !ml-0 mb-2"
                    onClick={() => addNewAnnotation()}
                    icon={Plus}
                  >
@ -406,13 +406,13 @@ export function IngressForm({
                        />
                      </InputGroup>
                      {errors[`hosts[${hostIndex}].host`] && (
-                        <FormError className="mt-1 !mb-0">
+                        <FormError className="!mb-0 mt-1">
                          {errors[`hosts[${hostIndex}].host`]}
                        </FormError>
                      )}
                    </div>

-                    <div className="form-group col-sm-6 col-lg-4 !pr-0 !pl-2">
+                    <div className="form-group col-sm-6 col-lg-4 !pl-2 !pr-0">
                      <InputGroup size="small">
                        <InputGroup.Addon>TLS secret</InputGroup.Addon>
                        <Select
@ -490,7 +490,7 @@ export function IngressForm({

                {host.Paths.map((path, pathIndex) => (
                  <div
-                    className="row path mt-5 !mb-5"
+                    className="row path !mb-5 mt-5"
                    key={`path_${path.Key}}`}
                  >
                    <div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
@ -531,7 +531,7 @@ export function IngressForm({
                      {errors[
                        `hosts[${hostIndex}].paths[${pathIndex}].servicename`
                      ] && (
-                        <FormError className="error-inline mt-1 !mb-0">
+                        <FormError className="error-inline !mb-0 mt-1">
                          {
                            errors[
                              `hosts[${hostIndex}].paths[${pathIndex}].servicename`
@ -587,7 +587,7 @@ export function IngressForm({
                          {errors[
                            `hosts[${hostIndex}].paths[${pathIndex}].serviceport`
                          ] && (
-                            <FormError className="mt-1 !mb-0">
+                            <FormError className="!mb-0 mt-1">
                              {
                                errors[
                                  `hosts[${hostIndex}].paths[${pathIndex}].serviceport`
@ -639,7 +639,7 @@ export function IngressForm({
                      {errors[
                        `hosts[${hostIndex}].paths[${pathIndex}].pathType`
                      ] && (
-                        <FormError className="mt-1 !mb-0">
+                        <FormError className="!mb-0 mt-1">
                          {
                            errors[
                              `hosts[${hostIndex}].paths[${pathIndex}].pathType`
@ -672,7 +672,7 @@ export function IngressForm({
                      {errors[
                        `hosts[${hostIndex}].paths[${pathIndex}].path`
                      ] && (
-                        <FormError className="mt-1 !mb-0">
+                        <FormError className="!mb-0 mt-1">
                          {
                            errors[
                              `hosts[${hostIndex}].paths[${pathIndex}].path`
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
@ -63,7 +63,7 @@ export function AssociateAMTDialog({
            {environments.map((env) => (
              <div
                key={env.Id}
-                className={clsx('flex h-8 items-center pt-1 pl-2')}
+                className={clsx('flex h-8 items-center pl-2 pt-1')}
              >
                <Checkbox
                  id={`${env.Id}`}
--- a/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
+++ b/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
@ -57,7 +57,7 @@ function CreateView() {
      />

      <BetaAlert
-        className="ml-[15px] mb-2"
+        className="mb-2 ml-[15px]"
        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
      />

--- a/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
+++ b/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
@ -81,7 +81,7 @@ function ItemView() {
      />

      <BetaAlert
-        className="ml-[15px] mb-2"
+        className="mb-2 ml-[15px]"
        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
      />

--- a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
@ -41,7 +41,7 @@ export function ListView() {
      />

      <BetaAlert
-        className="ml-[15px] mb-2"
+        className="mb-2 ml-[15px]"
        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
      />

--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@ -41,7 +41,7 @@ export function Sidebar() {
        >
          <Header logo={LogoURL} />
          {/* negative margin + padding -> scrollbar won't hide the content */}
-          <div className="mt-6 -mr-4 flex-1 overflow-y-auto pr-4">
+          <div className="-mr-4 mt-6 flex-1 overflow-y-auto pr-4">
            <ul className="space-y-9">
              <SidebarItem
                to="portainer.home"
--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@ -66,7 +66,7 @@ export function Head({

  return (
    <Tippy
-      className="!rounded-md bg-blue-9 !py-2 !px-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
+      className="!rounded-md bg-blue-9 !px-3 !py-2 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
      content={label}
      delay={[0, 0]}
      duration={[0, 0]}