refactor: move admin ui

.dockerignore

@@ -10,7 +10,7 @@ vendor/
 config.yml
 coverage.out
 resource_config
-ui/dist/ui
-ui/node_modules/
-ui/.env
+web/apps/admin/dist/admin
+web/apps/admin/node_modules/
+web/apps/admin/.env
 dist/

.github/workflows/lint.yml

@@ -32,10 +32,10 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
 
-      - name: Setup pnpm 8
+      - name: Setup pnpm 9
         uses: pnpm/action-setup@v2
         with:
-          version: 8.6.9
+          version: 9.3.0
 
       - name: Setup Node.js 20.19.0
         uses: actions/setup-node@v2

.goreleaser-fast.yml

@@ -5,7 +5,7 @@ release:
 
 before:
   hooks:
-    - make ui
+    - make admin
 
 builds:
   - id: "frontier"

.goreleaser.yml

@@ -7,7 +7,7 @@ release:
 
 before:
   hooks:
-    - make ui
+    - make admin
 
 builds:
   - id: "frontier"

Dockerfile.dev

@@ -1,11 +1,11 @@
 # Build the UI
-FROM node:18-alpine3.18 as ui-builder
+FROM node:18-alpine3.18 as admin-builder
 RUN apk add --no-cache make
 WORKDIR /app
 
-COPY ui ./ui
+COPY web/apps/admin ./web/apps/admin
 COPY Makefile .
-RUN make ui
+RUN make admin
 
 # Build the Go binary
 FROM golang:1.23.1-alpine3.20 as builder
@@ -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=admin-builder /app/web/apps/admin/dist /app/web/apps/admin/dist
 
 RUN make build
 

Makefile

@@ -2,13 +2,13 @@ GOVERSION := $(shell go version | cut -d ' ' -f 3 | cut -d '.' -f 2)
 NAME=github.com/raystack/frontier
 TAG := $(shell git rev-list --tags --max-count=1)
 VERSION := $(shell git describe --tags ${TAG})
-.PHONY: build check fmt lint test test-race vet test-cover-html help install proto ui compose-up-dev
+.PHONY: build check fmt lint test test-race vet test-cover-html help install proto admin compose-up-dev
 .DEFAULT_GOAL := build
 PROTON_COMMIT := "b1687af73f994fa9612a023c850aa97c35735af8"
 
-ui:
-	@echo " > generating ui build"
-	@cd ui && $(MAKE) build
+admin:
+	@echo " > generating admin 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"

docs/docs/admin-portal.md

@@ -19,17 +19,18 @@ _Many of these features are still in development and represents an exhautive lis
 
 > Make sure you have the Frontier server up and running. For details refer [installations](./installation.md) and [configurations](./configurations.md)
 
-Change the current working directory to ui in Frontier
+Change the current working directory to the admin app in Frontier
 
 ```bash
-$ cd ui
+$ cd web/apps/admin
 ```
 
-Create a **.env** file or export **`SHILD_API_URL`** environment variable for communication with the Frontier server.
+Create a **.env** file (or export env vars) for communication with the Frontier server.
 
 ```bash title=.env
-# provide the frontier server url
-SHILD_API_URL=http://localhost:8000
+# provide the frontier server urls
+FRONTIER_API_URL=http://localhost:8000
+FRONTIER_CONNECTRPC_URL=http://localhost:8002
 ```
 
 Finally, to start the Admin portal, run the following commands:

docs/docs/contribution/development.md

@@ -24,7 +24,7 @@ make install
 Optional: build frontier admin ui
 
 ```
-make ui
+make admin
 ```
 
 Build frontier binary file

pkg/server/server.go

