Formatting

VolkovLabs · Feb 16, 2024 · 476c155 · 476c155
1 parent e72e9c1
commit 476c155
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,9 +28,8 @@
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.195",
     "@types/node": "^18.16.18",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@volkovlabs/eslint-config": "^1.3.0",
     "@volkovlabs/jest-selectors": "^1.2.0",
     "copy-webpack-plugin": "^11.0.0",

diff --git a/src/components/FieldsEditor/FieldsEditor.test.tsx b/src/components/FieldsEditor/FieldsEditor.test.tsx
@@ -116,8 +116,6 @@ describe('Editor', () => {
 
   /**
    * Get Tested Component
-   * @param query
-   * @param restProps
    */
   const getComponent = ({ ...restProps }: Partial<Props>) => {
     return <FieldsEditor onChange={onChange} onRunQuery={onRunQuery} {...(restProps as any)} />;
@@ -140,7 +138,7 @@ describe('Editor', () => {
         expect.objectContaining({
           type: FieldType.string,
           name: '',
-          uid: '123456',
+          id: '123456',
         }),
       ]),
       rows: [],
@@ -151,13 +149,14 @@ describe('Editor', () => {
     const field1 = {
       name: 'name',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
     const field2 = {
       name: 'amount',
       type: FieldType.number,
-      uid: '13',
+      id: '13',
     };
+
     render(
       getComponent({
         model: {
@@ -170,21 +169,18 @@ describe('Editor', () => {
     expect(selectors.root()).toBeInTheDocument();
     expect(selectors.itemHeader(false, '12')).toBeInTheDocument();
     expect(selectors.itemHeader(false, '13')).toBeInTheDocument();
-
-    openItem(field1.uid);
-    openItem(field2.uid);
   });
 
   it('Should change name', () => {
     const field1 = {
       name: 'name',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
     const field2 = {
       name: 'amount',
       type: FieldType.number,
-      uid: '13',
+      id: '13',
     };
 
     render(
@@ -195,8 +191,9 @@ describe('Editor', () => {
         },
       })
     );
-    const item = openItem(field1.uid);
-    const item2 = openItem(field2.uid);
+
+    const item = openItem(field1.id);
+    const item2 = openItem(field2.id);
     fireEvent.change(item.fieldName(), { target: { value: 'Name New' } });
 
     const items = screen.getAllByTestId(TEST_IDS.fieldsEditor.fieldName);
@@ -211,13 +208,14 @@ describe('Editor', () => {
     const field1 = {
       name: 'name',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
     const field2 = {
       name: 'amount',
       type: FieldType.number,
-      uid: '13',
+      id: '13',
     };
+
     render(
       getComponent({
         model: {
@@ -226,7 +224,7 @@ describe('Editor', () => {
         },
       })
     );
-    openItem(field1.uid);
+    openItem(field1.id);
     const items = screen.getAllByTestId(TEST_IDS.fieldsEditor.item);
     expect(items[0]).toBeInTheDocument();
 
@@ -238,16 +236,16 @@ describe('Editor', () => {
 
     expect(onChange).toHaveBeenCalledWith({
       fields: [
-        { name: 'name', type: 'geo', uid: '12' },
-        { name: 'amount', type: 'number', uid: '13' },
+        { name: 'name', type: 'geo', id: '12' },
+        { name: 'amount', type: 'number', id: '13' },
       ],
       rows: [],
     });
 
     expect(onChange).toHaveBeenCalledWith({
       fields: expect.arrayContaining([
-        { name: 'name', type: 'geo', uid: '12' },
-        { name: 'amount', type: 'number', uid: '13' },
+        { name: 'name', type: 'geo', id: '12' },
+        { name: 'amount', type: 'number', id: '13' },
       ]),
       rows: [],
     });
@@ -257,13 +255,14 @@ describe('Editor', () => {
     const field1 = {
       name: 'name',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
+
     render(
       getComponent({
         model: {
           fields: [field1] as any,
-          rows: [{ uid: 'row123', value: ['some data'] }],
+          rows: [{ id: 'row123', value: ['some data'] }],
         },
       })
     );
@@ -273,8 +272,8 @@ describe('Editor', () => {
     expect(onChange).toHaveBeenCalledWith(
       expect.objectContaining({
         fields: expect.arrayContaining([
-          { name: 'name', type: 'string', uid: '12' },
-          { name: '', type: 'string', uid: '123456' },
+          { name: 'name', type: 'string', id: '12' },
+          { name: '', type: 'string', id: '123456' },
         ]),
       })
     );
@@ -284,13 +283,13 @@ describe('Editor', () => {
     const field1 = {
       name: 'name',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
 
     const { value } = createOnChangeHandler({
       model: {
         fields: [field1] as any,
-        rows: [{ uid: 'row123', value: ['some data'] }],
+        rows: [{ id: 'row123', value: ['some data'] }],
       },
     });
 
@@ -312,16 +311,18 @@ describe('Editor', () => {
       onDragEndHandler = onDragEnd;
       return children;
     });
+
     const field1 = {
       name: 'Drag Key',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
     const field2 = {
       name: 'Drag Key 2',
       type: FieldType.number,
-      uid: '13',
+      id: '13',
     };
+
     render(
       getComponent({
         model: {
@@ -357,16 +358,18 @@ describe('Editor', () => {
       onDragEndHandler = onDragEnd;
       return children;
     });
+
     const field1 = {
       name: 'Drag Key',
       type: FieldType.string,
-      uid: '12',
+      id: '12',
     };
     const field2 = {
       name: 'Drag Key 2',
       type: FieldType.number,
-      uid: '13',
+      id: '13',
     };
+
     render(
       getComponent({
         model: {

diff --git a/src/components/FieldsEditor/FieldsEditor.tsx b/src/components/FieldsEditor/FieldsEditor.tsx
@@ -58,7 +58,7 @@ export const FieldsEditor = ({ model, onChange }: Props) => {
   const onToggleItem = useCallback((item: ModelField) => {
     setCollapseState((prev) => ({
       ...prev,
-      [item.uid]: !prev[item.uid],
+      [item.id]: !prev[item.id],
     }));
   }, []);
 
@@ -89,7 +89,7 @@ export const FieldsEditor = ({ model, onChange }: Props) => {
       updatedModel.fields.splice(index + 1, 0, {
         name: '',
         type: FieldType.string,
-        uid: uuidv4(),
+        id: uuidv4(),
       } as ModelField);
 
       /**
@@ -298,10 +298,10 @@ export const FieldsEditor = ({ model, onChange }: Props) => {
                       data-testid={TEST_IDS.fieldsEditor.item}
                     >
                       <Collapse
-                        headerTestId={TEST_IDS.fieldsEditor.itemHeader(field.uid)}
-                        contentTestId={TEST_IDS.fieldsEditor.itemContent(field.uid)}
+                        headerTestId={TEST_IDS.fieldsEditor.itemHeader(field.id)}
+                        contentTestId={TEST_IDS.fieldsEditor.itemContent(field.id)}
                         fill="solid"
-                        isOpen={collapseState[field.uid]}
+                        isOpen={collapseState[field.id]}
                         onToggle={() => onToggleItem(field)}
                         title={
                           <>