feat: replace navbar with the Stacklet design-system sidebar [ENG-8179]

.github/workflows/stacklet-image.yml

@@ -89,6 +89,19 @@ jobs:
             echo "skip=false" >> "$GITHUB_OUTPUT"
           fi
 
+      # The frontend build resolves @stacklet/ui from Stacklet's private
+      # CodeArtifact npm repository; mint a short-lived token and hand it to
+      # the Docker build as a BuildKit secret (consumed by the npm ci layer).
+      - name: Mint CodeArtifact token
+        if: steps.exists.outputs.skip == 'false'
+        run: |
+          aws codeartifact get-authorization-token \
+            --domain stacklet \
+            --domain-owner 653993915282 \
+            --region us-east-1 \
+            --query authorizationToken \
+            --output text > /tmp/codeartifact-token
+
       - name: Set up QEMU
         if: steps.exists.outputs.skip == 'false'
         uses: docker/setup-qemu-action@06116385d9baf250c9f4dcb4858b16962ea869c3 # v4.1.0
@@ -110,6 +123,8 @@ jobs:
           build-args: |
             SUPERSET_VERSION=${{ steps.meta.outputs.version }}
             SUPERSET_GIT_SHA=${{ steps.src.outputs.sha }}
+          secret-files: |
+            codeartifact_token=/tmp/codeartifact-token
           labels: |
             org.opencontainers.image.source=https://github.com/stacklet/superset
             org.opencontainers.image.revision=${{ steps.src.outputs.sha }}

Dockerfile

@@ -42,6 +42,12 @@ ARG NPM_BUILD_CMD="build"
 # Install system dependencies required for node-gyp
 RUN /app/docker/apt-install.sh build-essential python3 zstd
 
+# @stacklet/ui ships a `preinstall: pnpm dlx only-allow pnpm` guard that npm
+# executes during `npm ci`; it needs a pnpm binary on PATH (and passes when
+# launched through pnpm dlx). Drop this once the package's preinstall no
+# longer invokes pnpm.
+RUN npm install -g pnpm@10
+
 # Define environment variables for frontend build
 ENV BUILD_CMD=${NPM_BUILD_CMD} \
     PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
@@ -60,12 +66,22 @@ RUN mkdir -p /app/superset/static/assets \
 # ideally we'd COPY only their package.json. Here npm ci will be cached as long
 # as the full content of these folders don't change, yielding a decent cache reuse rate.
 # Note that it's not possible to selectively COPY or mount using blobs.
+# The @stacklet scope resolves against Stacklet's private CodeArtifact
+# repository (see superset-frontend/.npmrc); CI passes a short-lived token
+# via the codeartifact_token BuildKit secret. The token is written to the
+# root user's npmrc only for the duration of this layer.
 RUN --mount=type=bind,source=./superset-frontend/package.json,target=./package.json \
     --mount=type=bind,source=./superset-frontend/package-lock.json,target=./package-lock.json \
+    --mount=type=bind,source=./superset-frontend/.npmrc,target=./.npmrc \
+    --mount=type=secret,id=codeartifact_token \
     --mount=type=cache,target=/root/.cache \
     --mount=type=cache,target=/root/.npm \
     if [ "${DEV_MODE}" = "false" ]; then \
+        if [ -s /run/secrets/codeartifact_token ]; then \
+            echo "//stacklet-653993915282.d.codeartifact.us-east-1.amazonaws.com/npm/stacklet.client.ui/:_authToken=$(cat /run/secrets/codeartifact_token)" > /root/.npmrc; \
+        fi; \
         npm ci; \
+        rm -f /root/.npmrc; \
     else \
         echo "Skipping 'npm ci' in dev mode"; \
     fi

README.md

@@ -17,6 +17,51 @@ specific language governing permissions and limitations
 under the License.
 -->
 
+# Stacklet fork — local development
+
+This is Stacklet's fork of Apache Superset (branded **AssetDB**). It replaces
+the upstream navigation with the Stacklet design-system sidebar, consumed
+from the private `@stacklet/ui` package. To run it locally you need Docker,
+Node 22, and AWS credentials with access to the `stacklet.client.ui`
+CodeArtifact repository.
+
+**1. Install frontend dependencies**
+
+```bash
+cd superset-frontend
+npm run auth        # logs npm into CodeArtifact; tokens expire after ~12h
+npx -y npm@10 ci    # use npm 10 — the lockfile does not resolve under npm 11
+```
+
+If installs start failing with 401/403 on `@stacklet/*` packages, the
+CodeArtifact token has expired — rerun `npm run auth`.
+
+**2. Start the backend** (from the repo root)
+
+```bash
+echo "SUPERSET_LOAD_EXAMPLES=no" >> docker/.env-local   # optional: much faster first start
+TAG=6.1.0rc3 docker compose -f docker-compose-image-tag.yml up -d db redis superset superset-init
+```
+
+Use the `TAG` matching the upstream release this fork is based on. Once
+`superset-init` finishes, the backend answers on http://localhost:8088
+(login `admin` / `admin`).
+
+**3. Start the frontend dev server**
+
+```bash
+cd superset-frontend
+npm run dev-server -- --port 9001
+```
+
+Then open http://localhost:9001. The dev server proxies API calls to the
+backend on :8088 and hot-reloads frontend changes. Port 9001 is a
+suggestion — the default 9000 is often held by a Docker port-forward.
+
+The Stacklet-specific frontend code lives in `superset-frontend/src/stacklet/`.
+
+---
+
 # Superset
 
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/license/apache-2-0)

superset-frontend/.npmrc

@@ -0,0 +1,17 @@
+# Route only the @stacklet scope through Stacklet's private CodeArtifact
+# repository; everything else comes from the public registry regardless of
+# developer-global .npmrc defaults (aws codeartifact login rewrites ~/.npmrc
+# to point the DEFAULT registry at CodeArtifact, which would otherwise make
+# every package fetch depend on a fresh AWS session).
+#
+# Auth: run `npm run auth` (same flow as the sinistral/platform-ui repos) —
+# it stores a CodeArtifact token for this host in your user-level ~/.npmrc,
+# which npm merges with this file.
+registry=https://registry.npmjs.org/
+@stacklet:registry=https://stacklet-653993915282.d.codeartifact.us-east-1.amazonaws.com/npm/stacklet.client.ui/
+
+# Note: @stacklet/ui declares peers for its legacy v1/MUI components (React
+# 19, MUI 7, ...) that Superset (React 17) cannot satisfy; the `overrides`
+# block in package.json pins the conflicting edges instead of disabling peer
+# resolution globally (upstream relies on npm auto-installing its root
+# peerDependencies, e.g. react-ace).

superset-frontend/jest.config.js

@@ -22,6 +22,10 @@ module.exports = {
   testRegex:
     '\\/superset-frontend\\/(spec|src|plugins|packages|tools)\\/.*(_spec|\\.test)\\.[jt]sx?$',
   moduleNameMapper: {
+    // the prebuilt @stacklet/ui package and font packages are ESM/CSS-only
+    '^@stacklet/ui(/.*)?$':
+      '<rootDir>/src/stacklet/__mocks__/stackletUiMock.tsx',
+    '^@fontsource.*$': '<rootDir>/spec/__mocks__/mockExportObject.js',
     '\\.(css|less|geojson)$': '<rootDir>/spec/__mocks__/mockExportObject.js',
     '\\.(gif|ttf|eot|png|jpg)$': '<rootDir>/spec/__mocks__/mockExportString.js',
     '\\.svg$': '<rootDir>/spec/__mocks__/svgrMock.tsx',