feat: restructure frontier admin files and add config for the admin folder

.github/workflows/js-sdk.yml

@@ -13,7 +13,7 @@ jobs:
     timeout-minutes: 10
     defaults:
       run:
-        working-directory: ./sdks/js
+        working-directory: ./web
 
     steps:
       - name: Checkout 🛎️
@@ -45,19 +45,19 @@ jobs:
           cat << EOF > "$HOME/.npmrc"
             //registry.npmjs.org/:_authToken=$NPM_TOKEN
           EOF
-        working-directory: ./sdks/js/packages/core
+        working-directory: ./web/packages/core
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Bump Package Version
         run: npm run bump-version
-        working-directory: ./sdks/js/packages/core
+        working-directory: ./web/packages/core
         env:
           GIT_REFNAME: ${{ github.ref_name }}
 
       - name: Run Semantic Release 🚀
         run: npm run release:ci
-        working-directory: ./sdks/js/packages/core
+        working-directory: ./web/packages/core
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/lint.yml

@@ -27,7 +27,7 @@ jobs:
     timeout-minutes: 10
     defaults:
       run:
-        working-directory: ./sdks/js
+        working-directory: ./web
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4

.golangci.yml

@@ -31,6 +31,7 @@ linters:
       - third_party$
       - builtin$
       - examples$
+      - web/apps/admin/embed.go$
 severity:
   default: error
 formatters:

Dockerfile.dev

@@ -3,7 +3,7 @@ FROM node:18-alpine3.18 as ui-builder
 RUN apk add --no-cache make
 WORKDIR /app
 
-COPY ui ./ui
+COPY web/apps/admin ./web/apps/admin
 COPY Makefile .
 RUN make ui
 
@@ -16,7 +16,7 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
-COPY --from=ui-builder /app/ui/dist /app/ui/dist
+COPY --from=ui-builder /app/web/apps/admin/dist /app/web/apps/admin/dist
 
 RUN make build
 

Makefile

@@ -8,7 +8,7 @@ PROTON_COMMIT := "b1687af73f994fa9612a023c850aa97c35735af8"
 
 ui:
 	@echo " > generating ui build"
-	@cd ui && $(MAKE) build
+	@cd web/apps/admin && $(MAKE) build
 
 install:
 	@echo "Clean up imports..."
@@ -31,7 +31,7 @@ lint-fix:
 	golangci-lint run --fix
 
 test: ## Run tests
-	@go test -race $(shell go list ./... | grep -v /ui | grep -v /vendor/ | grep -v /test/ | grep -v /mocks | grep -v postgres/migrations | grep -v /proto) -coverprofile=coverage.out -count 2 -timeout 150s
+	@go test -race $(shell go list ./... | grep -v /web/apps/admin | grep -v /vendor/ | grep -v /test/ | grep -v /mocks | grep -v postgres/migrations | grep -v /proto) -coverprofile=coverage.out -count 2 -timeout 150s
 
 test-all: lint test e2e-test ## Run all tests
 
@@ -52,7 +52,7 @@ coverage: ## print code coverage
 	go test -race -coverprofile coverage.out -covermode=atomic ./... -tags=unit_test && go tool cover -html=coverage.out
 
 clean :
-	rm -rf ui/dist/ui
+	rm -rf web/apps/admin/dist/admin
 
 proto: ## Generate the protobuf files
 	@echo " > generating protobuf from raystack/proton"

pkg/server/server.go

