@griddo/ax 10.3.18 → 10.3.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.3.18",
+  "version": "10.3.19",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d44ef3003cd1395e5d464befbac97d2397a4122c"
+  "gitHead": "7528f70fec302460e645be69d6b7765ac7e45c10"
 }

package/scripts/griddo-sync-schemas.js

@@ -50,6 +50,10 @@ async function main() {
 
   const _griddoConfig = require(path.resolve(__dirname, `./${tempFile}`));
   const griddoConfig = _griddoConfig.default || _griddoConfig;
+
+  // La propiedad computed en los schemas de datos estructurados se perderá si no la stringificamos primero
+  checkComputedSchemas(griddoConfig.schemas)
+  
   const { version } = require(resolveComponentsPath("package.json"));
 
   const emptySchemas = {
@@ -77,4 +81,21 @@ async function main() {
   }
 }
 
+const checkComputedSchemas = schemas => {
+  const structuredDataSchemas = schemas.structuredData;
+
+  for (const structuredData in structuredDataSchemas) {
+      const value = structuredDataSchemas[structuredData];
+      const fields = value.schema?.fields;
+
+      if (!fields) continue;
+
+      for (const field of fields) {
+          const { computed = null } = field;
+
+          if (computed) field.computed = computed.toString();
+      }
+  }
+};
+
 main();

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
+import { IDataPack, IErrorItem, IRootState, ISchemaField, ISite } from "@ax/types";
 import { getModuleCategories } from "@ax/helpers";
 import Field from "../Field";
 
@@ -36,7 +36,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
   const templateContent = selectedContent.template;
   const modulesDataPacks = activatedPacks.map((pack: IDataPack) => pack.modules).flat();
 
-  const getFieldProps = (field: any) => {
+  const getFieldProps = (field: ISchemaField) => {
     const { key, type, whiteList = [], slugTo, readonly } = field;
     const isArr = type === "ComponentArray";
     const currentContent = isArr ? templateContent[key] : templateContent;
@@ -45,8 +45,9 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     const handleUpdate = (fieldKey: string, value: any) =>
       updateValue(fieldKey, value, templateContent.editorID, slugTo);
     const error = errors.find((err: any) => err.editorID === templateContent.editorID && err.key === key);
+    const isComputedField = Object.prototype.hasOwnProperty.call(field, "computed");
 
-    const addedModules = modulesDataPacks.reduce((acc: string[], current: any) => {
+    const addedModules: string[] = modulesDataPacks.reduce((acc: string[], current: any) => {
       if (
         current.sectionList &&
         current.sectionList[template.component] &&
@@ -58,7 +59,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
       return acc;
     }, []);
 
-    const mappedWhiteList = whiteList ? [...whiteList, ...addedModules].sort() : [...addedModules.sort()];
+    const mappedWhiteList: string[] = whiteList ? [...whiteList, ...addedModules].sort() : [...addedModules.sort()];
     const categories = getModuleCategories(mappedWhiteList);
 
     return {
@@ -70,7 +71,8 @@ export const TemplateManager = (props: IProps): JSX.Element => {
       currentContent,
       handleUpdate,
       error,
-      readonly
+      readonly,
+      disabledField: isComputedField,
     };
   };
 
@@ -78,39 +80,51 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     <>
       {isConfig && templateFields && <S.Title>Template Options</S.Title>}
       {templateFields &&
-        templateFields.map((templateField: any, index: number) => {
-          const { whiteList, categories, key, fieldObjKey, mappedField, currentContent, handleUpdate, error, readonly } =
-            getFieldProps(templateField);
+        templateFields
+          .filter((templateField: ISchemaField) => !templateField.hidden)
+          .map((templateField: ISchemaField, index: number) => {
+            const {
+              whiteList,
+              categories,
+              key,
+              fieldObjKey,
+              mappedField,
+              currentContent,
+              handleUpdate,
+              error,
+              readonly,
+              disabledField
+            } = getFieldProps(templateField);
 
-          return (
-            <Field
-              whiteList={whiteList}
-              key={`${objKey}.${key}${index}`}
-              objKey={fieldObjKey}
-              field={mappedField}
-              selectedContent={currentContent}
-              goTo={goTo}
-              updateValue={handleUpdate}
-              pages={pages}
-              actions={actions}
-              site={site}
-              disabled={disabled}
-              activatedModules={activatedModules}
-              isTemplateActivated={isTemplateActivated}
-              categories={categories}
-              error={error}
-              deleteError={deleteError}
-              errors={errors}
-              theme={theme}
-              moduleCopy={moduleCopy}
-              availableDataPacks={availableDataPacks}
-              template={template}
-              setHistoryPush={setHistoryPush}
-              lang={lang}
-              readonly={readonly}
-            />
-          );
-        })}
+            return (
+              <Field
+                whiteList={whiteList}
+                key={`${objKey}.${key}${index}`}
+                objKey={fieldObjKey}
+                field={mappedField}
+                selectedContent={currentContent}
+                goTo={goTo}
+                updateValue={handleUpdate}
+                pages={pages}
+                actions={actions}
+                site={site}
+                disabled={disabled || disabledField}
+                activatedModules={activatedModules}
+                isTemplateActivated={isTemplateActivated}
+                categories={categories}
+                error={error}
+                deleteError={deleteError}
+                errors={errors}
+                theme={theme}
+                moduleCopy={moduleCopy}
+                availableDataPacks={availableDataPacks}
+                template={template}
+                setHistoryPush={setHistoryPush}
+                lang={lang}
+                readonly={readonly}
+              />
+            );
+          })}
     </>
   );
 };

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { memo, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { getTemplate, isModuleDisabled, slugify, areEqual } from "@ax/helpers";
@@ -70,8 +70,7 @@ const PageConnectedField = (props: any) => {
 
   const hasDefaultIndex = isTemplateActivated && templateConfig && templateConfig.indexDefault !== undefined;
 
-  const isFieldReadOnly =
-    (["parent", "slug"].includes(objKey) &&  isPageHome) || parentIsReadOnly || field.readonly;
+  const isFieldReadOnly = (["parent", "slug"].includes(objKey) && isPageHome) || parentIsReadOnly || field.readonly;
 
   const isDisabled =
     (!isGlobal &&
@@ -218,4 +217,4 @@ const mapDispatchToProps = {
   deleteError: pageEditorActions.deleteError,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(React.memo(PageConnectedField, areEqual));
+export default connect(mapStateToProps, mapDispatchToProps)(memo(PageConnectedField, areEqual));

package/src/components/Fields/TextArea/index.tsx

@@ -1,11 +1,11 @@
-import React, { memo, useEffect, useRef } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 
 import * as S from "./style";
 
 const TextArea = (props: ITextAreaProps): JSX.Element => {
   const { value, placeholder, error, name, onChange, disabled, handleValidation, editorID, rows = 1 } = props;
 
-  const [state, setState] = React.useState<string>(value);
+  const [state, setState] = useState<string>(value);
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {

package/src/components/TableFilters/TypeFilter/index.tsx

@@ -9,10 +9,13 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
 
   const initialState = ["all"];
   const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState(initialState);
+  const arrayValues = value ? value.split(",") : initialState;
+  const [selectedValue, setSelectedValue] = useState(arrayValues);
 
   useEffect(() => {
-    value && setSelectedValue([value]);
+    const arrayValues = value ? value.split(","): initialState;
+    setSelectedValue(arrayValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   const setFilterQuery = (selection: any) => {
@@ -20,7 +23,7 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join("&");
+    const queryFilters = selection.join(",");
     filterItems(pointer, queryFilters);
   };
 
@@ -36,7 +39,7 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
       <ListTitle data-testid="type-filter-title">Filter by type</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup
@@ -44,7 +47,7 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
           value={selectedValue}
           onChange={setFilterQuery}
           selectAllOption={selectAllOption}
-          multipleSelection={false}
+          multipleSelection={true}
         />
       </S.ChecksWrapper>
     </FloatingMenu>
@@ -61,7 +64,7 @@ export interface ITypeFilterProps {
   filterItems(pointer: string, filter: string): void;
   filters: IFilter[];
   pointer: string;
-  value: any;
+  value?: string;
 }
 
 export default TypeFilter;

package/src/containers/PageEditor/actions.tsx

@@ -30,6 +30,7 @@ import {
   parseValidationErrors,
   findPackagesActivationErrors,
   checkMaxModules,
+  evalueComputedFields,
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
@@ -66,6 +67,7 @@ import {
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
   SET_IS_IA_TRANSLATED,
+  SET_LAST_TIMEOUT,
 } from "./constants";
 
 import {
@@ -103,6 +105,7 @@ import {
   ISetLastElementAddedId,
   ISetCopyModule,
   ISetIsIATranslated,
+  ISetLastTimeout,
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving, handleError } = appActions;
@@ -204,6 +207,10 @@ function setIsIATranslated(isIATranslated: boolean): ISetIsIATranslated {
   return { type: SET_IS_IA_TRANSLATED, payload: { isIATranslated } };
 }
 
+function setLastTimeout(lastTimeout: NodeJS.Timeout | null): ISetLastTimeout {
+  return { type: SET_LAST_TIMEOUT, payload: { lastTimeout } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -401,9 +408,8 @@ function savePage(
       } = getState();
 
       const rootEditorID = 0;
-      const page = getPageData(getState, false);
-
-      const { values, id } = parseData(page, false);
+      const { values: page, id } = getPageData(getState, false);
+      const values = evalueComputedFields(page);
 
       const isNewPage = !id;
 
@@ -995,17 +1001,28 @@ function updateEditorContent(
 ): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
-      pageEditor: { editorContent, selectedContent },
+      pageEditor: { editorContent, selectedContent, lastTimeout },
     } = getState();
 
     const clonedContent = deepClone(editorContent);
 
     const updatedSelectedContent = updateByEditorID(selectedContent, selectedEditorID, key, value);
-    const updatedEditorContent = updateByEditorID(clonedContent, selectedEditorID, key, value);
+    let updatedEditorContent = updateByEditorID(clonedContent, selectedEditorID, key, value);
 
     setSelectedContent(updatedSelectedContent);
     dispatch(setEditorContent(updatedEditorContent));
 
+    if(lastTimeout){
+      clearTimeout(lastTimeout);
+    }
+
+    const timeoutId = setTimeout(() => {
+      updatedEditorContent = evalueComputedFields(updatedEditorContent);
+      generatePageContent(updatedEditorContent, dispatch, getState);
+    }, 3000);
+
+    dispatch(setLastTimeout(timeoutId));
+
     const isNavigation = ["header", "footer"].includes(key);
     if (isNavigation || (value && typeof value === "object")) {
       generatePageContent(updatedEditorContent, dispatch, getState);

package/src/containers/PageEditor/constants.tsx

@@ -21,6 +21,7 @@ export const SET_USER_EDITING = `${NAME}/SET_USER_EDITING`;
 export const SET_LAST_ELEMENT_ADDED_ID = `${NAME}/SET_LAST_ELEMENT_ADDED_ID`;
 export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
 export const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
+export const SET_LAST_TIMEOUT = `${NAME}/SET_LAST_TIMEOUT`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];

package/src/containers/PageEditor/interfaces.tsx

@@ -20,6 +20,7 @@ import {
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
   SET_IS_IA_TRANSLATED,
+  SET_LAST_TIMEOUT,
 } from "./constants";
 import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
@@ -128,6 +129,11 @@ export interface ISetIsIATranslated {
   payload: { isIATranslated: boolean };
 }
 
+export interface ISetLastTimeout {
+  type: typeof SET_LAST_TIMEOUT;
+  payload: { lastTimeout: NodeJS.Timeout | null };
+}
+
 export interface IFieldProps {
   id: number;
   key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -23,6 +23,7 @@ import {
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
   SET_IS_IA_TRANSLATED,
+  SET_LAST_TIMEOUT,
 } from "./constants";
 
 import { PageEditorActionsCreators } from "./interfaces";
@@ -49,6 +50,7 @@ export interface IPageEditorState {
   lastElementAddedId: null | number;
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
   isIATranslated: boolean;
+  lastTimeout: NodeJS.Timeout | null;
 }
 
 export const initialState = {
@@ -73,9 +75,10 @@ export const initialState = {
   lastElementAddedId: null,
   moduleCopy: null,
   isIATranslated: false,
+  lastTimeout: null,
 };
 
-export function reducer(state = initialState, action: PageEditorActionsCreators): IPageEditorState {
+export function reducer(state = initialState, action: any): IPageEditorState {
   switch (action.type) {
     case SET_EDITOR_CONTENT:
       return { ...state, ...action.payload };
@@ -99,6 +102,7 @@ export function reducer(state = initialState, action: PageEditorActionsCreators)
     case SET_LAST_ELEMENT_ADDED_ID:
     case SET_COPY_MODULE:
     case SET_IS_IA_TRANSLATED:
+    case SET_LAST_TIMEOUT:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/StructuredData/actions.tsx

@@ -35,7 +35,13 @@ import {
   ISetContentFilters,
   ISetIsIATranslated,
 } from "./interfaces";
-import { prepareStructuredDataContent, getTaxonomies, filterStructuredDataByID, getTypes } from "./utils";
+import {
+  prepareStructuredDataContent,
+  getTaxonomies,
+  filterStructuredDataByID,
+  getTypes,
+  evalueDataComputedFields,
+} from "./utils";
 import {
   IStructuredData,
   IStructuredDataContent,
@@ -126,7 +132,8 @@ function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) =>
     const {
       structuredData: { form },
     } = getState();
-    const updatedForm = { ...form, content: { ...form?.content, ...valueObj } };
+    let updatedForm = { ...form, content: { ...form?.content, ...valueObj } };
+
     dispatch(updateForm(updatedForm));
   };
 }
@@ -326,12 +333,15 @@ function createStructuredDataContent(
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
-      let dataContent = prepareStructuredDataContent(structuredDataContent);
       const {
         app: { lang },
         sites: { currentSiteInfo },
+        structuredData: { schema },
       } = getState();
 
+      let dataContent = prepareStructuredDataContent(structuredDataContent);
+      dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
+
       dataContent = {
         ...dataContent,
         language: langId ? langId : lang.id,
@@ -356,10 +366,15 @@ function createStructuredDataContent(
 
 function updateStructuredDataContent(
   structuredDataContent: IStructuredDataContent
-): (dispatch: Dispatch) => Promise<boolean> {
-  return async (dispatch) => {
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
     try {
-      const dataContent = prepareStructuredDataContent(structuredDataContent);
+      const {
+        structuredData: { schema },
+      } = getState();
+
+      let dataContent = prepareStructuredDataContent(structuredDataContent);
+      dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
 
       const responseActions = {
         handleSuccess: (response: any) => dispatch(setForm(response)),

package/src/containers/StructuredData/constants.tsx

@@ -48,5 +48,5 @@ export {
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
-  SET_IS_IA_TRANSLATED
+  SET_IS_IA_TRANSLATED,
 };

package/src/containers/StructuredData/reducer.tsx

@@ -59,7 +59,7 @@ export const initialState = {
   isIATranslated: false,
 };
 
-export function reducer(state = initialState, action: StructuredDataActionsCreators): IStructuredDataState {
+export function reducer(state = initialState, action: any): IStructuredDataState {
   switch (action.type) {
     case SET_CATEGORIES:
     case SET_STRUCTURED_DATA:

package/src/containers/StructuredData/utils.tsx

@@ -1,4 +1,5 @@
-import { IStructuredDataContent, IStructuredData } from "@ax/types";
+import { deepClone } from "@ax/helpers";
+import { IStructuredDataContent, IStructuredData, ISchemaField } from "@ax/types";
 
 const prepareStructuredDataContent = (structuredDataContent: IStructuredDataContent) => {
   return { ...structuredDataContent, content: structuredDataContent.content };
@@ -31,6 +32,17 @@ const getTaxonomies = (data: IStructuredData[]) => data.filter((item: IStructure
 const getTypes = (data: IStructuredData[]) => data.filter((item: IStructuredData) => !item.taxonomy);
 const filterStructuredDataByID = (data: any, id: string) => data.find((item: any) => item.id === id);
 
+const evalueDataComputedFields = (structuredData: any, schema: any) => {
+  const updatedData = deepClone(structuredData);
+  schema.forEach((field: ISchemaField) => {
+    if (field.hasOwnProperty("computed")) {
+      const computedFunction = eval(`(${field.computed})`);
+      updatedData.content[field.key] = computedFunction(structuredData.content);
+    }
+  });
+  return updatedData;
+};
+
 export {
   prepareStructuredDataContent,
   updateCurrentDataContent,
@@ -38,4 +50,5 @@ export {
   getTaxonomies,
   getTypes,
   filterStructuredDataByID,
+  evalueDataComputedFields,
 };

package/src/forms/editor.tsx

@@ -1,4 +1,4 @@
-import { deepClone, getSchema, getDisplayName } from "@ax/helpers";
+import { deepClone, getSchema, getDisplayName, getTemplate } from "@ax/helpers";
 import { IPage, IBreadcrumbItem } from "@ax/types";
 
 const configKeys = ["headerConfig", "footerConfig"];
@@ -199,6 +199,18 @@ const checkMaxModules = (content: any, type: string): { isMaxModules: boolean; e
   };
 };
 
+const evalueComputedFields = (page: any) => {
+  const updatedPage = deepClone(page);
+  const pageSchemaContent = getTemplate(page.template.templateType).content;
+  pageSchemaContent.forEach((field: any) => {
+    if(field.hasOwnProperty("computed")){
+      updatedPage.template[field.key] = field.computed(page);
+    }
+  })
+
+  return updatedPage;
+}
+
 export {
   parseData,
   cleanContent,
@@ -213,4 +225,5 @@ export {
   getLastComponentEditorID,
   getParentKey,
   checkMaxModules,
+  evalueComputedFields,
 };

package/src/forms/index.tsx

@@ -11,6 +11,7 @@ import {
   getLastComponentEditorID,
   getParentKey,
   checkMaxModules,
+  evalueComputedFields,
 } from "./editor";
 import {
   getUpdatedComponents,
@@ -65,4 +66,5 @@ export {
   checkH1content,
   parseValidationErrors,
   checkMaxModules,
+  evalueComputedFields,
 };

package/src/modules/FileDrive/FileFilters/Type/index.tsx

@@ -10,7 +10,7 @@ const Type = (props: ITypeProps): JSX.Element => {
   const initialState = ["all"];
   const selectAllOption = "all";
   const pointer = "filterType";
-  const cleanValue = value.replace(/docx|xlsx|csv/gi, "");
+  const cleanValue = value ? value.replace(/docx|xlsx|csv/gi, "") : "all";
   const arrayValues = cleanValue.split(",");
   const [selectedValue, setSelectedValue] = useState(arrayValues);
 
@@ -54,7 +54,7 @@ const Type = (props: ITypeProps): JSX.Element => {
   ];
 
   return (
-    <FloatingMenu Button={Header} position="center" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="center" closeOnSelect={false}>
       <ListTitle>Filter by type</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup
@@ -71,7 +71,7 @@ const Type = (props: ITypeProps): JSX.Element => {
 
 export interface ITypeProps {
   filterItems(pointer: string, filter: string): void;
-  value: string;
+  value?: string;
 }
 
 export default Type;

package/src/modules/FileDrive/index.tsx

@@ -580,7 +580,7 @@ const FileDrive = (props: IProps) => {
       <></>
     );
 
-  const Filters = () => (
+  const filters = (
     <S.Filters>
       <Type filterItems={filterItems} value={filterValues["filterType"]} />
       <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
@@ -603,30 +603,26 @@ const FileDrive = (props: IProps) => {
         </S.FolderPanel>
         <S.ContentWrapper>
           <ErrorToast />
+          <S.FiltersBar isSite={isSiteView && allowedToAccessGlobalFromSite}>
+            {isSiteView && allowedToAccessGlobalFromSite && (
+              <S.TabsWrapper>
+                <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
+              </S.TabsWrapper>
+            )}
+            {!isSiteView && filters}
+            <S.DisplayModeWrapper>
+              <IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
+              <IconAction icon="BulletList" onClick={() => changeDisplayMode("list")} active={displayMode === "list"} />
+            </S.DisplayModeWrapper>
+          </S.FiltersBar>
+          <S.FiltersBar isSite={false}>
+            {isSiteView && filters}
+            <SearchField onChange={setSearchQuery} placeholder="Search" value={searchQuery} autoFocus={false} />
+          </S.FiltersBar>
           {isLoading ? (
             <Loading />
           ) : (
             <>
-              <S.FiltersBar isSite={isSiteView && allowedToAccessGlobalFromSite}>
-                {isSiteView && allowedToAccessGlobalFromSite && (
-                  <S.TabsWrapper>
-                    <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
-                  </S.TabsWrapper>
-                )}
-                {!isSiteView && <Filters />}
-                <S.DisplayModeWrapper>
-                  <IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
-                  <IconAction
-                    icon="BulletList"
-                    onClick={() => changeDisplayMode("list")}
-                    active={displayMode === "list"}
-                  />
-                </S.DisplayModeWrapper>
-              </S.FiltersBar>
-              <S.FiltersBar isSite={false}>
-                {isSiteView && <Filters />}
-                <SearchField onChange={setSearchQuery} placeholder="Search" value={searchQuery} autoFocus={false} />
-              </S.FiltersBar>
               {!isRoot && <Breadcrumb breadcrumb={breadcrumb} onClick={handleUpdateCurrentFolder} />}
               {(hasFolders || !isRoot) && (
                 <S.SectionWrapper>

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -11,13 +11,20 @@ import * as S from "./style";
 const ConnectedField = (props: IProps) => {
   const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme, lang } = props;
 
-  const value = form?.content && form.content[fieldKey];
+  const isConditional = field.type === "ConditionalField";
+  const isArrayGroup = field.type === "ArrayFieldGroup";
+  const isComputedField = Object.prototype.hasOwnProperty.call(field, "computed");
+  const isFieldDisabled = disabled || isComputedField;
+
+  let value = form?.content && form.content[fieldKey];
   const error = errors.find((err: any) => err.key === field.key);
 
-  const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
+  if(isComputedField && form?.content) {
+    const computedFunction = eval(`(${field.computed})`);
+    value = computedFunction(form.content);
+  }
 
-  const isConditional = field.type === "ConditionalField";
-  const isArrayGroup = field.type === "ArrayFieldGroup";
+  const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
 
   let innerFields: JSX.Element[] = [];
 
@@ -30,7 +37,7 @@ const ConnectedField = (props: IProps) => {
     value,
     onChange: handleChange,
     site,
-    disabled,
+    disabled: isFieldDisabled,
     fieldType: field.type,
     ...field,
     innerFields,

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, ILanguage, INotification, IRootState, ISite } from "@ax/types";
+import { IDataPack, IErrorItem, ILanguage, INotification, IRootState, ISchemaField, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
@@ -48,7 +48,7 @@ const Form = (props: IProps) => {
 
   const { fields } = schema;
 
-  const fieldsTranslate = [
+  const fieldsTranslate: ISchemaField[] = [
     {
       title: "",
       type: "TranslateButton",
@@ -83,22 +83,24 @@ const Form = (props: IProps) => {
 
   const Fields =
     fieldsTranslate &&
-    fieldsTranslate.map((field: any, i: number) => {
-      const { type, key } = field;
-      if (key === "title") {
-        title = form?.content && form.content[key] ? form.content[key] : "";
-      }
-      return (
-        <ConnectedField
-          fieldKey={key}
-          field={field}
-          key={`${type}${i}`}
-          site={site}
-          disabled={isDisabled}
-          theme={site ? site.theme : theme}
-        />
-      );
-    });
+    fieldsTranslate
+      .filter((field: ISchemaField) => !field.hidden)
+      .map((field: ISchemaField, i: number) => {
+        const { type, key } = field;
+        if (key === "title") {
+          title = form?.content && form.content[key] ? form.content[key] : "";
+        }
+        return (
+          <ConnectedField
+            fieldKey={key}
+            field={field}
+            key={`${type}${i}`}
+            site={site}
+            disabled={isDisabled}
+            theme={site ? site.theme : theme}
+          />
+        );
+      });
 
   const handleSave = async (publish: boolean) => {
     const validated = publish && !skipReviewOnPublish ? await validateForm(true) : true;
@@ -371,4 +373,4 @@ const mapDispatchToProps = {
   setFormValues: structuredDataActions.setFormValues,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Form);
+export default connect(mapStateToProps, mapDispatchToProps)(Form);

package/src/types/index.tsx

@@ -170,6 +170,10 @@ export interface ISchemaField {
   type: string;
   key: string;
   fields?: ISchemaField[];
+  hidden?: boolean;
+  whiteList?: string[];
+  readonly?: boolean;
+  slugTo?: string;
   [key: string]: any; // TODO: set type
 }