✨ Make frontend build and watch process more resilent to errors

✨ Use correct team-id on file-menu on dashboard

.travis.yml

@@ -1,40 +0,0 @@
-dist: xenial
-
-language: generic
-sudo: required
-
-cache:
-  directories:
-    - $HOME/.m2
-
-services:
-  - docker
-
-branches:
-  only:
-    - master
-    - develop
-
-install:
-  - curl -O https://download.clojure.org/install/linux-install-1.10.1.447.sh
-  - chmod +x linux-install-1.10.1.447.sh
-  - sudo ./linux-install-1.10.1.447.sh
-
-before_script:
-  - env | sort
-
-script:
-  - ./manage.sh build-devenv
-  - ./manage.sh run-frontend-tests
-  - ./manage.sh run-backend-tests
-  - ./manage.sh build-images
-  - ./manage.sh run
-
-after_script:
-  - docker images
-
-notifications:
-  email: false
-
-env:
-  - NODE_VERSION=10.16.0

CHANGES.md

@@ -29,7 +29,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
-
+- Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
 
 ## 2.12.1
 

docker/images/docker-compose.yaml

@@ -152,9 +152,9 @@ services:
 
       # AWS_ACCESS_KEY_ID: <KEY_ID>
       # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
-      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>
 
       ## Telemetry. When enabled, a periodical process will send anonymous data about this
       ## instance. Telemetry data will enable us to learn how the application is used,

docs/technical-guide/configuration.md

@@ -114,14 +114,7 @@ configuration.
 The callback has the following format:
 
 ```html
-https://<your_domain>/api/auth/oauth/<oauth_provider>/callback
-```
-
-You will need to change <your_domain> and <oauth_provider> according to your setup.
-This is how it looks with Gitlab provider:
-
-```html
-https://<your_domain>/api/auth/oauth/gitlab/callback
+https://<your_domain>/api/auth/oidc/callback
 ```
 
 #### Google

frontend/package.json

@@ -48,7 +48,7 @@
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch": "exit 0",
-    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && yarn run build:wasm && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
     "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {

frontend/resources/templates/index.mustache

@@ -17,17 +17,18 @@
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
-    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}
 
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script type="importmap">{{& manifest.importmap }}</script>
 
     <script type="module">
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/rasterizer.mustache

@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Penpot - Rasterizer</title>
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/render.mustache

@@ -4,10 +4,12 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Penpot - Render</title>
-    <link rel="icon" href="images/favicon.png" />
+
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
     </script>
 

frontend/scripts/_helpers.js

@@ -27,9 +27,11 @@ export function startWorker() {
   });
 }
 
-export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
+export const BUILD_TS = process.env.BUILD_TS || Date.now();
+export const VERSION = process.env.VERSION || "develop";
+export const VERSION_TAG = process.env.VERSION_TAG || VERSION;
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -172,6 +174,7 @@ export async function watch(baseDir, predicate, callback) {
   const watcher = new Watcher(baseDir, {
     persistent: true,
     recursive: true,
+    debounce: 500
   });
 
   watcher.on("change", (path) => {
@@ -179,8 +182,19 @@ export async function watch(baseDir, predicate, callback) {
       callback(path);
     }
   });
+
+
+  watcher.on("error", (cause) => {
+    console.log("WATCHER ERROR", cause);
+  });
 }
 
+export async function ensureDirectories() {
+  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
+  await fs.mkdir("./resources/public/css/", { recursive: true });
+}
+
+
 async function readManifestFile(resource) {
   const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -193,25 +207,25 @@ async function generateManifest() {
     render_main: "./js/render.js",
     rasterizer_main: "./js/rasterizer.js",
 
-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,
 
     importmap: JSON.stringify({
       "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
       }
     })
   };
@@ -222,11 +236,12 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
   const content = await fs.readFile(path, { encoding: "utf-8" });
 
-  const ts = Math.floor(new Date());
-
   context = Object.assign({}, context, {
-    ts: ts,
-    isDebug,
+    isDebug: IS_DEBUG,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
   });
 
   return mustache.render(content, context, partials);
