@silexlabs/silex 3.0.1-0 → 3.0.1

package/src/css/project-bar.scss

@@ -1,14 +1,17 @@
 @use "variables" as *;
 
 // squeeze the stage iframe when panel is open
-iframe.enable-squeeze.gjs-frame {
-  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
-}
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
+//.silex-squeeze-left .gjs-frame-wrapper {
+//  margin-left: 18%;
+//  width: auto;
+//}
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(var(--viewsProjectPanelWidth) + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
+
+
 // button bar
 .#{$pn-prefix}project-bar-panel {
   width: $projectBarWidth;
@@ -21,13 +24,17 @@ iframe.enable-squeeze.silex-squeeze-left {
       flex: 1;
     }
     .#{$pn-prefix}btn {
-      margin: 5px 0 0;
+      margin: 5px 0 5px 0px;
       padding: 5px;
       &.#{$pn-prefix}active {
         background-color: $lighterPrimaryColor;
         width: $projectBarWidth;
         box-shadow: none;
-     }
+      }
+    }
+    .#{$pn-prefix}btn.project-bar__dirty {
+      background-color: $quaternaryColor;
+      color: white;
     }
   }
   .logo {
@@ -35,15 +42,30 @@ iframe.enable-squeeze.silex-squeeze-left {
     background-repeat: no-repeat;
     background-position: center center;
     background-color: transparent;
+    background-size: contain;
   }
 }
 
+// Resize options project panel button
+.viewsOptionsProjectPanel__size-btn::before {
+  content: '→';
+}
+.viewsOptionsProjectPanel__size-btn {
+  z-index: $z-views-options-buttons;
+  right: auto;
+  left: 0;
+}
+// For fixed block size after project panel resizing (instead of default value 45%)
+.gjs-block {
+  width: 84px;
+}
+
 // panels
 .#{$pn-prefix}project-bar-container {
   top: $topBarHeight;
   width: $projectPanelWidth;
   min-width: $projectPanelMinWidth;
-  height: calc(100% - $topBarHeight);
+  height: calc(100% - $topBarHeight - $footerHeight);
   background-color: $lighterPrimaryColor;
   &:not(.gjs-hidden) {
     display: flex; // let the child take the whole height
@@ -81,13 +103,7 @@ iframe.enable-squeeze.silex-squeeze-left {
       }
       .project-bar__panel-header-button {
         cursor: pointer;
-        font-size: large;
-        font-weight: 400;
         span {
-          position: relative;
-          left: -2px;
-          top: -11px;
-          font-weight: bolder;
           background-color: #444;
           border-radius: 100%;
           display: inline-block;

package/src/css/silex.scss

@@ -4,6 +4,9 @@
 .silex-workspace {
   @include mixins.silex-ui-full;
   display: flex;
+  body {
+    font-family: $fontFamily;
+  }
   a {
     color: inherit;
   }
@@ -20,20 +23,53 @@
     font-size: 18px;
     font-weight: normal;
   }
+  //Better contrast than grapesjs default for select menu et input
+  select, input {
+    background-color: $darkerPrimaryColor;
+  }
+  .gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
+    color: $secondaryColor;
+  }
 }
 
 .full-width {
   width: 100%;
 }
 
+// Resize options panel button
+.silex-workspace {
+  .gjs-pn-viewsOptions {
+      z-index: $z-views-options-buttons;
+      right: 0;
+      left: auto;
+
+      .viewsOptions__size-btn::before {
+        content: '←';
+      }
+    }
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 // full screen settings
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
+    textarea {
+      min-height: 250px;
+    }
   }
   .silex-form__element {
     padding: 10px 5px;
@@ -43,6 +79,7 @@
   }
   footer {
     position: fixed;
+    z-index: 10;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -57,6 +94,10 @@
       font-size: x-small;
     }
   }
+  .CodeMirror {
+    min-height: 400px;
+    height: auto;
+  }
 }
 
 button.silex-button,
@@ -75,8 +116,16 @@ input.silex-button[type="submit"] {
   background-color: $lighterPrimaryColor;
   border-color: transparent;
   padding: 5px;
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $tertiaryColor;
+  }
+  &:hover {
+    background-color: $darkerPrimaryColor;
+  }
 }
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: .8;
   cursor: unset;
@@ -92,6 +141,7 @@ input.silex-button[type="submit"] {
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -107,11 +157,15 @@ input.silex-button[type="submit"] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
   &>* {
     margin: 5px;
   }
+  main {
+    width: 100%;
+  }
 }
 
 ol.silex-list,
