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

2025-08-05 22:05:23 +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()}
    >