@@ -29,13 +29,6 @@ import (
 
 	"google.golang.org/protobuf/encoding/protojson"
 
-	"github.com/raystack/frontier/pkg/server/consts"
-	"github.com/raystack/frontier/pkg/server/health"
-	"github.com/raystack/frontier/ui"
-
-	connectinterceptors "github.com/raystack/frontier/pkg/server/connect_interceptors"
-	"github.com/raystack/frontier/pkg/server/interceptors"
-
 	"connectrpc.com/connect"
 	connecthealth "connectrpc.com/grpchealth"
 	"connectrpc.com/grpcreflect"
@@ -53,8 +46,13 @@ import (
 	"github.com/raystack/frontier/internal/api"
 	"github.com/raystack/frontier/internal/api/v1beta1"
 	"github.com/raystack/frontier/internal/api/v1beta1connect"
+	connectinterceptors "github.com/raystack/frontier/pkg/server/connect_interceptors"
+	"github.com/raystack/frontier/pkg/server/consts"
+	"github.com/raystack/frontier/pkg/server/health"
+	"github.com/raystack/frontier/pkg/server/interceptors"
 	frontierv1beta1 "github.com/raystack/frontier/proto/v1beta1"
 	frontierv1beta1connect "github.com/raystack/frontier/proto/v1beta1/frontierv1beta1connect"
+	adminui "github.com/raystack/frontier/web/apps/admin"
 	"github.com/raystack/salt/log"
 	"github.com/raystack/salt/server/mux"
 	"go.uber.org/zap"
@@ -93,7 +91,7 @@ func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServe
 		return
 	}
 
-	spaHandler, err := spa.Handler(ui.Assets, "dist/ui", "index.html", false)
+	spaHandler, err := spa.Handler(adminui.Assets, "dist/admin", "index.html", false)
 	if err != nil {
 		logger.Warn("failed to load ui", "err", err)
 		return

ui/.gitignore → web/apps/admin/.gitignore

@@ -9,7 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist/*
-!dist/.gitkeep
+!dist/admin/.gitkeep
 *.local
 
 # Editor directories and files

web/apps/admin/Makefile

@@ -0,0 +1,12 @@
+.PHONY: dist test
+
+build: dep dist
+
+dist:
+	@pnpm run build
+
+test:
+	@pnpm run test
+
+dep:
+	@pnpm install

ui/embed.go → web/apps/admin/embed.go

@@ -1,8 +1,8 @@
-package ui
+package adminui
 
 import (
 	"embed"
 )
 
-//go:embed all:dist
+//go:embed all:dist/admin
 var Assets embed.FS

ui/src/utils/helper.ts → web/apps/admin/src/utils/helper.ts

@@ -104,7 +104,7 @@ export const exportCsvFromStream = async <T>(
     }
   }
 
-  const blob = new Blob(chunks, { type: "text/csv" });
+  const blob = new Blob(chunks as BlobPart[], { type: "text/csv" });
   downloadFile(blob, filename);
 };
 

ui/vite.config.ts → web/apps/admin/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig(() => {
   return {
     base: "/",
     build: {
-      outDir: "dist/ui",
+      outDir: "dist/admin",
     },
     server: {
       proxy: {

web/packages/core/admin/components/PageTitle.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import type { AdminConfig } from '../types';
+
+export function AdminPageTitle({
+  title,
+  appName,
+  config
+}: {
+  title?: string;
+  appName?: string;
+  config?: AdminConfig;
+}) {
+  const titleAppName = appName || config?.title || 'Frontier Admin';
+  const fullTitle = title ? `${title} | ${titleAppName}` : titleAppName;
+
+  useEffect(() => {
+    document.title = fullTitle;
+    return () => {
+      document.title = titleAppName;
+    };
+  }, [fullTitle, titleAppName]);
+
+  return null;
+}
+

web/packages/core/admin/index.ts

@@ -0,0 +1,6 @@
+import '@raystack/apsara/style.css';
+
+export type { AdminConfig, AdminLoginProps } from './types';
+export { AdminPageTitle } from './components/PageTitle';
+export { AdminLogin } from './pages/auth/Login';
+

web/packages/core/admin/pages/auth/Login.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Box, Flex, Image } from '@raystack/apsara';
+import { Header } from '../../../react/components/Header';
+import { MagicLink } from '../../../react/components/onboarding/magiclink';
+import { AdminPageTitle } from '../../components/PageTitle';
+import type { AdminLoginProps } from '../../types';
+
+export function AdminLogin({ config, logoIcon }: AdminLoginProps) {
+  return (
+    <Flex>
+      <AdminPageTitle title="Login" config={config} />
+      <Box style={{ width: '100%' }}>
+        <Flex
+          direction="column"
+          justify="center"
+          align="center"
+          style={{
+            margin: 'auto',
+            height: '100vh',
+            width: '280px'
+          }}
+        >
+          <Flex direction="column" gap={5} style={{ width: '100%' }}>
+            <Header
+              logo={
+                config?.logo ? (
+                  <Image
+                    alt="logo"
+                    src={config.logo}
+                    width={80}
+                    height={80}
+                    style={{ borderRadius: 'var(--rs-space-3)' }}
+                  />
+                ) : (
+                  logoIcon
+                )
+              }
+              title={`Login to ${config?.title || 'Frontier Admin'}`}
+            />
+            <MagicLink open />
+          </Flex>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+

web/packages/core/admin/types.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+
+export type AdminConfig = {
+  title?: string;
+  logo?: string;
+};
+
+export type AdminLoginProps = {
+  config?: AdminConfig;
+  logoIcon?: React.ReactNode;
+};
+

sdks/js/packages/core/package.json → web/packages/core/package.json

@@ -9,6 +9,7 @@
   "files": [
     "dist/**/*",
     "react/dist/**/*",
+    "admin/dist/**/*",
     "hooks/dist/**/*",
     "README.md"
   ],
@@ -50,6 +51,12 @@
       "module": "./react/dist/index.mjs",
       "require": "./react/dist/index.js"
     },
+    "./admin": {
+      "types": "./admin/dist/index.d.ts",
+      "import": "./admin/dist/index.mjs",
+      "module": "./admin/dist/index.mjs",
+      "require": "./admin/dist/index.js"
+    },
     "./hooks": {
       "types": "./hooks/dist/index.d.ts",
       "import": "./hooks/dist/index.mjs",
@@ -86,7 +93,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@bufbuild/protobuf": "^2.6.3",
+    "@bufbuild/protobuf": "^2.10.0",
     "@connectrpc/connect": "^2.0.2",
     "@connectrpc/connect-query": "^2.1.1",
     "@connectrpc/connect-web": "^2.0.2",