@@ -257,6 +272,9 @@ const markedOptions = {
 marked.use(markedOptions);
 
 export async function compileTranslations() {
+  const outputDir = "resources/public/js/";
+  await fs.mkdir(outputDir, { recursive: true });
+
   const langs = [
     "ar",
     "ca",
@@ -338,7 +356,6 @@ export async function compileTranslations() {
     }
 
     const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
-    const outputDir = "resources/public/js/";
     const outputFile = ph.join(outputDir, "translation." + lang + ".js");
     await fs.writeFile(outputFile, esm);
   }
@@ -390,7 +407,6 @@ async function generateSvgSprites() {
 }
 
 async function generateTemplates() {
-  const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
   const manifest = await generateManifest();
@@ -415,10 +431,7 @@ async function generateTemplates() {
   };
 
   const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
+    manifest: manifest
   };
 
   content = await renderTemplate(
@@ -487,7 +500,7 @@ export async function compileStyles() {
   await fs.mkdir("./resources/public/css", { recursive: true });
   await fs.writeFile("./resources/public/css/main.css", result);
 
-  if (isDebug) {
+  if (IS_DEBUG) {
     let debugCSS = await compileSassDebug(worker);
     await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }
@@ -500,17 +513,43 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
   const start = process.hrtime();
   log.info("init: compile svgsprite");
-  await generateSvgSprites();
+  let error = false;
+
+  try {
+    await generateSvgSprites();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile svgsprite", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile svgsprite", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile svgsprite", `(${ppt(end)})`);
+  }
 }
 
 export async function compileTemplates() {
   const start = process.hrtime();
+  let error = false;
   log.info("init: compile templates");
-  await generateTemplates();
+
+  try {
+    await generateTemplates();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile templates", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile templates", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile templates", `(${ppt(end)})`);
+  }
 }
 
 export async function compilePolyfills() {

frontend/scripts/_worker.js

@@ -28,14 +28,12 @@ async function compileFile(path) {
         ],
         sourceMap: false,
       });
-      // console.dir(result);
       resolve({
         inputPath: path,
         outputPath: dest,
         css: result.css,
       });
     } catch (cause) {
-      console.error(cause);
       reject(cause);
     }
   });

frontend/scripts/build

@@ -2,26 +2,26 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
+set -ex
+
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
 export INCLUDE_WASM=${BUILD_WASM:-yes};
-export CURRENT_VERSION=$1;
-export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
 export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
-export TS=$(date +%s);
+
+export BUILD_DATE=$(date -R);
+export BUILD_TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 # Some cljs reacts on this environment variable for define more
 # performant code on macros (example: rumext)
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
 
 corepack enable;
 corepack install;
-yarn install || exit 1;
+yarn install;
 
 rm -rf target/dist;
 rm -rf resources/public;
@@ -37,7 +37,7 @@ yarn run build:app:main $EXTRA_PARAMS;
 yarn run build:app:libs;
 yarn run build:app:assets;
 
-sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+sed -i "s/\.\/render.js/.\/render.js?version=$VERSION_TAG/g" resources/public/js/worker/main*.js
 
 rsync -avr resources/public/ target/dist/
 

frontend/scripts/build-app-assets.js

@@ -1,5 +1,6 @@
 import * as h from "./_helpers.js";
 
+await h.ensureDirectories();
 await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/scripts/build-storybook

@@ -2,18 +2,16 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
-export CURRENT_VERSION=$1;
+set -ex
+
+export BUILD_TS=$(date +%s);
 export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
-export TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
-
 corepack enable;
 corepack install || exit 1;
 yarn install || exit 1;

frontend/scripts/watch.js

@@ -12,19 +12,31 @@ let sass = null;
 
 async function compileSassAll() {
   const start = process.hrtime();
+  let error = false;
+
   log.info("init: compile styles");
 
-  sass = await h.compileSassAll(worker);
-  let output = await h.concatSass(sass);
-  await fs.writeFile("./resources/public/css/main.css", output);
+  try {
+    sass = await h.compileSassAll(worker);
+    let output = await h.concatSass(sass);
+    await fs.writeFile("./resources/public/css/main.css", output);
 
-  if (isDebug) {
-    let debugCSS = await h.compileSassDebug(worker);
-    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+    if (isDebug) {
+      let debugCSS = await h.compileSassDebug(worker);
+      await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+    }
+  } catch (cause) {
+    error = cause;
   }
 
   const end = process.hrtime(start);
-  log.info("done: compile styles", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile styles", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile styles", `(${ppt(end)})`);
+  }
 }
 
 async function compileSass(path) {
@@ -48,7 +60,7 @@ async function compileSass(path) {
   }
 }
 
-await fs.mkdir("./resources/public/css/", { recursive: true });
+await h.ensureDirectories();
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/shadow-cljs.edn

