@scaleflex/widget-explorer 0.0.1

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/GeneralSection.js

@@ -0,0 +1,182 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Table, TableBody } from '@scaleflex/ui/core';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from '@scaleflex/widget-common';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import getJsonParsedValue from '@scaleflex/widget-utils/lib/getJsonParsedValue';
+import { useExplorer, useFileMetadata } from '../../../../hooks';
+import { getMetaRegionalGroupsLanguagesApiValues } from '../../../metadata.adapter';
+import { selectMetadataRegionalFilters, selectMetadataRegionalGroups } from '../../../../slices/metadata.slice';
+import { generateFileDescription, generateFileTags } from '../../../../slices/files.slice';
+import TableSeparator from './TableSeparator';
+import FieldRow from './FieldRow';
+import EditableField from './EditableField';
+import FieldValue from './FieldValue';
+import StyledGeneralTab from './GeneralTab.styled';
+import EditDetailsButton from '../../../common/EditDetailsButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GeneralSection = function GeneralSection(_ref) {
+  var checkUserPermissions = _ref.checkUserPermissions,
+    file = _ref.file,
+    isEditing = _ref.isEditing,
+    updateEditedDetails = _ref.updateEditedDetails,
+    editedDetails = _ref.editedDetails,
+    metaErrors = _ref.metaErrors,
+    _ref$tagsFieldMaxWidt = _ref.tagsFieldMaxWidth,
+    tagsFieldMaxWidth = _ref$tagsFieldMaxWidt === void 0 ? 320 : _ref$tagsFieldMaxWidt,
+    _ref$smallerFont = _ref.smallerFont,
+    smallerFont = _ref$smallerFont === void 0 ? false : _ref$smallerFont,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    scrollToMetaField = _ref.scrollToMetaField,
+    activeTabId = _ref.activeTabId,
+    enableEditing = _ref.enableEditing,
+    isUserNotAllowedToEdit = _ref.isUserNotAllowedToEdit,
+    showEditButton = _ref.showEditButton,
+    dismissMarginTop = _ref.dismissMarginTop;
+  var dispatch = useDispatch();
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    config = _useExplorer$opts2.config,
+    enableAIDescription = _useExplorer$opts2.enableAIDescription;
+  var _ref2 = (config === null || config === void 0 ? void 0 : config.tagging) || {},
+    _ref2$suggestionList = _ref2.suggestionList,
+    allTags = _ref2$suggestionList === void 0 ? [] : _ref2$suggestionList,
+    autoTagging = _ref2.autoTagging;
+  var metaRegionalGroups = useSelector(selectMetadataRegionalGroups);
+  var metaRegionalFilters = useSelector(selectMetadataRegionalFilters);
+  var _useFileMetadata = useFileMetadata({
+      file: file,
+      scrollToMetaField: scrollToMetaField,
+      smallerFont: smallerFont
+    }),
+    readOnlyGeneralMetadataFields = _useFileMetadata.readOnlyGeneralMetadataFields,
+    editableGeneralMetadataGFields = _useFileMetadata.editableGeneralMetadataGFields;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDescriptionLoading = _useState4[0],
+    setIsDescriptionLoading = _useState4[1];
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var onChange = useCallback(function (value, key, regionalVariantFieldKey) {
+    updateEditedDetails(_defineProperty({}, key, regionalVariantFieldKey ? _objectSpread(_objectSpread(_objectSpread({}, getJsonParsedValue(file.meta[key])), getJsonParsedValue(editedDetails[key])), {}, _defineProperty({}, regionalVariantFieldKey, value)) : value));
+  }, [editedDetails, file]);
+  var generateTags = useCallback(function () {
+    if (isLoading) return;
+    var languages = getMetaRegionalGroupsLanguagesApiValues(metaRegionalGroups);
+    var tagging = config.tagging;
+    setIsLoading(true);
+    handlePromise(dispatch(generateFileTags(_objectSpread(_objectSpread({}, tagging), {}, {
+      uuid: file.uuid,
+      languages: languages
+    }))), function (file) {
+      info(i18n('generateTagsSuccessInfo'), 'success', 3000);
+      onChange(file === null || file === void 0 ? void 0 : file.tags, 'tags');
+    }, function () {}, function () {
+      return setIsLoading(false);
+    });
+  }, [isLoading, file]);
+  var generateDescription = useCallback(function () {
+    if (isDescriptionLoading) return;
+    setIsDescriptionLoading(true);
+    handlePromise(dispatch(generateFileDescription({
+      uuid: file.uuid
+    })), function (newDescription) {
+      updateEditedDetails({
+        description: _objectSpread(_objectSpread(_objectSpread({}, getJsonParsedValue(file.meta.description)), getJsonParsedValue(editedDetails.description)), newDescription)
+      });
+      info(i18n('explorerFileWindowGenerateDescriptionSuccess'), 'success', 3000);
+    }, undefined, function () {
+      return setIsDescriptionLoading(false);
+    });
+  }, [isDescriptionLoading, file]);
+  var _renderField = function renderField(field, index) {
+    if (isEditing) {
+      return /*#__PURE__*/_jsx(EditableField, {
+        file: file,
+        field: field,
+        isEditing: isEditing,
+        editedDetails: editedDetails,
+        checkUserPermissions: checkUserPermissions,
+        isLoading: isLoading,
+        isDescriptionLoading: isDescriptionLoading,
+        allTags: allTags,
+        isShowGenerateTagsBtn: autoTagging,
+        enableAIDescription: enableAIDescription,
+        tagsFieldMaxWidth: tagsFieldMaxWidth,
+        metaRegionalFilters: metaRegionalFilters,
+        metaRegionalGroups: metaRegionalGroups,
+        iconPrimaryColor: iconPrimaryColor,
+        metaErrors: metaErrors,
+        size: size,
+        onChange: onChange,
+        generateTags: generateTags,
+        generateDescription: generateDescription,
+        activeTabId: activeTabId
+      });
+    }
+    return /*#__PURE__*/_jsx(FieldValue, {
+      field: field,
+      file: file,
+      editedDetails: editedDetails,
+      smallerFont: smallerFont
+    });
+  };
+  return /*#__PURE__*/_jsxs(StyledGeneralTab.TableContainer, {
+    dismissMarginTop: dismissMarginTop,
+    children: [/*#__PURE__*/_jsx(Table, {
+      padding: "none",
+      size: "medium",
+      children: /*#__PURE__*/_jsxs(TableBody, {
+        children: [readOnlyGeneralMetadataFields.map(function (field) {
+          return /*#__PURE__*/_jsx(FieldRow, {
+            field: field,
+            file: file,
+            editedDetails: editedDetails,
+            renderField: null,
+            isEditing: isEditing,
+            smallerFont: smallerFont
+          }, field.uuid);
+        }), /*#__PURE__*/_jsx(TableSeparator, {}), editableGeneralMetadataGFields.map(function (field, i) {
+          return /*#__PURE__*/_jsx(FieldRow, {
+            field: field,
+            file: file,
+            editedDetails: editedDetails,
+            renderField: function renderField(field) {
+              return _renderField(field, i);
+            },
+            isEditing: isEditing,
+            smallerFont: smallerFont
+          }, field.uuid);
+        })]
+      })
+    }), showEditButton && !isEditing && /*#__PURE__*/_jsx(EditDetailsButton, {
+      enableEditing: enableEditing,
+      isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+      mt: "5px",
+      mr: "1px",
+      bottom: "calc(100% - 40px)"
+    })]
+  });
+};
+export default GeneralSection;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/GeneralTab.constants.js

