@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/views/contentModels/importing/ImportContext.js

@@ -1,215 +1,182 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImportContextProvider = exports.ImportContext = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
-var _react = _interopRequireWildcard(require("react"));
-var _hooks = require("../../../hooks");
-var _graphql = require("./graphql");
-var _types = require("./types");
-var _appAdmin = require("@webiny/app-admin");
-var parseFileData = function parseFileData(input) {
-  var data = {};
+import React, { useCallback, useState } from "react";
+import { useApolloClient } from "../../../hooks/index.js";
+import { IMPORT_STRUCTURE, VALIDATE_IMPORT_STRUCTURE } from "./graphql.js";
+import { ImportAction } from "./types.js";
+import { useSnackbar } from "@webiny/app-admin";
+const parseFileData = input => {
+  let data = {};
   try {
     data = JSON.parse(input);
-  } catch (ex) {
-    throw new Error("Could not parse the uploaded file. Make sure it's a valid JSON file.");
+  } catch {
+    throw new Error(`Could not parse the uploaded file. Make sure it's a valid JSON file.`);
   }
   if (!data.groups?.length && !data.models?.length) {
-    throw new Error("No groups and models in the uploaded file.");
+    throw new Error(`No groups and models in the uploaded file.`);
   } else if (data.groups.length === 0) {
-    throw new Error("No groups in the uploaded file. There must be at least one group.");
+    throw new Error(`No groups in the uploaded file. There must be at least one group.`);
   }
   return {
     groups: data.groups,
     models: data.models
   };
 };
-var parseFileContent = function parseFileContent(content) {
+const parseFileContent = content => {
   if (!content) {
-    throw new Error("Missing data in uploaded file.");
+    throw new Error(`Missing data in uploaded file.`);
   } else if (content instanceof ArrayBuffer) {
-    var data = Buffer.from(content).toString("utf8");
+    const data = Buffer.from(content).toString("utf8");
     return parseFileData(data);
   }
   return parseFileData(content);
 };
-var createSelected = function createSelected(params) {
-  var previous = params.previous,
-    models = params.models,
-    item = params.item;
-  var selected = new Map(previous);
+const createSelected = params => {
+  const {
+    previous,
+    models,
+    item
+  } = params;
+  let selected = new Map(previous);
   selected.set(item.id, item.related);
-  var _iterator = (0, _createForOfIteratorHelper2.default)(item.related),
-    _step;
-  try {
-    var _loop = function _loop() {
-        var id = _step.value;
-        var model = models.find(function (model) {
-          return model.id === id;
-        });
-        if (!model) {
-          return 0; // continue
-        } else if (selected.has(model.id) || model.imported) {
-          return 0; // continue
-        }
-        var related = createSelected({
-          previous: selected,
-          models: models,
-          item: model
-        });
-        selected = new Map([].concat((0, _toConsumableArray2.default)(selected), (0, _toConsumableArray2.default)(related)));
-      },
-      _ret;
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      _ret = _loop();
-      if (_ret === 0) continue;
+  for (const id of item.related) {
+    const model = models.find(model => model.id === id);
+    if (!model) {
+      continue;
+    } else if (selected.has(model.id) || model.imported) {
+      continue;
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+    const related = createSelected({
+      previous: selected,
+      models,
+      item: model
+    });
+    selected = new Map([...selected, ...related]);
   }
   return selected;
 };
-var getDataToImport = function getDataToImport(state) {
-  var selected = Array.from(state.selected.keys());
-  var groups = new Map();
-  var models = new Map();
-  var noAction = [_types.ImportAction.CODE, _types.ImportAction.NONE];
-  var _loop2 = function _loop2() {
-      var id = _selected[_i];
-      var validatedModel = state.models?.find(function (model) {
-        return model.id === id;
-      });
-      if (!validatedModel?.action || validatedModel.error || noAction.includes(validatedModel.action)) {
-        return 0; // continue
-      }
-      var validatedGroup = state.groups?.find(function (group) {
-        return group.id === validatedModel.group;
-      });
-      if (!validatedGroup?.action || validatedGroup.error) {
-        return 0; // continue
-      }
-      var model = state.data?.models?.find(function (model) {
-        return model.modelId === id;
-      });
-      if (!model) {
-        return 0; // continue
-      }
-      models.set(id, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, model), {}, {
-        layout: model.layout || [],
-        titleFieldId: model.titleFieldId || "id",
-        descriptionFieldId: model.descriptionFieldId || "",
-        imageFieldId: model.imageFieldId || "",
-        group: validatedModel.group
-      }));
-      if (noAction.includes(validatedGroup.action)) {
-        return 0; // continue
-      }
-      var group = state.data?.groups?.find(function (group) {
-        return group.id === validatedModel.group;
-      });
-      if (!group) {
-        return 0; // continue
-      }
-      groups.set(group.id, group);
-    },
-    _ret2;
-  for (var _i = 0, _selected = selected; _i < _selected.length; _i++) {
-    _ret2 = _loop2();
-    if (_ret2 === 0) continue;
+const getDataToImport = state => {
+  const selected = Array.from(state.selected.keys());
+  const groups = new Map();
+  const models = new Map();
+  const noAction = [ImportAction.CODE, ImportAction.NONE];
+  for (const id of selected) {
+    const validatedModel = state.models?.find(model => model.id === id);
+    if (!validatedModel?.action || validatedModel.error || noAction.includes(validatedModel.action)) {
+      continue;
+    }
+    const validatedGroup = state.groups?.find(group => group.slug === validatedModel.group);
+    if (!validatedGroup?.action || validatedGroup.error) {
+      continue;
+    }
+    const model = state.data?.models?.find(model => model.modelId === id);
+    if (!model) {
+      continue;
+    }
+    models.set(id, {
+      ...model,
+      layout: model.layout || [],
+      titleFieldId: model.titleFieldId || "id",
+      descriptionFieldId: model.descriptionFieldId || "",
+      imageFieldId: model.imageFieldId || "",
+      group: validatedModel.group
+    });
+    if (noAction.includes(validatedGroup.action)) {
+      continue;
+    }
+    const group = state.data?.groups?.find(group => group.slug === validatedModel.group);
+    if (!group) {
+      continue;
+    }
+    groups.set(group.id, group);
   }
   return {
     groups: Array.from(groups.values()),
     models: Array.from(models.values())
   };
 };
-var ImportContext = exports.ImportContext = /*#__PURE__*/_react.default.createContext(undefined);
-var ImportContextProvider = exports.ImportContextProvider = function ImportContextProvider(_ref) {
-  var children = _ref.children;
-  var client = (0, _hooks.useApolloClient)();
-  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var _useState = (0, _react.useState)({
-      data: null,
-      file: null,
-      loading: false,
-      validated: false,
-      selected: new Map()
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var hasSelected = (0, _react.useCallback)(function () {
+export const ImportContext = /*#__PURE__*/React.createContext(undefined);
+export const ImportContextProvider = ({
+  children
+}) => {
+  const client = useApolloClient();
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const [state, setState] = useState({
+    data: null,
+    file: null,
+    loading: false,
+    validated: false,
+    selected: new Map()
+  });
+  const hasSelected = useCallback(() => {
     return Array.from(state.selected.keys()).length > 0;
   }, [state.selected]);
-  var handleModelsValidation = (0, _react.useCallback)(async function () {
+  const handleModelsValidation = useCallback(async () => {
     if (!state.data) {
       console.error("Cannot import models without any data.");
       return;
     }
-    setState(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+    setState(prev => {
+      return {
+        ...prev,
         loading: true
-      });
+      };
     });
-    var result;
+    let result;
     try {
       result = await client.mutate({
-        mutation: _graphql.VALIDATE_IMPORT_STRUCTURE,
+        mutation: VALIDATE_IMPORT_STRUCTURE,
         variables: {
           data: state.data
         }
       });
     } catch (ex) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           errors: [ex.message]
-        });
+        };
       });
       return;
     }
-    var _ref2 = result.data?.validateImportStructure || {},
-      data = _ref2.data,
-      error = _ref2.error;
+    const {
+      data,
+      error
+    } = result.data?.validateImportStructure || {};
     if (error) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           errors: [error.message]
-        });
+        };
       });
       return;
     } else if (!data) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           errors: ["No validation data received."]
-        });
+        };
       });
       return;
     }