@@ -75,6 +75,7 @@
     {:fn-invoke-direct true
      :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
      :source-map true
+     :pseudo-names true
      :elide-asserts true
      :anon-fn-naming-policy :off
      :cross-chunk-method-motion false

frontend/src/app/config.cljs

@@ -95,6 +95,7 @@
 (def browser              (parse-browser))
 (def platform             (parse-platform))
 
+(def version-tag          (obj/get global "penpotVersionTag"))
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI"))
 (def flex-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
@@ -190,9 +191,8 @@
 
 (defn resolve-href
   [resource]
-  (let [version (get version :full)
-        href    (-> public-uri
-                    (u/ensure-path-slash)
-                    (u/join resource)
-                    (get :path))]
-    (str href "?version=" version)))
+  (let [href (-> public-uri
+                 (u/ensure-path-slash)
+                 (u/join resource)
+                 (get :path))]
+    (str href "?version=" version-tag)))

frontend/src/app/main/refs.cljs

@@ -480,6 +480,9 @@
 (def workspace-token-sets-tree
   (l/derived (d/nilf ctob/get-set-tree) tokens-lib))
 
+(def workspace-all-tokens-map
+  (l/derived (d/nilf ctob/get-all-tokens) tokens-lib))
+
 (def workspace-active-theme-paths
   (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))
 

frontend/src/app/main/ui/dashboard/file_menu.cljs

@@ -193,11 +193,11 @@
         restore-fn
         (fn [_]
           (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id (:id current-team)
+                     (with-meta {:team-id current-team-id
                                  :ids (into #{} d/xf:map-id files)}
                        {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects (:id current-team))
-                                               (dd/fetch-deleted-files (:id current-team)))
+                                               (dd/fetch-projects current-team-id)
+                                               (dd/fetch-deleted-files current-team-id))
                         :on-error #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restore-file" (:name file))))}))))
 
         on-restore-immediately
@@ -214,7 +214,7 @@
         on-delete-immediately
         (fn []
           (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id (:id current-team)
+                                      {:team-id current-team-id
                                        :ids (into #{} d/xf:map-id files)}))]
             (st/emit!
              (modal/show {:type :confirm
@@ -244,8 +244,7 @@
            (for [project current-projects]
              {:name (get-project-name project)
               :id (get-project-id project)
-              :handler (on-move (:id current-team)
-                                (:id project))})
+              :handler (on-move current-team-id (:id project))})
            (when (seq other-teams)
              [{:name (tr "dashboard.move-to-other-team")
                :id "move-to-other-team"

frontend/src/app/main/ui/forms.cljs

@@ -23,6 +23,7 @@
 
         touched?   (and (contains? (:data @form) input-name)
                         (get-in @form [:touched input-name]))
+
         error      (get-in @form [:errors input-name])
 
         value      (get-in @form [:data input-name] "")
@@ -52,7 +53,8 @@
   (let [form      (mf/use-ctx context)
         disabled? (or (and (some? form)
                            (or (not (:valid @form))
-                               (seq (:external-errors @form))))
+                               (seq (:async-errors @form))
+                               (seq (:extra-errors @form))))
                       (true? disabled))
         handle-key-down-save
         (mf/use-fn

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs

@@ -140,6 +140,9 @@
         error
         (get-in @form [:errors input-name])
 
+        extra-error
+        (get-in @form [:extra-errors input-name])
+
         value
         (get-in @form [:data input-name] "")
 
@@ -247,9 +250,14 @@
                                   :hint-type (:type hint)})
 
         props
-        (if (and error touched?)
+        (cond
+          (and error touched?)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
+          (and extra-error touched?)
+          (mf/spread-props props {:hint-type "error"
+                                  :hint-message (:message extra-error)})
+          :else
           props)]
 
     (mf/with-effect [resolve-stream tokens token input-name]

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs

@@ -236,12 +236,14 @@
    (on-composite-input-change form field value false))
   ([form field value trim?]
    (letfn [(clean-errors [errors]
-             (-> errors
-                 (dissoc field)
-                 (not-empty)))]
+             (some-> errors
+                     (update :value #(when (map? %) (dissoc % field)))
+                     (update :value #(when (seq %) %))
+                     (not-empty)))]
      (swap! form (fn [state]
                    (-> state
                        (assoc-in [:data :value field] (if trim? (str/trim value) value))
+                       (assoc-in [:touched :value field] true)
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
@@ -257,6 +259,9 @@
         value
         (get-in @form [:data :value input-name] "")
 
+        touched?
+        (get-in @form [:touched :value input-name])
+
         resolve-stream
         (mf/with-memo [token]
           (if-let [value (get-in token [:value input-name])]
@@ -284,7 +289,7 @@
                                 :hint-message (:message hint)
                                 :hint-type (:type hint)})
         props
-        (if error
+        (if (and touched? error)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
           props)
@@ -332,6 +337,7 @@
                                  message (tr "workspace.tokens.resolved-value" (or resolved-value value))]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
+                             (swap! form update :async-errors dissoc :reference)
                              (if (= input-value (str resolved-value))
                                (reset! hint* {})
                                (reset! hint* {:message message :type "hint"})))))))]

frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs

@@ -23,20 +23,19 @@
   (let [token-type
         (or (:type token) token-type)
 
-        tokens-in-selected-set
-        (mf/deref refs/workspace-all-tokens-in-selected-set)
-
         token-path
         (mf/with-memo [token]
           (cft/token-name->path (:name token)))
 
-        tokens-tree-in-selected-set
-        (mf/with-memo [token-path tokens-in-selected-set]
-          (-> (ctob/tokens-tree tokens-in-selected-set)
+        all-tokens (mf/deref refs/workspace-all-tokens-map)
+
+        all-tokens
+        (mf/with-memo [token-path all-tokens]
+          (-> (ctob/tokens-tree all-tokens)
               (d/dissoc-in token-path)))
         props
         (mf/spread-props props {:token-type token-type
-                                :tokens-tree-in-selected-set tokens-tree-in-selected-set
+                                :all-token-tree all-tokens
                                 :token token})
         text-case-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")})
         text-decoration-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -14,6 +14,7 @@
    [app.main.constants :refer [max-input-length]]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.tokens.application :as dwta]
+   [app.main.data.workspace.tokens.errors :as wte]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.data.workspace.tokens.propagation :as dwtp]
    [app.main.refs :as refs]
@@ -85,7 +86,7 @@
            action
            is-create
            selected-token-set-id
-           tokens-tree-in-selected-set
+           all-token-tree
            token-type
            make-schema
            input-component
@@ -101,13 +102,6 @@
         active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
 
-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (reset! active-tab* new-tab))))
-
         token
         (mf/with-memo [token]
           (or token {:type token-type}))
@@ -130,8 +124,8 @@
             (assoc (:name token) token)))
 
         schema
-        (mf/with-memo [tokens-tree-in-selected-set active-tab]
-          (make-schema tokens-tree-in-selected-set active-tab))
+        (mf/with-memo [all-token-tree active-tab]
+          (make-schema all-token-tree active-tab))
 
         initial
         (mf/with-memo [token]
@@ -144,6 +138,17 @@
         (fm/use-form :schema schema
                      :initial initial)
 
+        on-toggle-tab
+        (mf/use-fn
+         (mf/deps form)
+         (fn [new-tab]
+           (let [new-tab (keyword new-tab)]
+             (if (= new-tab :reference)
+               (swap! form assoc-in [:async-errors :reference]
+                      {:message "Need valid reference"})
+               (swap! form update :async-errors dissoc :reference))
+             (reset! active-tab* new-tab))))
+
         warning-name-change?
         (not= (get-in @form [:data :name])
               (:name initial))
@@ -203,7 +208,11 @@
                                             :value (:value valid-token)
                                             :description description}))
                       (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
+                      (modal/hide)))))
+             (fn [{:keys [errors]}]
+               (let [error-messages (wte/humanize-errors errors)
+                     error-message (first error-messages)]
+                 (swap! form assoc-in [:extra-errors :value] {:message error-message}))))))]
 
     [:> fc/form* {:class (stl/css :form-wrapper)
                   :form form

frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs

@@ -291,6 +291,7 @@
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]
+
        (if (= active-tab :reference)
          [:reference {:optional false} ::sm/text]
          [:reference {:optional true} [:maybe :string]])]]

