feat: add step to workflow to publish docker image to docker registry

.github/workflows/release.yaml

@@ -35,4 +35,22 @@ jobs:
           REPO_OWNER: "Local-Connectivity-Lab"
           REPO_NAME: "ccn-coverage-docker"
           TARGET_ARTIFACT_NAME: "ccn-coverage-vis"
-        run: npx semantic-release
+        run: npx semantic-release
+
+      - name: Get version
+        id: get_version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
+          echo "Released version: $VERSION"
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: icr.infra.seattlecommunitynetwork.org
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and publish Docker image
+        run: |
+          make publish VERSION=${{ steps.get_version.outputs.VERSION }}

Makefile

@@ -37,6 +37,16 @@ build-%: validate-semver-%
 	@echo "Create docker container for $(VIS_DOCKER_IMAGE_NAME) with version $*"
 	docker build -t $(VIS_DOCKER_IMAGE_NAME):$* -f vis.dockerfile .
 
+# Publish to Docker registry (e.g., make publish VERSION=1.2.3)
+.PHONY: publish
+publish: validate-semver-$(VERSION)
+	@echo "Building and publishing $(VIS_DOCKER_IMAGE_NAME):$(VERSION)"
+	docker build -t $(VIS_DOCKER_IMAGE_NAME):$(VERSION) -f vis.dockerfile .
+	docker tag $(VIS_DOCKER_IMAGE_NAME):$(VERSION) icr.infra.seattlecommunitynetwork.org/$(VIS_DOCKER_IMAGE_NAME):$(VERSION)
+	docker tag $(VIS_DOCKER_IMAGE_NAME):$(VERSION) icr.infra.seattlecommunitynetwork.org/$(VIS_DOCKER_IMAGE_NAME):latest
+	docker push icr.infra.seattlecommunitynetwork.org/$(VIS_DOCKER_IMAGE_NAME):$(VERSION)
+	docker push icr.infra.seattlecommunitynetwork.org/$(VIS_DOCKER_IMAGE_NAME):latest
+	@echo "Successfully published $(VIS_DOCKER_IMAGE_NAME):$(VERSION) to registry"
 
 # The target for development
 .PHONY: dev
@@ -45,4 +55,5 @@ dev:
 		-v $(CURRENT_DIR):/app \
 		-w /app \
 		-p $(EXPOSED_PORT):$(EXPOSED_PORT) \
+		--network ccn-coverage-api_coverage-app-network \
 		$(DOCKER_IMAGE) /bin/bash

package.json

@@ -23,6 +23,7 @@
     "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-pick-color": "^2.0.0",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
     "react-select": "^5.10.1",

src/ListItems.tsx

@@ -7,6 +7,7 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import SyncIcon from '@mui/icons-material/Sync';
 import HomeIcon from '@mui/icons-material/Home';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
+import EditIcon from '@mui/icons-material/Edit';
 import { ListItemButton } from '@mui/material';
 
 export const mainListItems = (
@@ -18,7 +19,7 @@ export const mainListItems = (
       </ListItemIcon>
       <ListItemText primary='Manage users' />
     </ListItemButton>
-    <ListItemButton onClick={() => window.open('/admin/edit-site', '_self')}>
+    <ListItemButton onClick={() => window.open('/admin/list-sites', '_self')}>
       <ListItemIcon>
         <EditLocationAltIcon />
       </ListItemIcon>

src/admin/AdminBody.tsx

@@ -1,6 +1,8 @@
 import UserPage from './UserPage';
 import EditSite from './EditSite';
 import EditData from './EditData';
+import ListSites from './ListSites';
+import CreateEditSite from './CreateEditSite';
 
 interface AdminBodyProps {
   page: AdminPage;
@@ -14,6 +16,12 @@ export default function AdminBody(props: AdminBodyProps) {
       return <EditSite />;
     case 'edit-data':
       return <EditData />;
+    case 'list-sites':
+      return <ListSites />;
+    case 'create-site':
+      return <CreateEditSite mode='create' />;
+    case 'new-edit-site':
+      return <CreateEditSite mode='edit' />;
     default:
       return <h1>Error</h1>;
   }