🔧 Deploy penpot api documentation

.github/workflows/plugins-deploy-api-doc.yml

@@ -0,0 +1,73 @@
+name: Plugins/api-doc deployer
+
+on:
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+    paths:
+      - "plugins/**"
+      - ".github/workflows/deploy-plugin-docs.yml"
+      - "wrangle-penpot-plugins-api-doc.toml"
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch or ref'
+        type: string
+        required: true
+        default: 'develop'
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugins
+    steps:
+      - name: Extract some useful variables
+        id: vars
+        run: |
+          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ steps.vars.outputs.gh_ref }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: "pnpm"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build docs
+        run: pnpm run build:doc
+
+      - name: Select Worker name
+        run: |
+          REF="${{ steps.vars.outputs.gh_ref }}"
+          case "$REF" in
+            main) echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV ;;
+            staging) echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV ;;
+            develop) echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV ;;
+            *) echo "Unsupported branch ${REF}" && exit 1 ;;
+          esac
+
+      - name: Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy --config wrangle-penpot-plugins-api-doc.toml --name ${{ env.WORKER_NAME }}

CHANGES.md

@@ -25,7 +25,6 @@
 - Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
 - Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
 - Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
-- Fix displaying a hidden user avatar when there is only one more [Taiga #13058](https://tree.taiga.io/project/penpot/issue/13058)
 
 ## 2.13.0 (Unreleased)
 

frontend/playwright/data/workspace/ws-notifications.js

@@ -5,19 +5,3 @@ export const presenceFixture = {
   "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
   "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
 };
-
-export const joinFixture2 = {
-  "~:type": "~:join-file",
-  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
-  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942e",
-  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
-  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
-};
-
-export const joinFixture3 = {
-  "~:type": "~:join-file",
-  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
-  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942f",
-  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
-  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
-};

frontend/playwright/ui/specs/workspace.spec.js

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WorkspacePage } from "../pages/WorkspacePage";
-import { presenceFixture, joinFixture2, joinFixture3 } from "../../data/workspace/ws-notifications";
+import { presenceFixture } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
@@ -40,28 +40,6 @@ test("User receives presence notifications updates in the workspace", async ({
   ).toHaveCount(2);
 });
 
-test("BUG 13058 - Presence list shows up to 3 user avatars", async ({
-  page,
-}) => {
-  const workspacePage = new WorkspacePage(page);
-  await workspacePage.setupEmptyFile();
-
-  await workspacePage.goToWorkspace();
-  await workspacePage.sendPresenceMessage(presenceFixture);
-  await workspacePage.sendPresenceMessage(joinFixture2);
-
-  await expect(
-    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
-  ).toHaveCount(3);
-
-  await workspacePage.sendPresenceMessage(joinFixture3);
-  await expect(
-    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
-  ).toHaveCount(2);
-
-  await expect(page.getByTestId("active-users-list").getByText("+2")).toBeVisible();
-});
-
 test("User draws a rect", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -700,6 +700,19 @@
   background-color: var(--menu-shortcut-background-color);
 }
 
