@griddo/ax 1.58.7 → 1.59.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.58.7",
+  "version": "1.59.3",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -241,5 +241,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "31baa3de01745f42e14032626958ca35fd114e31"
+  "gitHead": "c51a147ccb0c94e859986b31b48202ab4f6e94b6"
 }

package/src/GlobalStore.tsx

@@ -2,7 +2,6 @@ import { createStore, Reducer, combineReducers, applyMiddleware, Action, StoreEn
 import { persistReducer, persistStore, PersistConfig, Persistor } from "redux-persist";
 import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
 import { connectRouter, routerMiddleware } from "connected-react-router";
-import { History } from "history";
 import { composeWithDevTools } from "redux-devtools-extension";
 import thunk from "redux-thunk";
 
@@ -17,6 +16,7 @@ import { dataPacksReducer, dataPacksInitialState } from "./containers/Settings/D
 import { socialReducer, socialInitialState } from "./containers/Settings/Social/reducer";
 import { usersReducer, usersInitialState } from "./containers/Users/reducer";
 import { galleryReducer, galleryInitialState } from "./containers/Gallery/reducer";
+import { domainsReducer, domainsInitialState } from "./containers/Domains/reducer";
 
 import { IRootState } from "@ax/types";
 
@@ -46,6 +46,7 @@ export class GlobalStore {
       social: socialReducer as Reducer<any, Action<any>>,
       users: usersReducer as Reducer<any, Action<any>>,
       gallery: galleryReducer as Reducer<any, Action<any>>,
+      domains: domainsReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -63,6 +64,7 @@ export class GlobalStore {
           social: socialInitialState,
           users: usersInitialState,
           gallery: galleryInitialState,
+          domains: domainsInitialState,
         };
       }
 

package/src/api/checkgroups.tsx

@@ -15,7 +15,7 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const getCheckGroupItems = async (siteId: number | null, source: string): Promise<AxiosResponse<any>> => {
+const getCheckGroupItems = async (siteId: number | string | null, source: string): Promise<AxiosResponse<any>> => {
   const {
     host,
     endpoint: [prefix, suffix],

package/src/api/domains.tsx

@@ -0,0 +1,26 @@
+import { IDomainRobot } from "@ax/types";
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_ROBOTS: {
+    ...template,
+    endpoint: "/domains/robots",
+    method: "GET",
+  },
+  UPDATE_ROBOTS: {
+    ...template,
+    endpoint: "/domains/robots/bulk",
+    method: "PUT",
+  },
+};
+
+const getDomainsRobots = async () => {
+  return sendRequest(SERVICES.GET_ROBOTS);
+};
+
+const updateDomainsRobots = async (robots: IDomainRobot[]) => {
+  return sendRequest(SERVICES.UPDATE_ROBOTS, { robots });
+};
+
+export default { getDomainsRobots, updateDomainsRobots };

package/src/api/index.tsx

@@ -13,6 +13,7 @@ import dataPack from "./dataPack";
 import social from "./social";
 import files from "./files";
 import users from "./users";
+import domains from "./domains";
 
 export {
   sites,
@@ -29,5 +30,6 @@ export {
   dataPack,
   social,
   files,
-  users
+  users,
+  domains,
 };

package/src/api/sites.tsx

@@ -123,7 +123,7 @@ const getOrderedSitePages = async (siteID: number | string, query: string) => {
   return sendRequest(SERVICES.GET_ORDERED_SITE_PAGES);
 };
 
-const getStructuredSitePages = async (params: IGetSitePagesParams, structuredData: string) => {
+const getStructuredSitePages = async (params: IGetSitePagesParams, structuredData: string, filterQuery?: string) => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -131,7 +131,10 @@ const getStructuredSitePages = async (params: IGetSitePagesParams, structuredDat
 
   const { siteID, deleted, page, itemsPerPage, query } = params;
 
-  SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${structuredData}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`;
+  const filters = filterQuery ? `${filterQuery}&` : "?";
+
+  SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${structuredData}${filters}deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`;
+
   if (query && query.trim() !== "") {
     SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl + `&query=${query}`;
   }
@@ -145,14 +148,17 @@ const getSitePages = async (params: IGetSitePagesParams) => {
     endpoint: [prefix, suffix],
   } = SERVICES.GET_SITE_PAGES;
 
-  const { siteID, deleted, page, itemsPerPage, query } = params;
+  const { siteID, deleted, page, itemsPerPage, query, filterStructuredData, lang } = params;
 
   SERVICES.GET_SITE_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`;
-  if (query && query.trim() !== "") {
-    SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&query=${query}`;
+  if (query && query.trim() !== "") SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&query=${query}`;
+  if (filterStructuredData) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterStructuredData=${filterStructuredData}`;
+
+  const dataHeader = {
+    ...(lang && { lang })
   }
 
-  return sendRequest(SERVICES.GET_SITE_PAGES);
+  return sendRequest(SERVICES.GET_SITE_PAGES, null, dataHeader);
 };
 
 const getGlobalPages = async (params: IGetGlobalPagesParams, filterQuery?: string): Promise<AxiosResponse> => {
@@ -245,8 +251,19 @@ const getSitePagesLight = async (params: IGetSitePagesParams): Promise<AxiosResp
   return sendRequest(SERVICES.GET_SITE_PAGES_LIGHT, null, dataHeader);
 };
 
-const getSiteImages = async (site: number | string, page: number, itemsPerPage: number | null, thumbWidth?: number, thumbHeight?: number, query?: string, search?: string): Promise<AxiosResponse> => {
-  const { host, endpoint: [prefix, suffix] } = SERVICES.GET_SITE_IMAGES;
+const getSiteImages = async (
+  site: number | string,
+  page: number,
+  itemsPerPage: number | null,
+  thumbWidth?: number,
+  thumbHeight?: number,
+  query?: string,
+  search?: string
+): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_SITE_IMAGES;
   const items = itemsPerPage ? `&itemsPerPage=${itemsPerPage}` : "";
   const thumb = thumbWidth && thumbHeight ? `&thumbWidth=${thumbWidth}&thumbHeight=${thumbHeight}` : "";
   SERVICES.GET_SITE_IMAGES.dynamicUrl = `${host}${prefix}${site}${suffix}?page=${page}${items}${thumb}${query}`;

package/src/api/utils.tsx

@@ -5,7 +5,7 @@ export interface IServiceConfig {
   host: string | undefined;
   endpoint: string | string[];
   method: Method;
-  headers: { "Content-type": string; accept: string; site?: number | null };
+  headers: { "Content-type": string; accept: string; site?: number | null; lang?: number };
   hasToken: boolean;
   dynamicUrl?: string;
 }

package/src/components/Browser/index.tsx

@@ -4,6 +4,8 @@ import * as components from "components";
 import { providers, translations, cloudinaryDefaults } from "components";
 import { Preview } from "@griddo/core";
 
+import { findByEditorID } from "@ax/forms";
+
 import * as S from "./style";
 
 const Browser = (props: IBrowserProps): JSX.Element => {
@@ -19,11 +21,12 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   }, []);
 
   const selectEditorID = (
-    selectedComponent: { editorID: number; component: any },
+    selectedComponent: { editorID: number; component: any; type: string, parentEditorID: number },
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ) => {
-    e.stopPropagation();
+    const { element } = findByEditorID(content, selectedComponent.parentEditorID);
+    element && e.stopPropagation();
 
     const { setSelectedContent } = props;
 
@@ -31,7 +34,9 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
     const { editorID } = selectedComponent;
 
-    if (!disabled) {
+    const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
+
+    if (!disabled || isNavigationModule) {
       setSelectedContent(editorID, parent);
     }
   };

package/src/components/ElementsTooltip/index.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 
 const ExpandedTooltip = (props: IProps): JSX.Element => {
-  const { elements, defaultElements = 1 } = props;
+  const { elements, maxChar, defaultElements = 1, colors, rounded = false } = props;
 
   if (!elements) return <></>;
 
@@ -12,16 +13,27 @@ const ExpandedTooltip = (props: IProps): JSX.Element => {
 
   return (
     <S.Wrapper>
-      {visibleElements.map((element, idx) => (
-        <S.Element key={idx}>{element}</S.Element>
-      ))}
+      {visibleElements.map((fullElement, idx) => {
+        const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+        const color = colors && colors[element] ? colors[element] : undefined;
+        return (
+          <S.Element key={idx} color={color} rounded={rounded}>
+            {element}
+          </S.Element>
+        );
+      })}
       {remainingElements > 0 && (
-        <S.Element>
+        <S.Element rounded={rounded}>
           +{remainingElements}
           <S.Tooltip>
-            {elements.map((element, idx) => (
-              <S.Element key={idx}>{element}</S.Element>
-            ))}
+            {elements.map((element, idx) => {
+              const color = colors && colors[element] ? colors[element] : undefined;
+              return (
+                <S.Element key={idx} color={color} rounded={rounded}>
+                  {element}
+                </S.Element>
+              );
+            })}
           </S.Tooltip>
         </S.Element>
       )}
@@ -32,6 +44,9 @@ const ExpandedTooltip = (props: IProps): JSX.Element => {
 interface IProps {
   elements?: string[];
   defaultElements?: number;
+  maxChar?: number;
+  colors?: any;
+  rounded?: boolean;
 }
 
 export default ExpandedTooltip;

package/src/components/ElementsTooltip/style.tsx

@@ -9,25 +9,24 @@ const Tooltip = styled.div`
   position: absolute;
   z-index: 1;
   display: none;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   padding: ${(p) => p.theme.spacing.s};
   top: -50%;
   transform: translateX(-50%);
   box-shadow: ${(p) => p.theme.shadow.shadowL};
   background-color: ${(p) => p.theme.colors.uiBarBackground};
   border-radius: ${(p) => p.theme.radii.s};
-  flex-flow: row;
   max-width: 350px;
 `;
 
-const Element = styled.div`
+const Element = styled.div<{ color?: string; rounded: boolean }>`
   position: relative;
   ${(p) => p.theme.textStyle.uiXS};
   ${(p) => p.theme.colors.textMediumEmphasis};
   padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.xs};
   margin: calc(${(p) => p.theme.spacing.xxs} / 2);
-  background-color: ${(p) => p.theme.colors.uiBackground01};
-  border-radius: ${(p) => p.theme.radii.xs};
+  background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
+  border-radius: ${(p) => (p.rounded ? "34px" : p.theme.radii.xs)};
   white-space: nowrap;
 
   &:hover > ${Tooltip} {

package/src/components/ErrorCenter/index.tsx

@@ -7,8 +7,18 @@ import * as S from "./style";
 const ErrorCenter = (props: IProps): JSX.Element => {
   const { errors, actions } = props;
 
+  const goToElement = (key: string) => {
+    const element = document.getElementById(key);
+    if (element) {
+      element.scrollIntoView();
+    }
+  };
+
   const getErrorItem = (item: IErrorItem): JSX.Element => {
-    const handleClick = () => actions?.goToError(item.editorID, item.tab, item.template);
+    const handleClick = () => {
+      actions?.goToError(item.editorID, item.tab, item.template);
+      goToElement(item.key);
+    };
 
     return (
       <S.Wrapper key={`${item.editorID}${item.key}`} onClick={handleClick}>

package/src/components/ErrorCenter/style.tsx

@@ -1,21 +1,22 @@
 import styled from "styled-components";
 
-const ActionMenu = styled.ul`
+const ActionMenu = styled.div`
   padding: 0 ${(p) => p.theme.spacing.s};
   width: ${(p) => `calc(4 * ${p.theme.spacing.l})`};
   max-height: 380px;
   overflow: auto;
 `;
 
-const MenuHeader = styled.li`
+const MenuHeader = styled.div`
   ${(p) => p.theme.textStyle.headingXXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
   padding-top: ${(p) => p.theme.spacing.xs};
 `;
 
-const Wrapper = styled.li`
+const Wrapper = styled.div`
   padding: ${(p) => p.theme.spacing.s} 0;
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  cursor: pointer;
 `;
 
 const Header = styled.div`

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

@@ -19,11 +19,12 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
     }
 
     if (selectAllOption) {
-      const isAllSelected = newValue.value === selectAllOption || (options && valueArray.length === options.length - 1);
+      const valueArrayNoAll = valueArray.filter((item: string | number) => item !== selectAllOption);
 
-      valueArray = isAllSelected
-        ? [selectAllOption]
-        : valueArray.filter((item: string | number) => item !== selectAllOption);
+      const isAllSelected =
+        newValue.value === selectAllOption || (options && valueArrayNoAll.length === options.length - 1);
+
+      valueArray = isAllSelected ? [selectAllOption] : valueArrayNoAll;
     }
 
     if (!multipleSelection) {

package/src/components/Fields/ComponentArray/MixableComponentArray/AddItemButton/index.tsx

@@ -22,6 +22,7 @@ const AddItemButton = (props: IProps) => {
         toggleModal={toggleModal}
         isOpen={isOpen}
         handleClick={handleClick}
+        showSearch
       />
     </>
   );

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

@@ -1,5 +1,7 @@
 import React, { createContext, useState, useCallback, useContext, ReactElement } from "react";
 import { moveElement } from "@ax/forms";
+import { moveArrayElement } from "@ax/helpers";
+import { IStructuredDataContent } from "@ax/types";
 
 const initState = {
   mode: "auto",
@@ -8,7 +10,7 @@ const initState = {
   quantity: 0,
   items: [],
   selectedItems: [],
-  fixed: [],
+  fixed: null,
   search: "",
   showSelected: false,
   source: [],
@@ -48,14 +50,16 @@ const useReferenceProvider = (modes?: string[]) => {
     [setState, state]
   );
 
-  const setReorderElements = (elementID: number, isPush: boolean) => {
-    const { selectedItems } = state;
-    const newItems = moveElement(elementID, selectedItems, isPush, "id");
-    const fixed = newItems.map((item: any) => item.id);
+  const setReorderElements = (item: IStructuredDataContent, isPush: boolean) => {
+    const { selectedItems, fixed } = state;
+    const newItems = moveElement(item.id, selectedItems, isPush, "id");
+    const originalItemId = item.relatedPage?.originalStructuredDataId;
+    const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
+    const newFixed = moveArrayElement(itemId, fixed, isPush);
     const newState: IReferenceState = {
       ...state,
       selectedItems: newItems,
-      fixed,
+      fixed: newFixed,
     };
     setState(newState);
   };

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

@@ -29,7 +29,7 @@ const Item = (props: IProps) => {
   const moveModule = (e: any, isPush: boolean) => {
     e.preventDefault();
     e.stopPropagation();
-    handleReorder(item.id, isPush);
+    handleReorder(item, isPush);
   };
 
   const handleUpClick = (e: any) => moveModule(e, false);
@@ -80,7 +80,7 @@ interface IProps {
   listLength: number;
   source: IDataSource;
   handleDelete(item: IStructuredDataContent): void;
-  handleReorder(elementID: number, isPush: boolean): void;
+  handleReorder(item: any, isPush: boolean): void;
 }
 
 export default Item;

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

@@ -13,6 +13,7 @@ const ItemList = (props: IProps) => {
   const { items, currentSite, handleListDelete, handleChange } = props;
 
   const { state, setState, setReorderElements } = useReference();
+  const { fixed, mode, selectedItems, sourceTitles } = state;
 
   useEffect(() => {
     const params = {
@@ -34,19 +35,19 @@ const ItemList = (props: IProps) => {
   }, [items]);
 
   useEffect(() => {
-    const { mode, fixed } = state;
-    const newValue = {
-      mode,
-      fixed,
-    };
-    handleChange(newValue);
+    if (fixed) {
+      const newValue = { mode, fixed };
+      handleChange(newValue);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.fixed]);
+  }, [fixed]);
 
   const handleDelete = (item: IStructuredDataContent) => {
-    if (state.fixed.includes(item.id)) {
-      const newSelIds = state.fixed.filter((a: any) => a !== item.id);
-      const selItems = state.selectedItems.filter((b: any) => b.id !== item.id);
+    const originalItemId = item.relatedPage?.originalStructuredDataId;
+    const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
+    if (fixed.includes(itemId)) {
+      const newSelIds = fixed.filter((a: any) => a !== itemId);
+      const selItems = selectedItems.filter((b: any) => b.id !== itemId);
       setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems }));
       handleListDelete(newSelIds);
     }
@@ -54,9 +55,9 @@ const ItemList = (props: IProps) => {
 
   return (
     <S.ItemList>
-      {state.selectedItems &&
-        state.selectedItems.map((item: IStructuredDataContent, index: number) => {
-          const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
+      {selectedItems &&
+        selectedItems.map((item: IStructuredDataContent, index: number) => {
+          const source = sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
           return (
             <Item
               key={index}
@@ -64,7 +65,7 @@ const ItemList = (props: IProps) => {
               handleDelete={handleDelete}
               handleReorder={setReorderElements}
               index={index}
-              listLength={state.selectedItems.length}
+              listLength={selectedItems.length}
               source={source}
             />
           );

package/src/components/FieldsBehavior/index.tsx

@@ -25,6 +25,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
     error,
     deleteError,
     editorID,
+    objKey,
   } = props;
 
   const [showAdvanced, setShowAdvanced] = useState(false);
@@ -73,7 +74,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
   };
 
   return (
-    <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle}>
+    <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
       <S.Content error={errorField}>
         <Field {...props} showAdvanced={showAdvanced} handleValidation={handleValidation} error={errorField} />
       </S.Content>

package/src/components/FloatingMenu/index.tsx

@@ -13,6 +13,7 @@ const FloatingMenu = (props: IProps) => {
     closeOnSelect = true,
     isCheckGroup,
     reactiveToHover,
+    offset
   } = props;
   const wrapper = useRef<any>(null);
   const button = useRef<any>(null);
@@ -61,7 +62,7 @@ const FloatingMenu = (props: IProps) => {
         <Button />
       </S.ButtonWrapper>
       {isOpen && (
-        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position}>
+        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset}>
           <S.Menu>
             {children}
           </S.Menu>
@@ -79,6 +80,7 @@ interface IProps {
   closeOnSelect?: boolean;
   isCheckGroup?: boolean;
   reactiveToHover?: boolean;
+  offset?: number;
 }
 
 export default FloatingMenu;

package/src/components/FloatingMenu/style.tsx

@@ -1,21 +1,21 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div``;
+const Wrapper = styled.div``;
 
-export const ButtonWrapper = styled.div`
+const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
 `;
 
-export const MenuWrapper = styled.div<{ isInAppBar?: boolean, position: string }>`
+const MenuWrapper = styled.div<{ isInAppBar?: boolean; position: string; offset?: number }>`
   position: absolute;
   z-index: 3;
   padding-top: ${(p) => (p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs)};
   margin-right: ${(p) => (p.isInAppBar ? p.theme.spacing.s : "0")};
-  ${(p) => p.position}: 0;
+  ${(p) => p.position}: ${(p) => (p.offset ? `${p.offset}px` : "0")};
 `;
 
-export const Menu = styled.div`
+const Menu = styled.div`
   padding: ${(p) => p.theme.spacing.xs} 0;
   max-width: ${(p) => `calc(${p.theme.spacing.l} * 5)`};
   min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
@@ -23,3 +23,5 @@ export const Menu = styled.div`
   box-shadow: ${(p) => p.theme.shadow.shadowL};
   border-radius: ${(p) => p.theme.spacing.xxs};
 `;
+
+export { Wrapper, ButtonWrapper, MenuWrapper, Menu };

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

@@ -1,8 +1,8 @@
 import React, { memo, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { IImage, IRootState, IImageForm } from "@ax/types";
-import { Button, CheckField, FieldsBehavior, Toast } from "@ax/components";
-import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
+import { Button, CheckField, FieldsBehavior, Toast, IconAction } from "@ax/components";
+import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
 
 import { galleryActions } from "@ax/containers/Gallery";
 import { IIsSaving } from "@ax/containers/Gallery/reducer";
@@ -100,7 +100,7 @@ const GalleryDetailPanel = (props: IProps) => {
     }
   };
 
-  const handleOnClickUrl = () => {
+  const handleOpenUrl = () => {
     if (imageSelected) {
       const win = window.open(imageSelected.url, "_blank");
       if (win) {
@@ -109,6 +109,8 @@ const GalleryDetailPanel = (props: IProps) => {
     }
   };
 
+  const handleCopyUrl = () => imageSelected && navigator.clipboard.writeText(imageSelected.url);
+
   const dimensions =
     imageSelected && imageSelected.width && imageSelected.height
       ? `${imageSelected.width}x${imageSelected.height}px`
@@ -132,27 +134,23 @@ const GalleryDetailPanel = (props: IProps) => {
   const renderImageForm = !imageSelected ? null : (
     <S.PanelForm>
       {canSetAsGlobal && <AddToGlobal />}
-      <S.DateWrapper>Uploaded: {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}</S.DateWrapper>
-      <S.ImageName>{imageSelected.name}</S.ImageName>
       <S.ImageInfoWrapper>
         <S.ImageWrapper>
-          <img src={imageSelected.url} alt={imageForm.alt} />
+          <S.Image>
+            <img src={imageSelected.url} alt={imageForm.alt} />
+          </S.Image>
+          <Button type="button" onClick={handleCopyUrl} buttonStyle="line">
+            Copy URL
+          </Button>
+          <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
         </S.ImageWrapper>
-        <S.ImageData>
-          <S.ImageSize>{formatBytes(imageSelected.size)}</S.ImageSize>
-          <S.ImageDimensions>{dimensions}</S.ImageDimensions>
-        </S.ImageData>
+        <S.ImageName>{imageSelected.name}</S.ImageName>
+        <S.Date><strong>Uploaded:</strong> {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}</S.Date>
+        <S.Type><strong>Type:</strong> {getFileExtension(imageSelected.name)}</S.Type>
+        <S.ImageSize><strong>Size:</strong> {formatBytes(imageSelected.size)}</S.ImageSize>
+        <S.ImageDimensions><strong>Resolution:</strong> {dimensions}</S.ImageDimensions>
       </S.ImageInfoWrapper>
       <S.FormWrapper>
-        <FieldsBehavior
-          title=""
-          name="url"
-          value={imageSelected.url}
-          fieldType="TextField"
-          readonly={true}
-          icon="openOutside"
-          onClickIcon={handleOnClickUrl}
-        />
         <FieldsBehavior
           title="Title"
           name="title"