@boarteam/boar-pack-common-frontend 3.4.0 → 4.1.0

package/dist/tools/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./safetyRun"), exports);
+tslib_1.__exportStar(require("./useFullscreen"), exports);
+tslib_1.__exportStar(require("./numberTools"), exports);
+tslib_1.__exportStar(require("./useTabs"), exports);
+tslib_1.__exportStar(require("./WebsocketClient"), exports);
+tslib_1.__exportStar(require("./ApiError"), exports);
+//# sourceMappingURL=index.js.map

package/dist/tools/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tools/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,0DAAgC;AAChC,wDAA8B;AAC9B,oDAA0B;AAC1B,4DAAkC;AAClC,qDAA0B"}

package/dist/tools/numberTools.d.ts

@@ -0,0 +1 @@
+export declare function dropTrailZeroes(str: string | undefined): string;

package/dist/tools/numberTools.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropTrailZeroes = dropTrailZeroes;
+function dropTrailZeroes(str) {
+    if (typeof str === 'string' && str.includes(".")) {
+        return str.replace(/\.?0*$/, "");
+    }
+    return str;
+}
+//# sourceMappingURL=numberTools.js.map

package/dist/tools/numberTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberTools.js","sourceRoot":"","sources":["../../src/tools/numberTools.ts"],"names":[],"mappings":";;AAAA,0CAKC;AALD,SAAgB,eAAe,CAAC,GAAuB;IACrD,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACjD,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/tools/safetyRun.d.ts

@@ -0,0 +1,2 @@
+export declare function safetyRun<T>(promise?: Promise<T>): void;
+export default safetyRun;

package/dist/tools/safetyRun.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.safetyRun = safetyRun;
+function safetyRun(promise) {
+    promise?.catch((e) => {
+        console.error(e);
+    });
+}
+exports.default = safetyRun;
+//# sourceMappingURL=safetyRun.js.map

package/dist/tools/safetyRun.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safetyRun.js","sourceRoot":"","sources":["../../src/tools/safetyRun.ts"],"names":[],"mappings":";;AAAA,8BAIC;AAJD,SAAgB,SAAS,CAAI,OAAoB;IAC/C,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}

package/dist/tools/useFullscreen.d.ts

@@ -0,0 +1,6 @@
+export declare function useFullscreen(): {
+    isFullscreen: boolean;
+    setIsFullscreen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    fullscreenClassName: string;
+    fullscreenButton: import("react/jsx-runtime").JSX.Element;
+};