frontend/src/app/plugins/shape.cljs

@@ -1185,7 +1185,6 @@
                        {:cmd :export-shapes
                         :profile-id (:profile-id @st/state)
                         :wait true
-                        :skip-children (:skip-children value false)
                         :exports [{:file-id   file-id
                                    :page-id   page-id
                                    :object-id id

frontend/src/app/util/i18n.cljs

@@ -114,7 +114,7 @@
 
 (defn- load
   [locale]
-  (let [path (str "./translation." locale ".js?version=" (:full cf/version))]
+  (let [path (str "./translation." locale ".js?version=" cf/version-tag)]
     (->> (mod/import path)
          (p/fmap (fn [result] (unchecked-get result "default")))
          (p/fnly (fn [data cause]

frontend/translations/es.po

@@ -7757,7 +7757,7 @@ msgstr "Line height (multiplicador, px o %) o {alias}"
 
 #: src/app/main/data/workspace/tokens/errors.cljs:57
 msgid "workspace.tokens.missing-references"
-msgstr "Referéncias de tokens no encontradas:"
+msgstr "Referencias de tokens no encontradas: "
 
 #: src/app/main/ui/workspace/tokens/management/token_pill.cljs:123
 msgid "workspace.tokens.more-options"

render-wasm/_build_env

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-export CURRENT_VERSION=${CURRENT_VERSION:-develop};
+export VERSION_TAG=${VERSION:-develop};
 
 if [ "$NODE_ENV" = "production" ];  then
     export BUILD_MODE="release";
@@ -81,7 +81,7 @@ function copy_artifacts {
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;
 
-    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$VERSION_TAG/g" $DEST/$BUILD_NAME.js;
 
     yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
         --log-level=error \