@@ -31,7 +31,7 @@ import (
 
 	"github.com/raystack/frontier/pkg/server/consts"
 	"github.com/raystack/frontier/pkg/server/health"
-	"github.com/raystack/frontier/ui"
+	"github.com/raystack/frontier/web/apps/admin"
 
 	connectinterceptors "github.com/raystack/frontier/pkg/server/connect_interceptors"
 	"github.com/raystack/frontier/pkg/server/interceptors"
@@ -93,7 +93,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(admin.Assets, "dist/admin", "index.html", false)
 	if err != nil {
 		logger.Warn("failed to load ui", "err", err)
 		return

web/apps/admin/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['../../tools/eslint-config'],
+};

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

@@ -1,4 +1,4 @@
-package ui
+package admin
 
 import (
 	"embed"

ui/package.json → web/apps/admin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ui",
+  "name": "admin",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -11,7 +11,7 @@
     "build:client": "node scripts/gen-swagger-client.mjs"
   },
   "dependencies": {
-    "@bufbuild/protobuf": "^2.10.0",
+    "@bufbuild/protobuf": "^2.11.0",
     "@connectrpc/connect": "^2.1.0",
     "@connectrpc/connect-query": "^2.1.1",
     "@connectrpc/connect-web": "^2.1.0",

ui/src/components/Sidebar/index.tsx → web/apps/admin/src/components/Sidebar/index.tsx

@@ -149,7 +149,7 @@ export default function IAMSidebar() {
                   leadingIcon={subItem.icon}
                   key={subItem.name}
                   active={isActive(subItem.to)}
-                  data-test-id={`admin-ui-sidebar-navigation-cell-${subItem.name}`}
+                  data-test-id={`admin-sidebar-navigation-cell-${subItem.name}`}
                   as={<Link to={subItem?.to ?? ""} />}>
                   {subItem.name}
                 </Sidebar.Item>
@@ -160,7 +160,7 @@ export default function IAMSidebar() {
               leadingIcon={nav.icon}
               key={nav.name}
               active={isActive(nav.to)}
-              data-test-id={`admin-ui-sidebar-navigation-cell-${nav.name}`}
+              data-test-id={`admin-sidebar-navigation-cell-${nav.name}`}
               as={<Link to={nav?.to ?? ""} />}>
               {nav.name}
             </Sidebar.Item>
@@ -213,12 +213,12 @@ function UserDropdown() {
       <DropdownMenu.Content>
         <DropdownMenu.Item
           onClick={toggleTheme}
-          data-test-id="admin-ui-toggle-theme">
+          data-test-id="admin-toggle-theme">
           {themeData.icon} {themeData.label}
         </DropdownMenu.Item>
         <DropdownMenu.Item
           onClick={() => logoutMutation.mutate({})}
-          data-test-id="admin-ui-logout-btn">
+          data-test-id="admin-logout-btn">
           Logout
         </DropdownMenu.Item>
       </DropdownMenu.Content>

ui/src/components/collapsable-search/index.tsx → web/apps/admin/src/components/collapsable-search/index.tsx

@@ -34,13 +34,13 @@ export const CollapsableSearch = ({
           size={size}
           onBlur={onSearchBlur}
           onChange={onChange}
-          data-test-id="admin-ui-search-input"
+          data-test-id="admin-search-input"
         />
       ) : (
         <IconButton
           size={3}
           aria-label="Search"
-          data-test-id="admin-ui-search-btn"
+          data-test-id="admin-search-btn"
           onClick={toggleSearch}
         >
           <MagnifyingGlassIcon />

ui/src/components/multiselect/index.tsx → web/apps/admin/src/components/multiselect/index.tsx

@@ -36,7 +36,7 @@ export function MultiSelect<T>({
   return (
     <Popover>
       <Popover.Trigger asChild>
-        <Button data-test-id="admin-ui-selected">
+        <Button data-test-id="admin-selected">
           {selectedValues.size} selected
         </Button>
       </Popover.Trigger>

ui/src/components/sheet/header.tsx → web/apps/admin/src/components/sheet/header.tsx

@@ -15,7 +15,7 @@ export function SheetHeader({ title, onClick }: SheetHeaderProps) {
       <Cross1Icon
         onClick={onClick}
         style={{ cursor: "pointer" }}
-        data-test-id="admin-ui-close-btn"
+        data-test-id="admin-close-btn"
       />
     </Flex>
   );

ui/src/components/states/Unauthorized.tsx → web/apps/admin/src/components/states/Unauthorized.tsx

@@ -19,7 +19,7 @@ export default function UnauthorizedState() {
         primaryAction={
           <Button
             onClick={() => logoutMutation.mutate({})}
-            data-test-id="admin-ui-unauthorized-screen-logout-btn"
+            data-test-id="admin-unauthorized-screen-logout-btn"
           >
             Logout
           </Button>

ui/src/containers/preferences.list/details.tsx → web/apps/admin/src/containers/preferences.list/details.tsx

@@ -43,7 +43,7 @@ function PreferenceValue({ value, trait, onChange }: PreferenceValueProps) {
       <Switch
         checked={checked}
         onCheckedChange={(v: boolean) => onChange(v.toString())}
-        data-test-id="admin-ui-preference-select"
+        data-test-id="admin-preference-select"
       />
     );
   } else if (
@@ -54,7 +54,7 @@ function PreferenceValue({ value, trait, onChange }: PreferenceValueProps) {
       <InputField
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        data-test-id="admin-ui-preference-value-input"
+        data-test-id="admin-preference-value-input"
       />
     );
   } else {
@@ -242,7 +242,7 @@ export default function PreferenceDetails() {
               disabled={isActionLoading || !hasChanged}
               loading={isActionLoading}
               loaderText="Saving..."
-              data-test-id="admin-ui-preference-value-save-btn"
+              data-test-id="admin-preference-value-save-btn"
             >
               Save
             </Button>

ui/src/containers/webhooks/columns.tsx → web/apps/admin/src/containers/webhooks/columns.tsx

@@ -80,7 +80,7 @@ export const getColumns: (
                       <Flex
                         style={{ padding: "12px" }}
                         gap={"small"}
-                        data-test-id="admin-ui-webhook-update-btn"
+                        data-test-id="admin-webhook-update-btn"
                         onClick={() => openEditPage(webhookId)}
                       >
                         <UpdateIcon />
@@ -91,7 +91,7 @@ export const getColumns: (
                       <Flex
                         className={styles.deleteMenuItem}
                         gap={"small"}
-                        data-test-id="admin-ui-webhook-delete-btn"
+                        data-test-id="admin-webhook-delete-btn"
                         onClick={() => enableDelete && setIsDeleteDialogOpen(true)}
                       >
                         <TrashIcon />

ui/src/containers/webhooks/create/index.tsx → web/apps/admin/src/containers/webhooks/create/index.tsx

@@ -88,7 +88,7 @@ export default function CreateWebhooks() {
             <SheetHeader
               title="Add new Webhook"
               onClick={onOpenChange}
-              data-test-id="admin-ui-add-new-webhook-btn"
+              data-test-id="admin-add-new-webhook-btn"
             />
             <Flex direction="column" gap={9} style={styles.main}>
               <CustomFieldName
@@ -124,7 +124,7 @@ export default function CreateWebhooks() {
                 <Button
                   style={{ height: "inherit" }}
                   disabled={isSubmitting}
-                  data-test-id="admin-ui-submit-btn"
+                  data-test-id="admin-submit-btn"
                   loading={isSubmitting}
                   loaderText="Adding..."
                 >

ui/src/containers/webhooks/delete/index.tsx → web/apps/admin/src/containers/webhooks/delete/index.tsx

@@ -51,7 +51,7 @@ export function DeleteWebhookDialog({
               color="neutral"
               onClick={() => onOpenChange(false)}
               disabled={deleteWebhookMutation.isPending}
-              data-test-id="admin-ui-cancel-delete-webhook"
+              data-test-id="admin-cancel-delete-webhook"
             >
               Cancel
             </Button>
@@ -61,7 +61,7 @@ export function DeleteWebhookDialog({
               onClick={handleDelete}
               loading={deleteWebhookMutation.isPending}
               loaderText="Deleting..."
-              data-test-id="admin-ui-confirm-delete-webhook"
+              data-test-id="admin-confirm-delete-webhook"
             >
               Delete
             </Button>

ui/src/containers/webhooks/header.tsx → web/apps/admin/src/containers/webhooks/header.tsx

@@ -24,7 +24,7 @@ export const WebhooksHeader = ({ header = pageHeader }: any) => {
         variant="text"
         color="neutral"
         leadingIcon={<PlusIcon />}
-        data-test-id="admin-ui-create-webhook-btn"
+        data-test-id="admin-create-webhook-btn"
         onClick={() => navigate("/webhooks/create")}
       >
         New Webhook

ui/src/containers/webhooks/update/index.tsx → web/apps/admin/src/containers/webhooks/update/index.tsx

@@ -114,7 +114,7 @@ export default function UpdateWebhooks() {
             <SheetHeader
               title="Update Webhook"
               onClick={onClose}
-              data-test-id="admin-ui-update-webhook-close-btn"
+              data-test-id="admin-update-webhook-close-btn"
             />
             <Flex
               direction="column"
@@ -163,7 +163,7 @@ export default function UpdateWebhooks() {
                 <Button
                   style={{ height: "inherit" }}
                   disabled={isSubmitting || isWebhookLoading}
-                  data-test-id="admin-ui-submit-btn"
+                  data-test-id="admin-submit-btn"
                   loading={isSubmitting}
                   loaderText="Updating..."
                 >