@griddo/ax 10.2.12 → 10.2.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.2.12",
+  "version": "10.2.14",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7985f1e2650c017b4fd9873cf942bae0fd1e2670"
+  "gitHead": "8f31c6bb7808f365b77484d79d25fe1eca5fe255"
 }

package/src/__tests__/components/Fields/ReferenceField/ReferenceField.test.tsx

@@ -61,7 +61,7 @@ describe("ReferenceField component rendering", () => {
     defaultProps.value = {
       order: "alpha-DESC",
     };
-    defaultProps.selectionType = ["automatic"];
+    defaultProps.selectionType = ["auto"];
     const onChange = jest.fn();
     const initialState = { ...initialStore, ...defaultProps };
 

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -8,7 +8,7 @@ import { Button, CheckField, FieldsBehavior, FloatingMenu, Icon, IconAction, Sea
 import * as S from "./style";
 
 const AutoItem = (props: IProps) => {
-  const { source, canDelete, filter, handleDelete, addFilter, site, structuredDataSite } = props;
+  const { source, canDelete, filter, handleDelete, addFilter, currentSite, structuredDataSite, siteID } = props;
 
   const initState: IState = {
     selected: "",
@@ -75,10 +75,10 @@ const AutoItem = (props: IProps) => {
       order: "alpha-asc",
     };
 
-    const siteID = getIsGlobal(newValue) ? null : site.id;
+    const site = getIsGlobal(newValue) ? null : siteID;
 
     try {
-      const result = await structuredData.getDataContents(params, siteID);
+      const result = await structuredData.getDataContents(params, site);
       if (isReqOk(result.status)) {
         setState({ ...state, selected: newValue, options: result.data.items, filteredOptions: result.data.items });
       }
@@ -164,7 +164,7 @@ const AutoItem = (props: IProps) => {
           entity="categories"
           onChange={handleSelectOnChange}
           entityId={source.id}
-          site={site}
+          site={currentSite}
         />
         {state.options.length > 0 && (
           <S.SearchWrapper>
@@ -208,10 +208,11 @@ interface IProps {
   source: IDataSource;
   canDelete: boolean;
   filter: number[];
-  site: ISite;
+  currentSite: ISite | null;
   structuredDataSite: IStructuredData[];
   handleDelete: (value: string) => void;
   addFilter: (value: any[], source: string) => void;
+  siteID?: number | null;
 }
 
 export default AutoItem;

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -287,8 +287,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
                   handleDelete={removeItem}
                   filter={sourceFilters}
                   addFilter={handleAddFilter}
-                  site={site}
+                  currentSite={site}
                   structuredDataSite={[...structuredData.site, ...categories.site]}
+                  siteID={state.site || site?.id}
                 />
               ) : (
                 <></>
@@ -422,9 +423,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
             <S.ConfigWrapper>
               <S.ConfigContent smallMargin={toggleState.isSiteActive} isLast={true}>
                 <S.OptionDescription isOpen={configState.isDataOpen}>
-                  The content is displayed in the language of the page, but{" "}
-                  <strong>if the content you want is not available in that language</strong>, you have the option to
-                  include content in another language.
+                  Data is retrieved from the site you are on.{" "}
+                  <strong>If you prefer to display content from another site</strong>, configure this option to select
+                  the specific site.
                 </S.OptionDescription>
                 {toggleState.isSiteActive && (
                   <AsyncSelect
@@ -456,7 +457,7 @@ interface IProps {
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   categories: { global: IStructuredData[]; site: IStructuredData[] };
   onChange: (value: any) => void;
-  site: ISite;
+  site: ISite | null;
   validators?: Record<string, unknown>;
   globalLangs: ILanguage[];
   lang: { locale: string; id: number };

package/src/components/Fields/ReferenceField/AutoPanel/style.tsx

@@ -62,6 +62,9 @@ const ActionsWrapper = styled.div`
   padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   border-top: 1px solid ${(p) => p.theme.color.uiLine};
   align-items: center;
+  button {
+    flex-shrink: 0;
+  }
 `;
 
 const IconWrapper = styled.div`
@@ -82,7 +85,9 @@ const SourceItem = styled.li`
   }
 `;
 
-const AdvancedWrapper = styled.div``;
+const AdvancedWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
 
 const ConfigLabel = styled.div<{ isOpen: boolean }>`
   position: relative;

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -11,22 +11,23 @@ import { IReferenceState, useReference } from "../Context";
 import * as S from "./style";
 
 const ItemList = (props: IProps) => {
-  const { items, currentSite, handleListDelete, handleChange } = props;
+  const { items, currentSite, handleListDelete } = props;
 
   const { state, setState, setReorderElements } = useReference();
-  const { fixed, mode, selectedItems, sourceTitles, fullRelations } = state;
+  const { fixed, selectedItems, sourceTitles, fullRelations, site } = state;
 
   useEffect(() => {
     const params = {
       mode: "manual",
       fixed: items,
       fullRelations,
+      site,
     };
 
     const getItems = async () => {
       const siteID = currentSite ? currentSite : "global";
       const response = await structuredData.getDistributorContent(siteID, params);
-      if (isReqOk(response.status)) {
+      if (isReqOk(response?.status)) {
         setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
         if (fixed.length !== response.data.length) {
           const itemsID = response.data.map((item: IStructuredDataContent) => item.id);
@@ -40,16 +41,8 @@ const ItemList = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items]);
 
-  useEffect(() => {
-    if (fixed) {
-      const newValue = { mode, fixed };
-      handleChange(newValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fixed]);
-
   const handleDelete = (item: IStructuredDataContent) => {
-    const langItem = item.dataLanguages
+    const langItem = item.dataLanguages?.length
       ? item.dataLanguages.find((lang) => fixed.includes(lang.id))
       : fixed.includes(item.id)
       ? item
@@ -118,7 +111,6 @@ interface IProps {
   items: number[];
   currentSite: number | null;
   handleListDelete(value: string[]): void;
-  handleChange(newValue: any): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/ReferenceField/ManualPanel/Item/index.tsx

@@ -16,7 +16,7 @@ const Item = (props: IProps): JSX.Element => {
 
   return (
     <Tooltip content={tooltip} bottom>
-      <S.Item onClick={handleItemClick} data-testid="manual-panel-item">
+      <S.Item onClick={handleItemClick} data-testid="manual-panel-item" disabled={disabled}>
         <CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
         <S.TextWrapper>
           <S.Header>

package/src/components/Fields/ReferenceField/ManualPanel/Item/style.tsx

@@ -1,19 +1,40 @@
 import styled from "styled-components";
 
-const Item = styled.li`
+const Date = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXSS};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+`;
+
+const Item = styled.li<{ disabled: boolean }>`
   display: flex;
   background-color: ${(p) => p.theme.color.uiBarBackground};
   border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   border-radius: ${(p) => p.theme.radii.s};
   padding: ${(p) => p.theme.spacing.s};
   margin-bottom: ${(p) => p.theme.spacing.xs};
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   :hover {
-    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    background-color: ${(p) => (p.disabled ? p.theme.color.uiBarBackground : p.theme.color.overlayHoverPrimary)};
   }
   :focus {
     background-color: ${(p) => p.theme.color.overlayFocusPrimary};
   }
+  ${Date} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textMediumEmphasis)};
+  }
+  ${Type} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textLowEmphasis)};
+  }
+  ${Title} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textHighEmphasis)};
+  }
 `;
 
 const TextWrapper = styled.div`
@@ -26,26 +47,4 @@ const Header = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-const Date = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-`;
-
-const Type = styled.div`
-  ${(p) => p.theme.textStyle.headingXSS};
-  color: ${(p) => p.theme.color.textLowEmphasis};
-`;
-
-const Title = styled.div`
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-`;
-
-export {
-  Item,
-  TextWrapper,
-  Header,
-  Date,
-  Type,
-  Title
-};
+export { Item, TextWrapper, Header, Date, Type, Title };

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -24,9 +24,13 @@ const ManualPanel = (props: IProps) => {
   const { state, setState } = useReference();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0]?.id);
-  const [selectedLang, setSelectedLang] = useState(lang.id);
-  const [selectedSite, setSelectedSite] = useState(currentSite);
+  const initForm: IFormState = {
+    source: state.sourceTitles[0]?.id,
+    lang: lang.id,
+    site: state.site || currentSite,
+  };
+  const [form, setForm] = useState(initForm);
+  const [itemSite, setItemSite] = useState<number | null>(state.site || currentSite);
   const debouncedSearch = useDebounce(state.search);
 
   const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
@@ -34,23 +38,24 @@ const ManualPanel = (props: IProps) => {
   useEffect(() => {
     let isMounted = true;
     const params: IGetStructuredDataParams = {
-      dataID: selectedSource,
+      dataID: form.source,
       page: 1,
       itemsPerPage: 50,
       pagination: true,
       deleted: false,
       include_draft: false,
       query: debouncedSearch,
-      lang: selectedLang,
+      lang: form.lang,
     };
 
     const getAndSetItems = async () => {
       if (!isMounted) return;
 
       setIsLoading(true);
+      const siteID = form.site ? form.site : currentSite;
       const response: { status: number; data: { totalItems: number; items: any } } =
-        await structuredData.getDataContents(params, selectedSite);
-      if (isReqOk(response.status)) {
+        await structuredData.getDataContents(params, siteID);
+      if (isReqOk(response?.status)) {
         const { items } = response.data;
         setState((state: IReferenceState) => ({ ...state, items }));
       } else {
@@ -58,25 +63,33 @@ const ManualPanel = (props: IProps) => {
       }
       setIsLoading(false);
     };
-    selectedSource && getAndSetItems();
+    form.source && getAndSetItems();
 
     return function cleanup() {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedSite, selectedSource, debouncedSearch, state.mode, selectedLang]);
+  }, [form.site, form.source, debouncedSearch, state.mode, form.lang]);
 
   const handleOnClick = (item: IStructuredDataContent) => {
     let newSelIds: number[];
     let selItems: number[];
-    const itemSelected = item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id));
+    const itemSelectedID = item.dataLanguages?.length
+      ? item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id))?.id
+      : state.fixed.includes(item.id)
+      ? item.id
+      : undefined;
 
-    if (itemSelected) {
-      newSelIds = state.fixed.filter((a: number) => a !== itemSelected.id);
-      selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelected.id);
+    if (itemSelectedID) {
+      newSelIds = state.fixed.filter((a: number) => a !== itemSelectedID);
+      selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelectedID);
+      if(selItems.length === 0) {
+        setItemSite(form.site);
+      }
     } else {
       newSelIds = [...state.fixed, item.id];
       selItems = [...state.selectedItems, item];
+      setItemSite(form.site);
     }
     const showSelected = state.showSelected && newSelIds.length === 0 ? false : state.showSelected;
     setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems, showSelected }));
@@ -86,8 +99,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
 
   const handleAdd = () => {
-    const { mode, fixed, fullRelations } = state;
-    const newValue = { mode, fixed, fullRelations };
+    const { mode, fixed, fullRelations, site } = state;
+    const newValue = { mode, fixed, fullRelations, site };
     onChange(newValue);
     handleValidation && handleValidation(state.fixed, validators);
   };
@@ -108,11 +121,17 @@ const ManualPanel = (props: IProps) => {
     return { label: singleSource.title, value: singleSource.id };
   });
 
-  const handleSource = (newSource: string) => setSelectedSource(newSource);
+  const handleSource = (newSource: string) => setForm({ ...form, source: newSource });
 
-  const handleLang = (newLang: string) => setSelectedLang(parseInt(newLang));
+  const handleLang = (newLang: string) => setForm({ ...form, lang: parseInt(newLang) });
+
+  const handleSite = (newSite: string | number | null) => {
+    (typeof newSite === "number" || newSite === null) && setForm({ ...form, site: newSite });
+    const siteID = newSite !== currentSite && newSite !== null ? newSite : undefined;
+    setState((state: IReferenceState) => ({ ...state, site: siteID }));
+  };
 
-  const handleSite = (newSite: string | number | null) => typeof newSite === "number" && setSelectedSite(newSite);
+  const hasContentFromOtherSite = state.fixed.length > 0 && form.site !== itemSite && !state.showSelected;
 
   return (
     <S.Wrapper>
@@ -131,7 +150,7 @@ const ManualPanel = (props: IProps) => {
                 name="selectLang"
                 options={langOptions}
                 onChange={handleLang}
-                value={selectedLang.toString()}
+                value={form.lang.toString()}
                 type="inline"
                 mandatory={true}
               />
@@ -141,10 +160,11 @@ const ManualPanel = (props: IProps) => {
                 name="select"
                 entity="sites"
                 onChange={handleSite}
-                value={selectedSite}
+                value={form.site}
                 type="inline"
-                mandatory={true}
+                placeholder="Select"
                 maxWidth={130}
+                mandatory={true}
               />
             )}
             {state.sourceTitles.length > 1 && (
@@ -152,7 +172,7 @@ const ManualPanel = (props: IProps) => {
                 name="selectSource"
                 options={options}
                 onChange={handleSource}
-                value={selectedSource}
+                value={form.source}
                 type="inline"
                 mandatory={true}
                 maxWidth={70}
@@ -170,6 +190,18 @@ const ManualPanel = (props: IProps) => {
         </S.LoadingWrapper>
       ) : (
         <S.ListWrapper>
+          <S.Order>Most recent</S.Order>
+          {state.site && !hasContentFromOtherSite && !state.showSelected && (
+            <S.Note>
+              You can only select content <strong>from 1 site</strong>.
+            </S.Note>
+          )}
+          {hasContentFromOtherSite && (
+            <S.Note>
+              Select content from one site at a time. <strong>Remove previous selection</strong> to choose from other
+              site.
+            </S.Note>
+          )}
           <S.ItemList>
             {showedItems &&
               showedItems.map((item: IStructuredDataContent) => {
@@ -178,15 +210,14 @@ const ManualPanel = (props: IProps) => {
                   (dataLang: IDataLanguage) => dataLang.language === lang.id && item.language !== lang.id
                 );
                 const isSelectedOtherLanguage = item.dataLanguages.find(
-                  (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== selectedLang
+                  (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== form.lang
                 );
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
-                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage;
+                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage || hasContentFromOtherSite;
                 return (
-                  <>
+                  <React.Fragment key={`${item.content.title}-${item.id}`}>
                     {source && (
                       <Item
-                        key={`${item.content.title}-${item.id}`}
                         isChecked={isChecked || !!isSelectedOtherLanguage}
                         handleOnClick={handleOnClick}
                         item={item}
@@ -195,7 +226,7 @@ const ManualPanel = (props: IProps) => {
                         tooltip={hasVersionInPageLanguage ? "Content has version in page language" : ""}
                       />
                     )}
-                  </>
+                  </React.Fragment>
                 );
               })}
           </S.ItemList>
@@ -222,6 +253,12 @@ interface IProps {
   globalLangs: ILanguage[];
 }
 
+interface IFormState {
+  source: string | undefined;
+  lang: number;
+  site: number | null;
+}
+
 const mapStateToProps = (state: IRootState) => ({
   lang: state.app.lang,
   currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,

package/src/components/Fields/ReferenceField/ManualPanel/style.tsx

@@ -49,4 +49,30 @@ const SelectsWrapper = styled.div`
   }
 `;
 
-export { Wrapper, LoadingWrapper, ListWrapper, ItemList, SearchWrapper, ButtonWrapper, ActionsWrapper, SelectsWrapper };
+const Note = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Order = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+  Wrapper,
+  LoadingWrapper,
+  ListWrapper,
+  ItemList,
+  SearchWrapper,
+  ButtonWrapper,
+  ActionsWrapper,
+  SelectsWrapper,
+  Note,
+  Order,
+};

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

@@ -82,7 +82,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   useEffect(() => {
     const getSourcesTitles = async () => {
       const response = await structuredData.getDataTitles(source);
-      if (isReqOk(response.status)) {
+      if (isReqOk(response?.status)) {
         return response.data;
       } else {
         console.log("Error en getSourcesTitles");
@@ -138,13 +138,15 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     alpha: "Alphabetical order",
     recent: "Most recent",
   };
+
   const getOrderLabel = () => {
     const stateOrder = splitCamelCase(state.order).toLowerCase();
     const orderLabel = defaultOrders[state.order] || capitalize(stateOrder);
     const directionLabel = state.orderDirection === "ASC" ? "(ascendent)" : "(descendent)";
     return `${orderLabel} ${directionLabel}`;
   };
-  const autoData = (
+
+  const AutoData = () => (
     <S.DataWrapper data-testid="auto-data-wrapper">
       <S.SourcesWrapper>
         {value &&
@@ -171,7 +173,13 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const getPanel = () =>
     isAuto ? (
-      <AutoPanel structuredData={structuredDataValues} categories={categories} onChange={handleOnChange} site={site} validators={validators} />
+      <AutoPanel
+        structuredData={structuredDataValues}
+        categories={categories}
+        onChange={handleOnChange}
+        site={site}
+        validators={validators}
+      />
     ) : (
       <ManualPanel
         onChange={handleOnChange}
@@ -183,7 +191,9 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
 
-  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : <></>);
+
+  const dataBlock = isAuto ? <AutoData /> : <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} />;
 
   return (
     <S.Wrapper data-testid="reference-field-wrapper">
@@ -211,11 +221,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
           </S.ActionWrapper>
         )}
       </S.ModeWrapper>
-      {isAuto ? (
-        autoData
-      ) : (
-        <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} handleChange={onChange} />
-      )}
+      {dataBlock}
       <FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
         {isOpen && getPanel()}
       </FloatingPanel>
@@ -225,10 +231,10 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
 export interface IReferenceFieldProps {
   source: string[];
-  value: any;
+  value?: any;
   onChange: (value: any) => void;
   disabled?: boolean;
-  site: ISite;
+  site: ISite | null;
   selectionType?: string[];
   structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
   categories: { global: IStructuredData[]; site: IStructuredData[] };

package/src/modules/PublicPreview/index.tsx

@@ -59,7 +59,7 @@ const PublicPreview = () => {
         footer={state && state.footerContent}
         languageID={state && state.language}
         pageLanguages={state && state.pageLanguages}
-        renderer="editor"
+        renderer="preview"
       />
     </S.Wrapper>
   );

package/src/types/index.tsx

@@ -331,7 +331,7 @@ export interface IGetGlobalPagesParams {
 }
 
 export interface IGetStructuredDataParams {
-  dataID: string | null;
+  dataID?: string | null;
   page: number;
   itemsPerPage: number;
   pagination: boolean;