-    setState(function (prev) {
-      var next = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+    setState(prev => {
+      const next = {
+        ...prev,
         loading: false,
-        groups: data.groups.map(function (group) {
+        groups: data.groups.map(group => {
           return {
             id: group.group.id,
             name: group.group.name,
+            slug: group.group.slug,
             error: group.error,
             action: group.action
           };
         }),
-        models: data.models.map(function (model) {
+        models: data.models.map(model => {
           return {
             id: model.model.modelId,
             name: model.model.name,
@@ -220,11 +187,11 @@ var ImportContextProvider = exports.ImportContextProvider = function ImportConte
           };
         }),
         validated: true
-      });
+      };
       return next;
     });
   }, [state.data, setState]);
-  var handleModelsImport = (0, _react.useCallback)(async function () {
+  const handleModelsImport = useCallback(async () => {
     if (!state.data) {
       console.error("Cannot import models without any data.");
       return;
@@ -238,70 +205,73 @@ var ImportContextProvider = exports.ImportContextProvider = function ImportConte
       console.error("Cannot import models because none are selected.");
       return;
     }
-    setState(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+    setState(prev => {
+      return {
+        ...prev,
         loading: true
-      });
+      };
     });
-    var dataToImport = getDataToImport(state);
-    var result;
+    const dataToImport = getDataToImport(state);
+    let result;
     try {
       result = await client.mutate({
-        mutation: _graphql.IMPORT_STRUCTURE,
+        mutation: IMPORT_STRUCTURE,
         variables: {
           data: dataToImport
         },
         errorPolicy: "all"
       });
     } catch (ex) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           errors: [ex.message]
-        });
+        };
       });
       return;
     }