package/dist/tools/useFullscreen.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFullscreen = useFullscreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@ant-design/icons");
+const antd_1 = require("antd");
+const antd_style_1 = require("antd-style");
+function changeFullScreen(fullscreen) {
+    if (fullscreen) {
+        document.documentElement.requestFullscreen().catch((e) => {
+            console.log(e);
+        });
+    }
+    else if (document.fullscreenElement) {
+        document.exitFullscreen().catch((e) => {
+            console.log(e);
+        });
+    }
+}
+const useStyles = (0, antd_style_1.createStyles)(({ token }) => {
+    return {
+        fullscreen: {
+            backgroundColor: token.colorBgLayout,
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            zIndex: 100,
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+        },
+        notFullscreen: {},
+    };
+});
+function useFullscreen() {
+    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(false);
+    const { styles } = useStyles();
+    (0, react_1.useEffect)(() => {
+        const listener = () => {
+            setIsFullscreen(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', listener);
+        return () => {
+            document.removeEventListener('fullscreenchange', listener);
+        };
+    }, []);
+    const button = (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", onClick: () => changeFullScreen(!isFullscreen), children: isFullscreen ? (0, jsx_runtime_1.jsx)(icons_1.FullscreenExitOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }, "fullscreen");
+    return {
+        isFullscreen,
+        setIsFullscreen,
+        fullscreenClassName: isFullscreen ? styles.fullscreen : styles.notFullscreen,
+        fullscreenButton: button,
+    };
+}
+//# sourceMappingURL=useFullscreen.js.map

package/dist/tools/useFullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.js","sourceRoot":"","sources":["../../src/tools/useFullscreen.tsx"],"names":[],"mappings":";;AAiCA,sCA4BC;;AA7DD,iCAA4C;AAC5C,6CAA+E;AAC/E,+BAA8B;AAC9B,2CAA0C;AAE1C,SAAS,gBAAgB,CAAC,UAAmB;IAC3C,IAAI,UAAU,EAAE,CAAC;QACf,QAAQ,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;YACvD,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC;SAAM,IAAI,QAAQ,CAAC,iBAAiB,EAAE,CAAC;QACtC,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,IAAA,yBAAY,EAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,eAAe,EAAE,KAAK,CAAC,aAAa;YACpC,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,MAAM;SACjB;QACD,aAAa,EAAE,EAAE;KAClB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAgB,aAAa;IAC3B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAChD,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7D,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,uBAAC,aAAM,IAEpB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC,YAE7C,YAAY,CAAC,CAAC,CAAC,uBAAC,8BAAsB,KAAG,CAAC,CAAC,CAAC,uBAAC,0BAAkB,KAAG,IAJ/D,YAAY,CAKT,CAAC;IAEV,OAAO;QACL,YAAY;QACZ,eAAe;QACf,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa;QAC5E,gBAAgB,EAAE,MAAM;KACzB,CAAC;AACJ,CAAC"}

package/dist/tools/useTabs.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function useTabs<T extends string>(defaultTab: T): [T, React.Dispatch<React.SetStateAction<T>>];

package/dist/tools/useTabs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = useTabs;
+const react_router_dom_1 = require("react-router-dom");
+const react_1 = require("react");
+function useTabs(defaultTab) {
+    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [tab, setTab] = (0, react_1.useState)(() => {
+        return searchParams.get('tab') ?? defaultTab;
+    });
+    (0, react_1.useEffect)(() => {
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set('tab', tab);
+        setSearchParams(newSearchParams, { replace: true });
+    }, [tab]);
+    return [tab, setTab];
+}
+//# sourceMappingURL=useTabs.js.map

package/dist/tools/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","sourceRoot":"","sources":["../../src/tools/useTabs.ts"],"names":[],"mappings":";;AAGA,0BAaC;AAhBD,uDAAmD;AACnD,iCAAmD;AAEnD,SAAgB,OAAO,CAAmB,UAAa;IACrD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,kCAAe,GAAE,CAAC;IAC1D,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAI,GAAG,EAAE;QACrC,OAAO,YAAY,CAAC,GAAG,CAAC,KAAK,CAAM,IAAI,UAAU,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,IAAI,eAAe,CAAC,YAAY,CAAC,CAAC;QAC1D,eAAe,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,eAAe,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;AACvB,CAAC"}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "3.4.0",
+  "version": "4.1.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
   "license": "MIT",
-  "main": "src/index",
+  "main": "dist/index",
+  "types": "dist/index.d.ts",
   "files": [
-    "src"
+    "dist"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -48,7 +49,8 @@
     "umi": "^4.1.5"
   },
   "scripts": {
+    "build": "rm -rf dist && tsc --project tsconfig.build.json",
     "yalc:push": "yalc push"
   },
-  "gitHead": "b745744d08e2d668d216e20643375c38a40f92f4"
+  "gitHead": "db759a35be3528d9970b7d2408d3b90d19bd7741"
 }

package/src/components/ChangesModal/ChangesModal.tsx

@@ -1,262 +0,0 @@
-import { Badge, Button, message, Modal, Tabs } from "antd";
-import { ProColumns } from "@ant-design/pro-components";
-import { createStyles } from "antd-style";
-import { useEffect, useState } from "react";
-import ConflictsTab from "./ConflictsTab";
-import ErrorsTab from "./ErrorsTab";
-import ResultsTab from "./ResultsTab";
-import NewRecordsTab, { TCreatedRecordsColumnsConfig } from "./NewRecordsTab";
-import ChangesTab from "./ChangesTab";
-import { TDiffResult } from "../Table/useImportExport";
-import { CancelablePromise } from "@boarteam/boar-pack-users-frontend/dist/src/tools/api-client";
-
-enum ModalTabs {
-  changes = "changes",
-  newRecords = "newRecords",
-  errors = "errors",
-  results = "results",
-  conflicts = "conflicts",
-}
-
-export type TServerErrorItem = { field: string; message: string };
-
-export type TRelationalFields = Map<string, {
-  key: string,
-  data: {
-    [key: string]: any,
-  }
-}>
-
-export type TImportConflict = {
-  id: number;
-  version: number;
-  fields: Array<{
-    field: string;
-    current_value: any;
-    imported_value: any;
-  }>;
-}
-
-export type TImportResponse = {
-  errors?: Array<TServerErrorItem>,
-  conflicts?: Array<TImportConflict>,
-  created_count: number,
-  updated_count: number
-}
-
-const useStyles = createStyles(() => {
-  return {
-    changesModal: {
-      ".ant-modal-content": {
-        width: 800,
-      },
-      ".ant-table-content": {
-        overflowX: "auto",
-      },
-      "ul": {
-        maxHeight: 500,
-        overflowY: "auto",
-      },
-    },
-  };
-});
-
-export function ChangesModal<
-  Entity,
-  ImportRequestParams,
->({
-  onClose,
-  onCommit,
-  changes,
-  relationalFields,
-  originRecordsColumnsConfig,
-  changedRecordsColumnsConfig,
-  createdRecordsColumnsConfig,
-}: {
-  onCommit: (params: ImportRequestParams) => CancelablePromise<TImportResponse>,
-  onClose: () => void;
-  changes?: TDiffResult<Entity>,
-  relationalFields?: TRelationalFields,
-  originRecordsColumnsConfig: ProColumns<Entity>[],
-  changedRecordsColumnsConfig: ProColumns<Entity>[];
-  createdRecordsColumnsConfig: TCreatedRecordsColumnsConfig<Entity>;
-}) {
-  const { styles } = useStyles();
-  const [activeTab, setActiveTab] = useState<string>(ModalTabs.changes);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [importResponse, setImportResponse] = useState<TImportResponse>();
-  const [serverErrors, setServerErrors] = useState<TServerErrorItem[]>([]);
-  const [resolvedData, setResolvedData] = useState<Entity[]>();
-
-  useEffect(() => {
-    if (serverErrors.length > 0) {
-      setActiveTab(ModalTabs.errors);
-    }
-  }, [serverErrors.length]);
-
-  if (!changes) return null;
-
-  const { created, updated, tableData } = changes;
-
-  const onCancel = () => {
-    setActiveTab(ModalTabs.changes);
-    setImportResponse(undefined);
-    setServerErrors([]);
-    setResolvedData([])
-    onClose();
-  }
-
-  const handleCommitClick = async () => {
-    // TODO: Client validation
-    // ...
-    setServerErrors([]);
-    setIsLoading(true);
-
-    const modifiedSource = (resolvedData && resolvedData.length > 0)
-      ? resolvedData
-      : updated;
-
-    const payload: any = {
-      new: created,
-      modified: modifiedSource,
-    };
-
-    onCommit(payload).then((res) => {
-      setImportResponse(res);
-
-      // Check conflicts
-      if (res.conflicts?.length) {
-        setActiveTab(ModalTabs.conflicts);
-        message.error("There are conflicts in the import. Please resolve them.");
-        return;
-      }
-
-      setActiveTab(ModalTabs.results);
-    }).catch((err) => {
-      // TODO: Simplify
-      const status = err?.status || err?.statusCode || err?.response?.status;
-      const payload = err?.body || err?.response?.data || err?.data || err;
-
-      if ((status === 400 || payload?.statusCode === 400) && Array.isArray(payload?.errors)) {
-        setServerErrors(payload.errors);
-        message.error(payload.message || "Validation error");
-        return;
-      }
-
-      console.error("Commit failed:", err);
-      message.error("Unexpected error while committing changes");
-    }).finally(() => {
-      setIsLoading(false);
-    });
-  };
-
-  const tabList = [
-    {
-      key: ModalTabs.changes,
-      tab: "Changed values",
-      disabled: tableData.length === 0,
-      label: tableData.length ? (
-        <Badge
-          size="small"
-          color="blue"
-          count={tableData.length}
-        >
-          Changed Values
-        </Badge>
-      ) : "Changed Values",
-      children: <ChangesTab
-        changedRecordsColumnsConfig={changedRecordsColumnsConfig}
-        updated={tableData}
-      />,
-    },
-    {
-      key: ModalTabs.newRecords,
-      tab: "New records",
-      disabled: created.length === 0,
-      label: created.length ? (
-        <Badge
-          size="small"
-          color="blue"
-          count={created.length}
-        >
-          New Records
-        </Badge>
-      ) : "New Records",
-      children: <NewRecordsTab
-        createdRecordsColumnsConfig={createdRecordsColumnsConfig}
-        created={created}
-      />,
-    },
-    {
-      key: ModalTabs.errors,
-      tab: "Import errors",
-      disabled: serverErrors.length === 0,
-      label: serverErrors.length ? (
-        <Badge size="small" count={serverErrors.length}>
-          Errors
-        </Badge>
-      ) : "Errors",
-      children: <ErrorsTab serverErrors={serverErrors} />,
-    },
-    {
-      key: ModalTabs.conflicts,
-      tab: "Import conflicts",
-      disabled: !importResponse || importResponse.conflicts?.length === 0,
-      label: importResponse?.conflicts?.length ? (
-        <Badge size="small" count={importResponse.conflicts.length}>
-          Conflicts
-        </Badge>
-      ) : "Conflicts",
-      children: <ConflictsTab<Entity>
-        conflicts={importResponse?.conflicts}
-        setResolvedData={setResolvedData}
-        relationalFields={relationalFields}
-        originColumns={originRecordsColumnsConfig}
-      />,
-    },
-    {
-      key: ModalTabs.results,
-      tab: "Import results",
-      disabled: !importResponse || !!importResponse.conflicts?.length,
-      label: "Results",
-      children: <ResultsTab importStatistic={
-        {
-          created: importResponse?.created_count || 0,
-          updated: importResponse?.updated_count || 0,
-        }
-      } />,
-    },
-  ];
-
-  return (
-    <Modal
-      title="Preview changes"
-      open={true}
-      onCancel={onCancel}
-      footer={[
-        <Button key="close" onClick={onCancel}>Close</Button>,
-        <Button
-          loading={isLoading}
-          type="primary"
-          key="approve"
-          onClick={handleCommitClick}
-          disabled={
-            importResponse?.conflicts?.length === 0
-            || serverErrors.length > 0
-            || updated.length === 0 && created.length === 0
-          }
-        >
-          Commit
-        </Button>,
-      ]}
-      className={styles.changesModal}
-    >
-      <Tabs
-        activeKey={activeTab}
-        onChange={setActiveTab}
-        defaultActiveKey="1"
-        items={tabList}
-      />
-    </Modal>
-  )
-}

package/src/components/ChangesModal/ChangesTab.tsx

@@ -1,51 +0,0 @@
-import diff from "deep-diff";
-import { Tag } from "antd";
-import { ProColumns } from "@ant-design/pro-components";
-import { TDiffResult, TUpdatedDiffResult } from "../Table/useImportExport";
-import ProTable from "@ant-design/pro-table";
-
-function ChangesTab<Entity> ({ updated, changedRecordsColumnsConfig }: {
-  updated: TDiffResult<Entity>['tableData'],
-  changedRecordsColumnsConfig: ProColumns<Entity>[]
-}) {
-  if (!updated.length) {
-    return <>
-      No changes found.
-    </>
-  }
-
-  const updateColumns = [
-    ...changedRecordsColumnsConfig,
-    {
-      title: "Changes",
-      dataIndex: "diff",
-      key: "diff",
-      render: (diff: diff.Diff<any, any>[]) => (
-        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-          {diff.map((change, index) => {
-            return (
-              <div key={index} style={{ display: "flex", alignItems: "center" }}>
-                <Tag color="blue">{change.path.join(".")}</Tag>
-                {change.lhs ? `${change.lhs.toString()} →` : "- →"} {change.rhs ? change.rhs : change.rhs === false ? 'false' : '-'}
-              </div>
-            );
-          })}
-        </div>
-      ),
-    },
-  ];
-
-  return [
-    <h3 key='changes-header'>Changed Values (Local Comparing)</h3>,
-    <ProTable<TUpdatedDiffResult>
-      key='changes-data'
-      dataSource={updated}
-      columns={updateColumns}
-      rowKey='id'
-      search={false}
-      toolBarRender={false}
-    />
-  ]
-}
-
-export default ChangesTab;

package/src/components/ChangesModal/ConflictsTab.tsx

@@ -1,176 +0,0 @@
-import { Descriptions, TImportConflict } from "@boarteam/boar-pack-common-frontend";
-import { Tag, Tooltip, Button } from "antd";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { TImportResponse, TRelationalFields } from "./ChangesModal";
-import { keyBy } from "lodash";
-import { createStyles } from "antd-style";
-import { SwapOutlined } from "@ant-design/icons";
-import { ProColumns } from "@ant-design/pro-components";
-
-const useStyles = createStyles(() => {
-  return {
-    conflictsStyle: {
-      ".ant-descriptions-row > *:nth-child(1), .ant-descriptions-row > *:nth-child(2)": {
-
-      },
-      ".ant-descriptions-row > *:nth-child(3)": {
-
-      },
-      ".ant-descriptions-row > *:nth-child(4)": {
-        backgroundColor: "#f0fff0 !important",
-      },
-    },
-  };
-});
-
-const getCurrentKey = (field: string) => {
-  return `${field}-current`;
-};
-
-const getNormalizedKey = (field: string) => {
-  return field.replace('_id', '');
-}
-
-function ConflictsTab<Entity>({
-  conflicts,
-  relationalFields,
-  setResolvedData,
-  originColumns,
-}: {
-  conflicts?: TImportResponse['conflicts'],
-  relationalFields?: TRelationalFields;
-  setResolvedData?: Dispatch<SetStateAction<Entity[]>>;
-  originColumns: ProColumns<Entity>[];
-}) {
-
-  if (!conflicts || conflicts.length === 0) {
-    return <p>No conflicts found.</p>;
-  }
-
-  const getRelationalData = (key: string, value: string) => {
-    if (relationalFields?.has(key)) {
-      const relation = relationalFields.get(key);
-      return relation?.data[value] ?? null;
-    }
-
-    return value;
-  };
-
-  /*Initial value based on received conflicts
-  {
-    field: 'importing field value',
-    field-current: 'current field name from server',
-    ...
-  }*/
-  const [resolvedData, setLocalResolvedData] = useState<Record<string, any>[]>(conflicts.map(conflict => (
-    conflict.fields.reduce((acc: Record<string, any>, currentValue) => {
-      const key = getNormalizedKey(currentValue.field);
-      acc[key] = getRelationalData(key, currentValue.imported_value);
-      acc[getCurrentKey(key)] = getRelationalData(key, currentValue.current_value);
-
-      return acc;
-    }, {})
-  )));
-
-  useEffect(() => {
-    if (!setResolvedData) return;
-
-    const payload = resolvedData.map((obj, i) => {
-      const data = { ...obj };
-      // Remove the "current" postfix key from the resolved data
-      Object.keys(obj).forEach(key => {
-        if (key.endsWith('-current')) {
-          delete data[key];
-        }
-      })
-
-      return {
-        id: conflicts[i].id,
-        ...data,
-        version: conflicts[i].version,
-      }
-    });
-
-    setResolvedData(payload);
-  }, [resolvedData, conflicts, setResolvedData]);
-
-  const { styles } = useStyles();
-
-  const useCurrentValue = (conflict: TImportConflict, field: string) => {
-    const key = getNormalizedKey(field);
-
-    // Update the resolved data for this conflict
-    setLocalResolvedData(prev => {
-      const newData = [...prev];
-      const index = conflicts.indexOf(conflict);
-      newData[index] = {
-        ...newData[index],
-        [key]: newData[index][getCurrentKey(key)],
-      };
-      return newData;
-    });
-  };
-
-  const keyedOriginColumns = keyBy(originColumns, "dataIndex");
-
-  return conflicts.map((conflict, idx) => {
-    const conflictColumns: ProColumns[] = [];
-
-    conflict.fields.forEach(field => {
-      const key = getNormalizedKey(field.field);
-      const originColumn = keyedOriginColumns[key];
-      conflictColumns.push({
-        ...originColumn,
-        dataIndex: getCurrentKey(key),
-        editable: false,
-        // Should override render to keep -current value
-        render: (node) => node
-      });
-      conflictColumns.push({
-        ...originColumn,
-        title: (
-          <div style={{ textAlign: 'center' }}>
-            <Tooltip title="Use value from server">
-              <Button
-                size="small"
-                type="link"
-                icon={<SwapOutlined />}
-                onClick={() => useCurrentValue(conflict, field.field)}
-              />
-            </Tooltip>
-          </div>
-        ),
-      });
-    });
-
-    return (
-      <div key={idx} style={{ display: "flex", flexDirection: "column", gap: 15, width: "100%" }}>
-        <div>
-          <Tag color="error">ID {conflict.id}</Tag>
-          <Tag color="blue">Server version: v{conflict.version}</Tag>
-        </div>
-        <table>
-          <thead>
-            <tr>
-              <th style={{ width: '50%' }}>Current (From Server)</th>
-              <th style={{ width: '50%' }}>New (Importing)</th>
-            </tr>
-          </thead>
-        </table>
-        <Descriptions
-          size="small"
-          bordered
-          entity={resolvedData[idx]}
-          columns={conflictColumns}
-          column={2}
-          canEdit={true}
-          mainTitle={null}
-          className={styles.conflictsStyle}
-        >
-        </Descriptions>
-      </div>
-    );
-  });
-}
-
-export default ConflictsTab;