+.user-icon {
+  @include flexCenter;
+  @include bodySmallTypography;
+  height: $s-24;
+  width: $s-24;
+  border-radius: $br-circle;
+  margin-left: calc(-1 * $s-4);
+  img {
+    border-radius: $br-circle;
+    border: $s-2 solid var(--user-count-foreground-color);
+  }
+}
+
 .mixed-bar {
   @include bodySmallTypography;
   display: flex;

frontend/src/app/main/ui/workspace/presence.cljs

@@ -22,7 +22,7 @@
   (let [profile       (assoc profile :color color)
         full-name     (:fullname profile)]
     [:li {:class (stl/css :session-icon)
-          :style {:z-index (dm/str (+ 2 (* -1 index)))
+          :style {:z-index (dm/str (+ 1 (* -1 index)))
                   :background-color color}
           :title full-name}
      [:img {:alt full-name
@@ -37,11 +37,9 @@
 
         sessions     (vals presence)
         num-sessions (count sessions)
-        max-avatar-count 3
-        avatar-count (if (= num-sessions max-avatar-count) max-avatar-count (- max-avatar-count 1))
 
         open*        (mf/use-state false)
-        open?        (and ^boolean (deref open*) (> num-sessions max-avatar-count))
+        open?        (and ^boolean (deref open*) (> num-sessions 2))
         on-open
         (mf/use-fn
          (fn []
@@ -69,10 +67,10 @@
      [:button {:class (stl/css-case :active-users true)
                :on-click on-open}
       [:ul {:class (stl/css :active-users-list) :data-testid "active-users-list"}
-       (when (> num-sessions max-avatar-count)
-         [:li {:class (stl/css :users-num)} (dm/str "+" (+ 1 (- num-sessions max-avatar-count)))])
+       (when (> num-sessions 2)
+         [:span {:class (stl/css :users-num)} (dm/str "+" (- num-sessions 2))])
 
-       (for [[index session] (d/enumerate (take avatar-count sessions))]
+       (for [[index session] (d/enumerate (take 2 sessions))]
          [:& session-widget
           {:color (:color session)
            :index index

frontend/src/app/main/ui/workspace/presence.scss

@@ -4,71 +4,50 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "ds/typography.scss" as t;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .active-users,
 .active-users-opened {
-  background: none;
-  cursor: pointer;
-
+  @include deprecated.buttonStyle;
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-end;
   align-items: center;
   margin: 0;
-  padding: 0 var(--sp-xs);
-  border: none;
-  border-radius: $br-8;
-}
+  padding: 0 deprecated.$s-4;
+  border-radius: deprecated.$br-8;
+  .active-users-list {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    margin: 0;
 
-.active-users-list {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  margin: 0;
-  gap: var(--user-list-gap, 0);
-}
-
-%user-icon {
-  @include t.use-typography("body-small");
-  display: grid;
-  place-content: center;
-  height: $sz-24;
-  width: $sz-24;
-  border-radius: $br-circle;
-  margin-inline-start: calc(-1 * var(--sp-xs));
-
-  img {
-    border-radius: $br-circle;
-    border: $b-2 solid var(--user-count-foreground-color);
+    .users-num {
+      @extend .user-icon;
+      background-color: var(--user-count-background-color);
+      color: var(--user-count-foreground-color);
+      z-index: deprecated.$z-index-2;
+      border: deprecated.$s-2 solid var(--user-count-foreground-color);
+    }
+    .session-icon {
+      @extend .user-icon;
+    }
   }
 }
 
-.users-num {
-  @extend %user-icon;
-  background-color: var(--user-count-background-color);
-  color: var(--user-count-foreground-color);
-  z-index: 3; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
-  border: $b-2 solid var(--user-count-foreground-color);
-  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
-}
-
-.session-icon {
-  @extend %user-icon;
-  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
-}
-
 .active-users-opened {
   position: absolute;
-  right: calc(-1 * var(--sp-xxs));
-  top: calc(-1 * var(--sp-xxs));
-  padding: var(--sp-s);
-  margin: calc(-1 * var(--sp-xxs)) calc(-1 * var(--sp-xs)) 0 0;
+  right: calc(-1 * deprecated.$s-2);
+  top: calc(-1 * deprecated.$s-2);
+  padding: deprecated.$s-8;
+  margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0;
   background-color: var(--menu-background-color);
-  z-index: 4; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
-
-  --user-list-gap: var(--sp-xs);
-  --user-list-inline-margin: 0;
+  z-index: deprecated.$z-index-4;
+  .active-users-list {
+    gap: deprecated.$s-4;
+    .users-num,
+    .session-icon {
+      margin-left: 0;
+    }
+  }
 }

plugins/wrangle-penpot-plugins-api-doc.toml

@@ -0,0 +1,4 @@
+name = "penpot-plugins-api-doc"
+compatibility_date = "2025-01-01"
+
+assets = { directory = "dist/doc" }