-    var _ref3 = result.data?.importStructure || {},
-      data = _ref3.data,
-      error = _ref3.error;
+    const {
+      data,
+      error
+    } = result.data?.importStructure || {};
     if (error) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           errors: [error.message]
-        });
+        };
       });
       return;
     } else if (!data) {
-      setState(function (prev) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+      setState(prev => {
+        return {
+          ...prev,
           loading: false,
           validated: false,
           errors: ["No structure import data received."]
-        });
+        };
       });
       return;
     }
-    setState(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+    setState(prev => {
+      return {
+        ...prev,
         loading: false,
         selected: new Map(),
-        groups: state.groups.map(function (group) {
-          var result = data.groups.find(function (item) {
-            return item.group.id === group.id;
-          });
+        groups: state.groups.map(group => {
+          const result = data.groups.find(item => item.group.id === group.id);
           return {
             id: result?.group.id || group.id,
             name: result?.group.name || group.name,
+            slug: result?.group.slug || group.slug,
             error: result?.error || group.error,
             imported: result ? result.imported : group.imported
           };
         }),
-        models: state.models.map(function (model) {
-          var result = data.models.find(function (item) {
-            return item.model.modelId === model.id;
-          });
+        models: state.models.map(model => {
+          const result = data.models.find(item => item.model.modelId === model.id);
           return {
             id: result?.model.modelId || model.id,
             name: result?.model.name || model.name,
@@ -313,126 +283,123 @@ var ImportContextProvider = exports.ImportContextProvider = function ImportConte
           };
         }),
         validated: true
-      });
+      };
     });
   }, [state.selected, state.data, setState]);
-  var onFile = (0, _react.useCallback)(function (file) {
-    var reader = new FileReader();
-    reader.addEventListener("load", function (event) {
+  const onFile = useCallback(file => {
+    const reader = new FileReader();
+    reader.addEventListener("load", event => {
       try {
-        var data = parseFileContent(event.target?.result);
-        setState(function (prev) {
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+        const data = parseFileContent(event.target?.result);
+        setState(prev => {
+          return {
+            ...prev,
             models: undefined,
             groups: undefined,
             selected: new Map(),
             errors: null,
             validated: false,
-            file: file,
-            data: data
-          });
+            file,
+            data
+          };
         });
       } catch (ex) {
-        setState(function (prev) {
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-            file: file,
+        setState(prev => {
+          return {
+            ...prev,
+            file,
             selected: new Map(),
             validated: false,
             groups: undefined,
             models: undefined,
             data: null,
             errors: [ex.message]
-          });
+          };
         });
       }
     });
     reader.readAsText(file);
   }, [state.data, setState]);
-  var onFileError = (0, _react.useCallback)(function (error) {
-    setState(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+  const onFileError = useCallback(error => {
+    setState(prev => {
+      return {
+        ...prev,
         file: null,
         errors: [error]
-      });
+      };
     });
   }, [state, setState]);
-  var isModelSelected = (0, _react.useCallback)(function (item) {
+  const isModelSelected = useCallback(item => {
     return state.selected.has(item.id);
   }, [state.selected]);
-  var isModelRelated = (0, _react.useCallback)(function (_ref4) {
-    var target = _ref4.id;
-    var _iterator2 = (0, _createForOfIteratorHelper2.default)(state.selected.keys()),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var id = _step2.value;
-        if (id === target) {
-          continue;
-        }
-        var related = state.selected.get(id);
-        if (related?.includes(id)) {
-          return true;
-        }
+  const isModelRelated = useCallback(({
+    id: target
+  }) => {
+    for (const id of state.selected.keys()) {
+      if (id === target) {
+        continue;
+      }
+      const related = state.selected.get(id);
+      if (related?.includes(id)) {
+        return true;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
     }
     return false;
   }, [state.selected]);
-  var addModel = (0, _react.useCallback)(function (item) {
+  const addModel = useCallback(item => {
     if (isModelSelected(item)) {
       return;
     }
-    setState(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+    setState(prev => {
+      return {
+        ...prev,
         selected: createSelected({
           previous: prev.selected,
           models: state.models || [],
-          item: item
+          item
         })
-      });
+      };
     });
   }, [isModelSelected, state.models, state.selected]);
-  var removeModel = (0, _react.useCallback)(function (item) {
+  const removeModel = useCallback(item => {
     if (isModelRelated(item)) {
-      showSnackbar("Model \"".concat(item.name, "\" is required due to another model having a relation to it."));
+      showSnackbar(`Model "${item.name}" is required due to another model having a relation to it.`);
       return;
     }
-    setState(function (prev) {
-      var selected = prev.selected;
+    setState(prev => {
+      const selected = prev.selected;
       selected.delete(item.id);
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-        selected: selected
-      });
+      return {
+        ...prev,
+        selected
+      };
     });
   }, [state, setState]);
-  var toggleModel = (0, _react.useCallback)(function (item) {
+  const toggleModel = useCallback(item => {
     if (isModelSelected(item)) {
       removeModel(item);
       return;
     }
     addModel(item);
   }, [isModelSelected, addModel, removeModel]);
-  var value = {
+  const value = {
     data: state.data || null,
     loading: state.loading || false,
     groups: state.groups || [],
     models: state.models || [],
     errors: state.errors || [],
     validated: state.validated || false,
-    hasSelected: hasSelected,
-    isModelRelated: isModelRelated,
+    hasSelected,
+    isModelRelated,
     file: state.file,
-    onFile: onFile,
-    onFileError: onFileError,
-    handleModelsValidation: handleModelsValidation,
-    handleModelsImport: handleModelsImport,
-    toggleModel: toggleModel,
-    isModelSelected: isModelSelected
+    onFile,
+    onFileError,
+    handleModelsValidation,
+    handleModelsImport,
+    toggleModel,
+    isModelSelected
   };
-  return /*#__PURE__*/_react.default.createElement(ImportContext.Provider, {
+  return /*#__PURE__*/React.createElement(ImportContext.Provider, {
     value: value
   }, children(value));
 };