@@ -0,0 +1,2 @@
+export var NON_CENTERED_FIELD_TYPES = ['textarea', 'tags', 'multi-select'];
+export var ATTACHMENTS_ASSETS = 'attachments-assets';

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/GeneralTab.styled.js

@@ -0,0 +1,112 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { TableContainer as SfxTableContainer, Table as SfxTable, TableRow, TableCell, Button, Accordion, TagField, Divider, Skeleton } from '@scaleflex/ui/core';
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import { NON_CENTERED_FIELD_TYPES } from './GeneralTab.constants';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: space-between;\n"])));
+var TabSections = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 16px 24px;\n  overflow-y: auto;\n\n  ", "\n\n  .SfxTagField-tagInputFieldWrapper {\n    width: 100%;\n  }\n\n  .SfxAccordion-root {\n    &:not(:last-child) {\n      margin-bottom: 18px;\n    }\n  }\n"])), function (_ref) {
+  var isEditing = _ref.isEditing;
+  return isEditing && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-bottom: 40px; // 40px = some spacing for being shown the whole section with no action buttons overlapping\n  "])));
+});
+var SectionAccordion = styled(Accordion)(function (_ref2) {
+  var _ref2$theme = _ref2.theme,
+    palette = _ref2$theme.palette,
+    typography = _ref2$theme.typography;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:not(:last-child):after {\n    content: '';\n    display: block;\n    height: 1px;\n    background: ", ";\n    margin: 24px -24px 0;\n  }\n  &:last-child {\n    margin-bottom: 24px;\n  }\n\n  .SfxAccordionHeader-label {\n    ", ";\n    color: ", ";\n  }\n\n  .SfxAccordionDetails-root {\n    margin: 24px 0 16px;\n  }\n"])), palette[PC.BordersSecondary], typography.font[FV.TitleH4], palette[PC.TextPrimary]);
+});
+var ActionsBtns = styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  box-shadow: ", ";\n  padding: 10px 24px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 12px;\n  height: 60px;\n  margin-top: auto;\n\n  ", " {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n\n  ", " & {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n\n  ", " & {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n"])), theme.palette[PC.BordersSecondary], theme.shadows[PSH.FooterPopup], theme.breakpoints.down('lg'), theme.palette[PC.BackgroundStateless], theme.breakpoints.classes.md, theme.palette[PC.BackgroundStateless], theme.breakpoints.classes.sm, theme.palette[PC.BackgroundStateless]);
+});
+var ActionBtn = styled(Button)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 8px 32px;\n  width: 120px;\n  height: 40px;\n"])));
+var TableContainer = styled(SfxTableContainer)(function (_ref4) {
+  var dismissMarginTop = _ref4.dismissMarginTop,
+    dismissFixedLayout = _ref4.dismissFixedLayout;
+  return "\n  position: relative;\n  overflow: unset;\n\n  ".concat(!dismissMarginTop && 'margin-top: 12px;', "\n");
+});
+var Table = styled(SfxTable)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  table-layout: auto;\n  width: 100%;\n"])));
+var TblFieldRow = styled(TableRow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  vertical-align: baseline;\n\n  ", " {\n    display: block;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.breakpoints.down('lg');
+});
+var TblFieldsHead = styled(TableRow)(function (_ref6) {
+  var _ref6$theme = _ref6.theme,
+    palette = _ref6$theme.palette,
+    typography = _ref6$theme.typography,
+    paddingTop = _ref6.paddingTop;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  color: ", ";\n\n  td {\n    border: none;\n    height: 32px;\n    padding-top: ", "px;\n    ", ";\n  }\n\n  &:first-child td {\n    padding-top: 0;\n  }\n"])), palette[PC.TextPrimary], paddingTop, typography.font[FV.TitleH6]);
+});
+var TblFieldRowSeparator = styled(TableCell)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  height: initial;\n  border: none;\n\n  &::after {\n    /* Adding it inside :after for considering the margin & background for it */\n    content: '';\n    margin: 18px 0; // top 24px (18px here) and 6px from the top & bottom columns each.\n    width: 100%;\n    height: 1px;\n    background: ", ";\n    display: block;\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette[PC.BordersSecondary];
+});
+var TblFieldLabel = styled(TableCell)(function (_ref8) {
+  var theme = _ref8.theme,
+    avoidSmallWidth = _ref8.smallerFont,
+    fieldType = _ref8.fieldType;
+  return "\n  color: ".concat(theme.palette[PC.TextSecondary], ";\n  padding: ").concat(avoidSmallWidth ? '9px 0' : '8px 0;', ";\n  border: none;\n  height: initial;\n  width: 140px;\n  padding-right: 12px;\n\n  .SfxEllipsed-root {\n    width: fit-content;\n  }\n\n  ").concat(NON_CENTERED_FIELD_TYPES.includes(fieldType) && theme.breakpoints.down('lg'), " {\n    padding: 20px 0;\n  }\n\n  ").concat(!NON_CENTERED_FIELD_TYPES.includes(fieldType) && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    vertical-align: middle;\n  "]))), "\n");
+});
+var TblFieldLabelContent = styled.div(function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return "\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  svg {\n    flex-shrink: 0;\n    color: ".concat(palette[PC.IconsSecondary], ";\n\n    &:hover {\n      color: ").concat(palette[PC.IconsSecondaryHover], ";\n    }\n  }\n");
+});
+var TblFieldValue = styled(TableCell)(function (_ref10) {
+  var smallerFont = _ref10.smallerFont,
+    disableMaxHeight = _ref10.disableMaxHeight,
+    theme = _ref10.theme;
+  return "\n  ".concat(theme.typography.font[FV.TextMedium], ";\n  border: none;\n  padding: ").concat(smallerFont ? '9px 0' : '8px 0;', ";\n  height: initial;\n  vertical-align: middle;\n  position: relative;\n\n  .SfxTagField-tagInputFieldWrapper {\n    /* TODO: This should be done in sfx/ui */\n    width: 100%;\n  }\n\n  .SfxDate-picker-root {\n    width: 100%;\n  }\n\n  ").concat(theme.breakpoints.down('lg'), " {\n    display: block;\n    padding: ").concat(smallerFont ? '6px 0 6px 12px' : '8px 0 8px 16px', ";\n    max-width: 366px;\n  }\n\n  ").concat(disableMaxHeight && "\n    .filerobot-common-FormControl > div {\n      max-height: initial;\n      min-height: initial;\n    }\n  ", "\n");
+});
+var TblFieldTitle = styled.p(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  ", ";\n"])), function (_ref11) {
+  var font = _ref11.theme.typography.font,
+    smallerFont = _ref11.smallerFont;
+  return font[smallerFont ? FV.LabelSmall : FV.LabelMedium];
+});
+var TagsField = styled(TagField)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  max-height: 114px;\n  overflow-y: auto;\n"])));
+var ValueWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  position: relative;\n  color: ", ";\n  ", "\n  ", ";\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.palette[PC.IconsPrimary];
+}, function (_ref13) {
+  var marginRight = _ref13.marginRight;
+  return marginRight && "margin-right: ".concat(marginRight, ";");
+}, function (_ref14) {
+  var theme = _ref14.theme,
+    smallerFont = _ref14.smallerFont;
+  return theme.typography.font[smallerFont ? FV.TextMedium : FV.TextLarge];
+});
+var NoValueWrapper = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.palette[PC.TextPlaceholder];
+});
+var SkeletonWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-top: 18px;\n"])));
+var SkeletonRow = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 18px;\n"])));
+var SkeletonContainer = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n"])));
+var SkeletonLeftSide = styled(Skeleton)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  margin-right: 24px;\n"])));
+var SkeletonDivider = styled(Divider)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  margin: 20px 0px;\n"])));
+var EditDetailsBtnWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n"])));
+var Styled = {
+  Wrapper: Wrapper,
+  TabSections: TabSections,
+  SectionAccordion: SectionAccordion,
+  Table: Table,
+  TableContainer: TableContainer,
+  TblFieldsHead: TblFieldsHead,
+  TblFieldRow: TblFieldRow,
+  TblFieldLabel: TblFieldLabel,
+  TblFieldLabelContent: TblFieldLabelContent,
+  TblFieldValue: TblFieldValue,
+  TblFieldTitle: TblFieldTitle,
+  TagsField: TagsField,
+  ActionsBtns: ActionsBtns,
+  ActionBtn: ActionBtn,
+  ValueWrapper: ValueWrapper,
+  NoValueWrapper: NoValueWrapper,
+  SkeletonDivider: SkeletonDivider,
+  SkeletonWrapper: SkeletonWrapper,
+  SkeletonContainer: SkeletonContainer,
+  SkeletonRow: SkeletonRow,
+  SkeletonLeftSide: SkeletonLeftSide,
+  TblFieldRowSeparator: TblFieldRowSeparator,
+  EditDetailsBtnWrapper: EditDetailsBtnWrapper
+};
+export default Styled;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/GeneralTabSkeleton.js

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { Skeleton } from '@scaleflex/ui/core';
+import { useTheme, useMediaQuery } from '@scaleflex/ui/theme/hooks';
+import getRandomNumber from '@scaleflex/widget-utils/lib/getRandomNumber';
+import StyledGeneralTab from './GeneralTab.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GeneralTabSkeleton = function GeneralTabSkeleton() {
+  var theme = useTheme();
+  var downLg = useMediaQuery(theme.breakpoints.down('lg'));
+  var minSkeletonWidth = downLg ? 250 : 100;
+  var maxSkeletonWidth = downLg ? 450 : 250;
+  var randomWidthNumber = useMemo(function () {
+    return getRandomNumber(minSkeletonWidth, maxSkeletonWidth);
+  }, [minSkeletonWidth, maxSkeletonWidth]);
+  return /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonWrapper, {
+    children: [/*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(8).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsx(StyledGeneralTab.SkeletonDivider, {}), /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(3).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsx(StyledGeneralTab.SkeletonDivider, {}), /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(4).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledGeneralTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledGeneralTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    })]
+  });
+};
+export default GeneralTabSkeleton;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/TableSeparator.js

@@ -0,0 +1,10 @@
+import StyledGeneralTab from './GeneralTab.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TableSeparator = function TableSeparator() {
+  return /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldRow, {
+    children: /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldRowSeparator, {
+      colSpan: 2
+    })
+  });
+};
+export default TableSeparator;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/index.js

@@ -0,0 +1,100 @@
+import { Spinner } from '@scaleflex/widget-common';
+import { FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import GeneralSection from './GeneralSection';
+import StyledGeneralTab from './GeneralTab.styled';
+import GeneralTabSkeleton from './GeneralTabSkeleton';
+import EditDetailsButton from '../../../common/EditDetailsButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GeneralTab = function GeneralTab(_ref) {
+  var originalFile = _ref.originalFile,
+    file = _ref.previewedFile,
+    setIsTabsHidden = _ref.setIsTabsHidden,
+    isPreUpload = _ref.isPreUpload,
+    i18n = _ref.i18n,
+    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
+    isFileLoading = _ref.isFileLoading,
+    editFileDetailsProps = _ref.editFileDetailsProps,
+    activeTabId = _ref.activeTabId;
+  var _useExplorer = useExplorer(),
+    checkUserPermissions = _useExplorer.checkUserPermissions;
+  var _ref2 = editFileDetailsProps || {},
+    isEditing = _ref2.isEditing,
+    cancelEditing = _ref2.cancelEditing,
+    enableEditing = _ref2.enableEditing,
+    editedDetails = _ref2.editedDetails,
+    setDetails = _ref2.setDetails,
+    saveEditedDetails = _ref2.saveEditedDetails,
+    isUserNotAllowedToEdit = _ref2.isUserNotAllowedToEdit,
+    metaErrors = _ref2.metaErrors,
+    setMetaErrors = _ref2.setMetaErrors,
+    isSaving = _ref2.isSaving,
+    scrollToMetaField = _ref2.scrollToMetaField,
+    isSaveDisabled = _ref2.isSaveDisabled;
+  var enableEditingOriginalFileOnly = function enableEditingOriginalFileOnly() {
+    if (originalFile.uuid !== file.uuid) {
+      return;
+    }
+    enableEditing({
+      forceUseFileWindow: false,
+      tabId: FILE_WINDOW_TAB_IDS.GENERAL
+    });
+    setIsTabsHidden(true);
+  };
+  var cancelEditingWithAlert = function cancelEditingWithAlert() {
+    alertUnsavedChangesFirst(function () {
+      if (!isPreUpload) setIsTabsHidden(false);
+      cancelEditing();
+    });
+  };
+  var renderNoValue = function renderNoValue() {
+    return /*#__PURE__*/_jsx(StyledGeneralTab.NoValueWrapper, {
+      children: "\u2014"
+    });
+  };
+  if (isFileLoading) {
+    return /*#__PURE__*/_jsx(GeneralTabSkeleton, {});
+  }
+  return /*#__PURE__*/_jsxs(StyledGeneralTab.Wrapper, {
+    children: [/*#__PURE__*/_jsx(StyledGeneralTab.TabSections, {
+      isEditing: isEditing,
+      children: /*#__PURE__*/_jsx(GeneralSection, {
+        i18n: i18n,
+        checkUserPermissions: checkUserPermissions,
+        file: file,
+        isEditing: isEditing,
+        editedDetails: editedDetails,
+        updateEditedDetails: setDetails,
+        metaErrors: metaErrors,
+        setMetaErrors: setMetaErrors,
+        renderNoValue: renderNoValue,
+        isUserNotAllowedToEdit: isUserNotAllowedToEdit || originalFile.uuid !== file.uuid,
+        enableEditing: enableEditingOriginalFileOnly,
+        scrollToMetaField: scrollToMetaField,
+        activeTabId: activeTabId
+      })
+    }), isEditing && /*#__PURE__*/_jsxs(StyledGeneralTab.ActionsBtns, {
+      children: [/*#__PURE__*/_jsx(StyledGeneralTab.ActionBtn, {
+        size: "sm",
+        color: "basic",
+        onClick: cancelEditingWithAlert,
+        disabled: isSaving,
+        children: i18n('mutualizedCancelButtonLabel')
+      }), /*#__PURE__*/_jsx(StyledGeneralTab.ActionBtn, {
+        size: "sm",
+        color: "primary",
+        onClick: saveEditedDetails,
+        disabled: isSaveDisabled || isSaving,
+        children: isSaving ? /*#__PURE__*/_jsx(Spinner, {}) : i18n('mutualizedSaveButton')
+      })]
+    }), !isEditing && /*#__PURE__*/_jsx(StyledGeneralTab.EditDetailsBtnWrapper, {
+      children: /*#__PURE__*/_jsx(EditDetailsButton, {
+        enableEditing: enableEditing,
+        isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+        mr: "24px",
+        mt: "18px"
+      })
+    })]
+  });
+};
+export default GeneralTab;