Fix symbol-description ESLint rule (#3954)

* Add symbol descriptions

* Set symbol-description to error & bump migration

* add changeset

.changeset/tasty-cheetahs-change.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix symbol-description ESLint rule

.eslintrc.json

@@ -111,8 +111,7 @@
     "no-useless-escape": "off",
     "prefer-promise-reject-errors": "off",
     "react/display-name": "off",
-    "react/jsx-key": "off",
+    "react/jsx-key": "warn"
-    "symbol-description": "warn"
   },
   "ignorePatterns": ["node_modules/", "**/types/**/*", "type-policies.ts"]
 }

src/collections/views/consts.ts

@@ -1,2 +1,2 @@
-export const COLLECTION_DETAILS_FORM_ID = Symbol();
+export const COLLECTION_DETAILS_FORM_ID = Symbol("collection-details-form-id");
-export const COLLECTION_CREATE_FORM_ID = Symbol();
+export const COLLECTION_CREATE_FORM_ID = Symbol("collection-create-form-id");

src/components/Datagrid/customCells/NumberCell.tsx

@@ -10,7 +10,7 @@ import React from "react";
 
 import { Locale } from "../../Locale";
 
-export const numberCellEmptyValue = Symbol();
+export const numberCellEmptyValue = Symbol("number-cell-empty-value");
 interface NumberCellProps {
   readonly kind: "number-cell";
   readonly value: number | typeof numberCellEmptyValue;

src/components/Form/useExitFormDialog.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useContext, useRef } from "react";
 
 import { ExitFormDialogContext } from "./ExitFormDialogProvider";
@@ -12,14 +11,14 @@ export interface UseExitFormDialogResult
 }
 
 export interface UseExitFormDialogProps {
-  formId: symbol;
+  formId: symbol | undefined;
   isDisabled?: boolean;
 }
 
 export const useExitFormDialog = (
   { formId, isDisabled }: UseExitFormDialogProps = { formId: undefined },
 ): UseExitFormDialogResult => {
-  const id = useRef(formId || Symbol()).current;
+  const id = useRef(formId || Symbol("exit-form-fallback-id")).current;
 
   const exitDialogProps = useContext(ExitFormDialogContext);
   const { setIsDirty, setIsSubmitDisabled, setExitDialogSubmitRef } =

src/discounts/views/SaleCreate/consts.ts

@@ -1 +1 @@
-export const SALE_CREATE_FORM_ID = Symbol();
+export const SALE_CREATE_FORM_ID = Symbol("sale-create-form-id");

src/discounts/views/SaleDetails/types.ts

@@ -1 +1 @@
-export const SALE_UPDATE_FORM_ID = Symbol();
+export const SALE_UPDATE_FORM_ID = Symbol("sale-update-form-id");

src/discounts/views/VoucherCreate/types.ts

@@ -1 +1 @@
-export const VOUCHER_CREATE_FORM_ID = Symbol();
+export const VOUCHER_CREATE_FORM_ID = Symbol("voucher-create-form-id");

src/discounts/views/VoucherDetails/types.ts

@@ -1 +1 @@
-export const VOUCHER_UPDATE_FORM_ID = Symbol();
+export const VOUCHER_UPDATE_FORM_ID = Symbol("voucher-update-form-id");

src/hooks/useChannels.test.ts

@@ -27,7 +27,7 @@ describe("useChannels", () => {
           closeModal: jest.fn,
           openModal: jest.fn,
         },
-        { formId: Symbol() },
+        { formId: Symbol("channel-test-form-id") },
       ),
     );
 
@@ -54,7 +54,7 @@ describe("useChannels", () => {
           closeModal: jest.fn,
           openModal: jest.fn,
         },
-        { formId: Symbol() },
+        { formId: Symbol("channel-test-form-id") },
       ),
     );
 
@@ -85,7 +85,7 @@ describe("useChannels", () => {
           closeModal: jest.fn,
           openModal: jest.fn,
         },
-        { formId: Symbol() },
+        { formId: Symbol("channel-test-form-id") },
       ),
     );
 

src/products/views/ProductCreate/consts.ts

@@ -1 +1 @@
-export const PRODUCT_CREATE_FORM_ID = Symbol();
+export const PRODUCT_CREATE_FORM_ID = Symbol("product-create-form-id");

src/products/views/ProductUpdate/consts.ts

@@ -1,3 +1,3 @@
 export const CHANNELS_AVAILIABILITY_MODAL_SELECTOR = "open-channels-picker";
 
-export const PRODUCT_UPDATE_FORM_ID = Symbol();
+export const PRODUCT_UPDATE_FORM_ID = Symbol("product-update-form-id");

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx

@@ -42,7 +42,7 @@ const defaultChannels = [
 
 const props: ShippingZoneRatesCreatePageProps = {
   backUrl: "",
-  formId: Symbol(),
+  formId: Symbol("shipping-zone-rates-create-form-id"),
   allChannelsCount: 3,
   channelErrors: [],
   disabled: false,

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx

@@ -64,7 +64,7 @@ const props: ShippingZoneRatesPageProps = {
   toggleAll: () => undefined,
   toolbar: () => undefined,
   variant: ShippingMethodTypeEnum.PRICE,
-  formId: Symbol(),
+  formId: Symbol("shipping-zone-rates-details-form-id"),
   taxClasses,
   fetchMoreTaxClasses: undefined,
 };

src/shipping/views/RateCreate.tsx

@@ -30,7 +30,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import React from "react";
 import { useIntl } from "react-intl";
 
-const FORM_ID = Symbol();
+const FORM_ID = Symbol("shipping-zone-rates-create-form-id");
 
 export interface RateCreateProps {
   id: string;

src/shipping/views/RateUpdate.tsx

@@ -61,7 +61,7 @@ import { mapEdgesToItems } from "@dashboard/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-const FORM_ID = Symbol();
+const FORM_ID = Symbol("shipping-zone-rates-details-form-id");
 
 export interface RateUpdateProps {
   id: string;