@@ -119,15 +173,15 @@ ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
+  //background-color: #575757;
   &>li {
     padding: 5px;
-    border-bottom: 1px solid #575757;
-    background-color: #444;
+    border-bottom: 1px solid $lighterPrimaryColor;
+    //background-color: #444;
     margin: 5px;
   }
   fieldset {
-    border-color: #575757;
+    border-color: $lighterPrimaryColor;
   }
   h4 { // badge-like
     display: inline-block;
@@ -152,6 +206,26 @@ ul.silex-list {
   }
 }
 
+ol.silex-list--menu,
+ul.silex-list--menu {
+  &>li {
+    padding: 15px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-bottom-color: $lighterPrimaryColor;
+    text-align: center;
+    cursor: pointer;
+  }
+  &>li:first-child {
+    border-top-color: $lighterPrimaryColor;
+  }
+  .active,
+  &>li:hover {
+    color: $tertiaryColor;
+    background-color: $darkerPrimaryColor;
+  }
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;

package/src/css/website-info.scss

@@ -0,0 +1,14 @@
+@use "variables" as *;
+
+.gjs-website-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 0 10px;
+  line-height: 1;
+  min-width: 100px;
+  border: 1px solid $lighterPrimaryColor;
+  background-color: $darkerPrimaryColor;
+}

package/src/html/index.pug

