From 18e0948b0cd69d41a348c31834ec8d2f4b2dd893 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 7 Oct 2024 14:16:08 +0200 Subject: [PATCH 1/4] :sparkles: Add feature flag for design tokens --- backend/scripts/repl | 3 ++- backend/scripts/start-dev | 3 ++- common/src/app/common/features.cljc | 9 +++---- frontend/src/app/main/features.cljs | 2 +- frontend/src/app/main/ui/context.cljs | 3 ++- frontend/src/app/main/ui/workspace.cljs | 24 ++++++++++--------- .../src/app/main/ui/workspace/sidebar.cljs | 10 ++++---- 7 files changed, 31 insertions(+), 23 deletions(-) diff --git a/backend/scripts/repl b/backend/scripts/repl index 0debeece2..84e979707 100755 --- a/backend/scripts/repl +++ b/backend/scripts/repl @@ -28,7 +28,8 @@ export PENPOT_FLAGS="\ enable-webhooks \ enable-access-tokens \ enable-file-validation \ - enable-file-schema-validation"; + enable-file-schema-validation \ + disable-feature-design-tokens"; # Default deletion delay for devenv export PENPOT_DELETION_DELAY="24h" diff --git a/backend/scripts/start-dev b/backend/scripts/start-dev index 564151bef..e21a0530a 100755 --- a/backend/scripts/start-dev +++ b/backend/scripts/start-dev @@ -20,7 +20,8 @@ export PENPOT_FLAGS="\ enable-file-snapshot \ enable-access-tokens \ enable-file-validation \ - enable-file-schema-validation"; + enable-file-schema-validation \ + disable-feature-design-tokens"; export OPTIONS=" -A:jmx-remote -A:dev \ diff --git a/common/src/app/common/features.cljc b/common/src/app/common/features.cljc index 6e5562096..8062c8c6d 100644 --- a/common/src/app/common/features.cljc +++ b/common/src/app/common/features.cljc @@ -49,7 +49,8 @@ "components/v2" "styles/v2" "layout/grid" - "plugins/runtime"}) + "plugins/runtime" + "design-tokens/v1"}) ;; A set of features enabled by default (def default-features @@ -81,7 +82,8 @@ "fdata/pointer-map" "layout/grid" "fdata/shape-data-type" - "plugins/runtime"} + "plugins/runtime" + "design-tokens/v1"} (into frontend-only-features))) (sm/register! ::features @@ -101,6 +103,7 @@ :feature-fdata-objects-map "fdata/objects-map" :feature-fdata-pointer-map "fdata/pointer-map" :feature-plugins "plugins/runtime" + :feature-design-tokens "design-tokens/v1" nil)) (defn migrate-legacy-features @@ -308,5 +311,3 @@ :feature (first not-supported) :hint (str/ffmt "paste features '%' not enabled on the application" (str/join "," not-supported)))))) - - diff --git a/frontend/src/app/main/features.cljs b/frontend/src/app/main/features.cljs index e5a5f7c2b..5b0e9bbce 100644 --- a/frontend/src/app/main/features.cljs +++ b/frontend/src/app/main/features.cljs @@ -109,7 +109,7 @@ (watch [_ _ _] (when *assert* (->> (rx/from cfeat/no-migration-features) - (rx/filter #(not (contains? cfeat/backend-only-features %))) + (rx/filter #(not (or (contains? cfeat/backend-only-features %) (= "design-tokens/v1" %)))) (rx/observe-on :async) (rx/map enable-feature)))) diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index 1aa4b532b..6c57ef948 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -24,10 +24,11 @@ (def libraries (mf/create-context nil)) (def components-v2 (mf/create-context nil)) +(def design-tokens (mf/create-context nil)) (def current-scroll (mf/create-context nil)) (def current-zoom (mf/create-context nil)) (def workspace-read-only? (mf/create-context nil)) (def is-component? (mf/create-context false)) -(def sidebar (mf/create-context nil)) +(def sidebar (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index ed261c297..b6fcb3ae6 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -176,6 +176,7 @@ file-ready? (mf/deref file-ready*) components-v2? (features/use-feature "components/v2") + design-tokens? (features/use-feature "design-tokens/v1") background-color (:background-color wglobal)] @@ -204,15 +205,16 @@ [:& (mf/provider ctx/current-team-id) {:value team-id} [:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/components-v2) {:value components-v2?} - [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} - [:section {:class (stl/css :workspace) - :style {:background-color background-color - :touch-action "none"}} - [:& context-menu] + [:& (mf/provider ctx/design-tokens) {:value design-tokens?} + [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} + [:section {:class (stl/css :workspace) + :style {:background-color background-color + :touch-action "none"}} + [:& context-menu] - (if ^boolean file-ready? - [:& workspace-page {:page-id page-id - :file file - :wglobal wglobal - :layout layout}] - [:& workspace-loader])]]]]]]])) + (if ^boolean file-ready? + [:& workspace-page {:page-id page-id + :file file + :wglobal wglobal + :layout layout}] + [:& workspace-loader])]]]]]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index a9379951c..17e03fb2f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -12,7 +12,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.tab-container :refer [tab-container tab-element]] - [app.main.ui.context :as muc] + [app.main.ui.context :as ctx] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.comments :refer [comments-sidebar]] [app.main.ui.workspace.left-header :refer [left-header]] @@ -40,6 +40,7 @@ mode-inspect? (= options-mode :inspect) project (mf/deref refs/workspace-project) + design-tokens? (mf/use-ctx ctx/design-tokens) section (cond (or mode-inspect? (contains? layout :layers)) :layers (contains? layout :assets) :assets @@ -64,7 +65,7 @@ on-tab-change (mf/use-fn #(st/emit! (dw/go-to-layout %)))] - [:& (mf/provider muc/sidebar) {:value :left} + [:& (mf/provider ctx/sidebar) {:value :left} [:aside {:ref parent-ref :id "left-sidebar-aside" :data-testid "left-sidebar" @@ -122,7 +123,8 @@ :title (tr "workspace.toolbar.assets")} [:& assets-toolbox {:size (- size 58)}]]) - (when-not ^boolean mode-inspect? + (when (and (not ^boolean mode-inspect?) + design-tokens?) [:& tab-element {:id :tokens :title "Tokens"} [:& tokens-sidebar-tab]])]])]])) @@ -170,7 +172,7 @@ :on-change-section handle-change-section :on-expand handle-expand)] - [:& (mf/provider muc/sidebar) {:value :right} + [:& (mf/provider ctx/sidebar) {:value :right} [:aside {:class (stl/css-case :right-settings-bar true :not-expand (not can-be-expanded?) :expanded (> size 276)) From b0ec9034dc721e9ff325f362c199f0686b84f64b Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 9 Oct 2024 10:09:45 +0200 Subject: [PATCH 2/4] Enable FF for gimlet --- .gimlet/k8s/penpot/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gimlet/k8s/penpot/values.yaml b/.gimlet/k8s/penpot/values.yaml index 0111bb10f..9f2522a12 100644 --- a/.gimlet/k8s/penpot/values.yaml +++ b/.gimlet/k8s/penpot/values.yaml @@ -278,7 +278,7 @@ config: ## @param config.apiSecretKey A random secret key needed for persistent user sessions. Generate with `openssl rand -hex 16` for example. ## publicURI: "http://localhost:8080" - flags: "enable-registration enable-login disable-demo-users disable-demo-warning" + flags: "enable-registration enable-login disable-demo-users disable-demo-warning enable-feature-design-tokens" apiSecretKey: "b46a12cb4bedc6b9df8cb3f18c708b65" ## @param config.postgresql.host The PostgreSQL host to connect to. From 11c8fa468fc3306b9f64bddc4e941c2f6315d814 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 9 Oct 2024 10:30:59 +0200 Subject: [PATCH 3/4] Manually override ff flags --- .gimlet/penpot-pr.yaml | 2 +- .gimlet/penpot-prod.yaml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.gimlet/penpot-pr.yaml b/.gimlet/penpot-pr.yaml index ec96eb3cd..f44109369 100644 --- a/.gimlet/penpot-pr.yaml +++ b/.gimlet/penpot-pr.yaml @@ -37,7 +37,7 @@ values: secretKeys: accessKeyIDKey: CONSOLE_ACCESS_KEY secretAccessKey: CONSOLE_SECRET_KEY - flags: 'enable-smtp' + flags: 'enable-smtp enable-feature-design-tokens' smtp: enabled: true host: mailslurper diff --git a/.gimlet/penpot-prod.yaml b/.gimlet/penpot-prod.yaml index 5431b4699..8b09c022d 100644 --- a/.gimlet/penpot-prod.yaml +++ b/.gimlet/penpot-prod.yaml @@ -19,7 +19,7 @@ values: secret: db-penpot-secrets superUser: db-penpot-superuser-secret config: - flags: 'enable-smtp' + flags: 'enable-smtp enable-feature-design-tokens' assets: storageBackend: assets-s3 s3: @@ -72,4 +72,4 @@ values: tls: - secretName: tls-penpot hosts: - - penpot.tokens.studio \ No newline at end of file + - penpot.tokens.studio From 07beef5727767b7cc553c967244c74f7cb3971fe Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 9 Oct 2024 11:00:51 +0200 Subject: [PATCH 4/4] Remove $PENPOT_FLAGS from frontend deployment --- .gimlet/k8s/penpot/templates/frontend/deployment.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gimlet/k8s/penpot/templates/frontend/deployment.yaml b/.gimlet/k8s/penpot/templates/frontend/deployment.yaml index f38f7a14a..fbe3b7996 100644 --- a/.gimlet/k8s/penpot/templates/frontend/deployment.yaml +++ b/.gimlet/k8s/penpot/templates/frontend/deployment.yaml @@ -31,7 +31,7 @@ spec: - name: PENPOT_PUBLIC_URI value: {{ .Values.config.publicURI | quote }} - name: PENPOT_FLAGS - value: "$PENPOT_FLAGS {{ .Values.config.flags }}" + value: "{{ .Values.config.flags }}" - name: PENPOT_SECRET_KEY value: {{ .Values.config.apiSecretKey | quote }} - name: PENPOT_DATABASE_URI