@griddo/ax 10.5.0 → 10.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.5.0",
+  "version": "10.5.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -232,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "245671251ee67a3d95f10705ddab42178208a5c5"
+  "gitHead": "197fb75444ae01e8c0d9d26ebac3b14ed780d10d"
 }

package/src/components/ConfigPanel/Header/index.tsx

@@ -30,6 +30,7 @@ const Header = (props: IHeaderProps) => {
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const [y, setY] = useState(window.scrollY);
   const [scrollDown, setScrollDown] = useState(false);
+  const [breadcrumbOld, setBreadcrumbOld] = useState(breadcrumb);
 
   const handleNavigation = useCallback(
     (e: Event) => {
@@ -59,7 +60,11 @@ const Header = (props: IHeaderProps) => {
     if (headerRef.current) {
       const height = headerRef.current.offsetHeight + headerRef.current.offsetTop;
       setHeaderHeight(height);
-      window.scrollTo(0, 0);
+      setBreadcrumbOld(breadcrumb);
+      if (JSON.stringify(breadcrumbOld) !== JSON.stringify(breadcrumb)) {
+        window.scrollTo(0, 0);
+        setBreadcrumbOld(breadcrumb);
+      }
     }
   }, [headerRef, breadcrumb, setHeaderHeight]);
 

package/src/components/ErrorPage/index.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { RouteComponentProps, useHistory, withRouter } from "react-router-dom";
 import { Button, Circle, Icon } from "@ax/components";
 
 import * as S from "./style";
 
 const ErrorPage = (props: IProps): JSX.Element => {
-  const { type, history } = props;
+  const { type } = props;
+  const history = useHistory();
 
   const griddoLogo = "/img/logos/logoGriddoExtended@3x.svg";
 

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

@@ -55,7 +55,9 @@ const ItemList = (props: IProps) => {
 
     if (langItem) {
       const newSelIds: number[] = fixed.filter((id: number) => id !== langItem.id);
-      const selItems: IStructuredDataContent[] = selectedItems.filter((item: IStructuredDataContent) => item.id !== langItem.id);
+      const selItems: IStructuredDataContent[] = selectedItems.filter(
+        (item: IStructuredDataContent) => item.id !== langItem.id
+      );
       setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems }));
       handleListDelete(newSelIds);
     }

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

@@ -5,7 +5,7 @@ import { useModal } from "@ax/hooks";
 import { IStructuredDataContent, IDataSource, ISite, IRootState, IStructuredData } from "@ax/types";
 import { structuredData } from "@ax/api";
 import { capitalize, isReqOk, splitCamelCase } from "@ax/helpers";
-import { IconAction, FloatingPanel, Select, Tag } from "@ax/components";
+import { IconAction, FloatingPanel, Select, Tag, Icon } from "@ax/components";
 import AutoPanel from "./AutoPanel";
 import ItemList from "./ItemList";
 import ManualPanel from "./ManualPanel";
@@ -45,10 +45,9 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const isAuto = mode === "auto";
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
   const sourcesIDs = sources.map((source: ISource) => source.structuredData);
+  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
 
   const handleMode = (mode: string) => {
-    const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
-
     const manualSources: string[] = state.selectedItems.reduce(
       (unique: string[], selItem: IStructuredDataContent) =>
         unique.includes(selItem.structuredData) ? unique : [...unique, selItem.structuredData],
@@ -134,6 +133,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     const newValue = {
       mode,
       fixed,
+      fullRelations,
     };
     onChange(newValue);
     resetValidation && resetValidation();
@@ -143,6 +143,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     const newValue = {
       mode,
       fixed,
+      fullRelations,
     };
     onChange(newValue);
   };
@@ -228,6 +229,11 @@ const ReferenceField = (props: IReferenceFieldProps) => {
         Elements
         <Asterisk />
       </S.Label>
+      <S.Note>
+        Only <strong>published</strong> &#40; <Icon name="active" size="16" /> &#41; data is displayed. &apos;Pending to
+        publish&apos; &#40; <Icon name="uploadPending" size="16" /> &#41; data won&apos;t appear until the publishing
+        process is complete.
+      </S.Note>
       <S.ModeWrapper>
         {!singleMode && (
           <Select

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

@@ -18,7 +18,7 @@ const Asterisk = styled.span`
 const ActionWrapper = styled.div`
   position: absolute;
   right: 0;
-  top: ${(p) => p.theme.spacing.m};
+  top: ${(p) => p.theme.spacing.xxs};
 `;
 
 const DataWrapper = styled.div`
@@ -47,6 +47,7 @@ const Title = styled.span`
 
 const ModeWrapper = styled.div`
   display: flex;
+  position: relative;
   align-items: center;
   min-height: 32px;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
@@ -57,6 +58,20 @@ const SingleModeText = styled.span`
   color: ${(p) => p.theme.colors.textHighEmphasis};
 `;
 
+const Note = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  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};
+  margin-top: ${(p) => p.theme.spacing.xxs};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  svg {
+    vertical-align: middle;
+    display: inline-block;
+  }
+`;
+
 export {
   Asterisk,
   Wrapper,
@@ -69,4 +84,5 @@ export {
   Title,
   ModeWrapper,
   SingleModeText,
+  Note,
 };

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -203,7 +203,14 @@ const GalleryDetailPanel = (props: IProps) => {
           onChange={handleDescription}
           disabled={!isAllowedToEdit}
         />
-        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagsField" onChange={handleTags} disabled={!isAllowedToEdit} />
+        <FieldsBehavior
+          title="Tags"
+          value={imageForm.tags}
+          fieldType="TagsField"
+          onChange={handleTags}
+          disabled={!isAllowedToEdit}
+          helptext="Type a tag and press enter to create it"
+        />
       </S.FormWrapper>
     </S.PanelForm>
   );
@@ -222,28 +229,30 @@ const GalleryDetailPanel = (props: IProps) => {
             {isSaving.delete ? `Deleting` : `Delete`}
           </Button>
         )}
-        {isAllowedToEdit && <Button
-          type="button"
-          buttonStyle="line"
-          onClick={handleSave}
-          disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
-        >
-          {isSaving.save ? `Saving` : `Save`}
-        </Button>}
-        {isAllowedToEdit && <Button
-          type="button"
-          onClick={handleSaveAndAdd}
-          disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
-        >
-          {isSaving.saveAdd ? `Saving` : `Save & Add`}
-        </Button>}
-        {!isAllowedToEdit && <Button
-          type="button"
-          onClick={handleAdd}
-          disabled={isSaving.delete}
-        >
-          Add
-        </Button>}
+        {isAllowedToEdit && (
+          <Button
+            type="button"
+            buttonStyle="line"
+            onClick={handleSave}
+            disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
+          >
+            {isSaving.save ? `Saving` : `Save`}
+          </Button>
+        )}
+        {isAllowedToEdit && (
+          <Button
+            type="button"
+            onClick={handleSaveAndAdd}
+            disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
+          >
+            {isSaving.saveAdd ? `Saving` : `Save & Add`}
+          </Button>
+        )}
+        {!isAllowedToEdit && (
+          <Button type="button" onClick={handleAdd} disabled={isSaving.delete}>
+            Add
+          </Button>
+        )}
       </S.PanelActions>
       {deletedToast && <Toast message="1 image deleted" setIsVisible={setDeletedToast} />}
     </S.DetailPanelWrapper>

package/src/containers/PageEditor/actions.tsx

@@ -1091,7 +1091,7 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
 
     dispatch(setIsLoading(true));
     const {
-      pageEditor: { editorContent },
+      pageEditor: { editorContent, tab },
       navigation: { header },
     } = getState();
     /*
@@ -1110,7 +1110,7 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
 
     const schema = getSchema(component);
     const defaultTab = "content";
-    dispatch(setTab(defaultTab));
+    dispatch(setTab(tab || defaultTab));
     dispatch(setSchema(schema));
     dispatch(setSelectedEditorID(editorID));
     dispatch(updateBreadcrumb(editorID));

package/src/modules/Sites/SitesList/atoms.tsx

@@ -20,7 +20,7 @@ export const ItemThumbnail = (props: IItemThumbnailProps): JSX.Element => {
   const { src, width, height, borderRadius } = props;
   const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
   return src ? (
-    <S.ImageWrapper data-testid="sites-item-thumbnail-wrapper" borderRadius={borderRadius}>
+    <S.ImageWrapper data-testid="sites-item-thumbnail-wrapper" borderRadius={borderRadius} height={height}>
       <Image width={width} height={height} url={src} />
     </S.ImageWrapper>
   ) : (

package/src/modules/Sites/SitesList/style.tsx

@@ -153,8 +153,8 @@ const EmptyStateWrapper = styled.div`
   margin-top: 100px;
 `;
 
-const ImageWrapper = styled.div<{ borderRadius?: boolean }>`
-  height: 199px;
+const ImageWrapper = styled.div<{ borderRadius?: boolean; height: number }>`
+  height: ${(p) => (p.height ? p.height : 199)}px;
   img {
     border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
     object-fit: cover;