@@ -12,7 +12,7 @@ html(lang="en", translate="no")
       style.
         body {
           background-color: #444444;
-          font-family: Helvetica,sans-serif;
+          font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
         .silex-loader {
           display: none;
@@ -34,6 +34,6 @@ html(lang="en", translate="no")
       script(src='js/main.js')
 
     block silex-start
-      // Here you can use silex.config to hook into silex options before silex starts
       script.
-        window.silex.start()
+        silex.start()
+        // From here silex.config is available and Silex is getting started

package/src/ts/client/api.ts

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE } from '../constants'
-import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError } from '../types'
+import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE, API_WEBSITE_DUPLICATE } from '../constants'
+import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError, ApiWebsiteDuplicateQuery } from '../types'
 
 export enum ApiRoute {
   PUBLICATION_PUBLISH = API_PATH + API_PUBLICATION_PATH + API_PUBLICATION_PUBLISH,
@@ -27,6 +27,7 @@ export enum ApiRoute {
   WEBSITE_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_READ,
   WEBSITE_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_WRITE,
   WEBSITE_DELETE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DELETE,
+  WEBSITE_DUPLICATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DUPLICATE,
   WEBSITE_CREATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_CREATE,
   WEBSITE_LIST = API_PATH + API_WEBSITE_PATH + API_WEBSITE_LIST,
   WEBSITE_ASSETS_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_ASSET_READ,
@@ -35,7 +36,14 @@ export enum ApiRoute {
   WEBSITE_META_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_META_WRITE,
 }
 
-const ROOT_URL = window.location.origin
+// Root URL of Silex server, should we use config.rootUrl ?
+let serverUrl = window.location.origin + window.location.pathname.replace(/\/$/, '')
+export function setServerUrl(url: string): void {
+  serverUrl = url
+}
+export function getServerUrl(): string {
+  return serverUrl
+}
 
 export async function getUser({type, connectorId}: {type: ConnectorType, connectorId?: ConnectorId}): Promise<ConnectorUser> {
   return api<ApiConnectorUserQuery, null, ApiConnectorUserResponse>(ApiRoute.CONNECTOR_USER, 'GET', {
@@ -76,31 +84,35 @@ export async function websiteList({connectorId}: {connectorId?: ConnectorId}): P
 }
 
 export async function websiteLoad({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteData> {
-  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId: connectorId }) as Promise<WebsiteData>
+  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId }) as Promise<WebsiteData>
 }
 
 export async function websiteSave({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteData, connectorId?: ConnectorId}): Promise<void> {
-  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
 export async function websiteDelete({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId: connectorId })
+  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId })
+}
+
+export async function websiteDuplicate({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteDuplicateQuery, null, null>(ApiRoute.WEBSITE_DUPLICATE, 'POST', { websiteId, connectorId })
 }
 
 export async function websiteCreate({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId: connectorId }, data)
+  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId }, data)
 }
 
 export async function websiteMetaWrite({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
-export async function websiteMetaRead({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteMetaReadQuery, null, ApiWebsiteMetaReadResponse>(ApiRoute.WEBSITE_META_WRITE, 'PUT', { websiteId, connectorId: connectorId })
+export async function websiteMetaRead({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteMeta> {
+  return api<ApiWebsiteMetaReadQuery, null, ApiWebsiteMetaReadResponse>(ApiRoute.WEBSITE_META_WRITE, 'GET', { websiteId, connectorId })
 }
 
 export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: string, websiteId: WebsiteId, connectorId: ConnectorId}): Promise<string> {
-  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId: connectorId })
+  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId })
 }
 
 /**
@@ -108,12 +120,17 @@ export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: s
  * @see assetManager in src/ts/client/grapesjs/index.ts
  */
 export async function websiteAssetsSave({websiteId, connectorId, files}: {websiteId: WebsiteId, connectorId: ConnectorId, files: ClientSideFile[]}): Promise<string[]> {
-  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId: connectorId }, files)
+  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId }, files)
   return data
 }
 
 export async function api<ReqQuery, ReqBody, ResBody>(route: ApiRoute | string, method: string, query?: ReqQuery, payload?: ReqBody): Promise<ResBody> {
-  const url = `${ROOT_URL}${route.toString()}?${new URLSearchParams(Object.entries(query).filter(([key, value]) => !!value)).toString()}`
+  const url = `${serverUrl}${route.toString()}?${
+    new URLSearchParams(
+      Object.entries(query)
+        .filter(([key, value]) => !!value)
+        .map(([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)])
+    ).toString()}`
   const response = await fetch(url, {
     method,
     headers: {
@@ -124,7 +141,14 @@ export async function api<ReqQuery, ReqBody, ResBody>(route: ApiRoute | string,
   })
 
   if (!response.ok) {
-    const json = await response.json()
+    let json
+    try {
+      json = await response.json()
+    } catch (err) {
+      // If the response is not JSON, throw a generic error
+      // This is the case when Silex backend has an uncatched error, e.g. expressjs 413 PayloadTooLargeError: request entity too large
+      throw new ApiError(response.statusText, response.status)
+    }
     throw new ApiError(json.message, response.status)
   }
 

package/src/ts/client/assetUrl.test.ts

@@ -0,0 +1,164 @@
+import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { removeTempDataFromStyles } from './assetUrl'
+
+describe('assetUrl', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: 'http://localhost:6800/',
+        pathname: '',
+        origin: 'http://localhost:6800',
+      },
+    })
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/',
+      pathname: '',
+      origin: 'http://localhost:6800',
+    })
+  })
+
+  it('store url to display url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('store url to display url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('store url to display url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    expect(storedToDisplayed('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('store url to display url with escapable website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test%20id&connectorId=test%20connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable  website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    const websiteId = 'test id'
+    const websiteIdEncoded = 'test+id'
+    const connectorId = 'test connector'
+    const connectorIdEncoded = 'test+connector'
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`, websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+  })
+
+  it('multiple backgrounds', async () => {
+    // // FIXME: this should mock the functions but it doesnt
+    // const mocked = {
+    //   displayedToStored: jest.fn((url: string) => url),
+    //   storedToDisplayed: jest.fn((url: string) => url),
+    // }
+    // jest.mock('./assetUrl', () => (mocked))
+    //addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId)
+    //expect(mocked.displayedToStored).toBeCalledTimes(1)
+    const { addTempDataToStyles } = await import('./assetUrl')
+
+    const websiteId = 'test-id'
+    const connectorId = 'test-connector'
+    const bgImageDisplayed = `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=${websiteId}&connectorId=${connectorId}'), linear-gradient(#0ca311 0%, #0ca311 100%)`
+    const bgImageStored = 'linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url(\'/assets/qIg7JPRc.webp\'), linear-gradient(#0ca311 0%, #0ca311 100%)'
+    const selectors = ['body']
+    function toStyle(bgImage: string) {
+      return {
+        style: {
+          'background-image': bgImage,
+        },
+        selectors,
+      }
+    }
+    // From stored to displayed
+    expect(addTempDataToStyles([toStyle(bgImageStored)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to displayed (error case)
+    expect(addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to stored
+    expect(removeTempDataFromStyles([toStyle(bgImageDisplayed)]))
+      .toEqual([toStyle(bgImageStored)])
+    //// From stored to stored (error case)
+    expect(removeTempDataFromStyles([toStyle(bgImageStored)]))
+      .toEqual([toStyle(bgImageStored)])
+  })
+})