Installer for codegen ui

Makefile

@@ -11,10 +11,14 @@ endif
 
 GIT_TAG:=$(if $(GIT_TAG),$(GIT_TAG),$(shell if [ -z "`git status --porcelain`" ]; then git describe --exact-match --tags HEAD 2>/dev/null; fi))
 
-
+# setting the appropriate environment variables before running make.
 # docker image publishing options
 IMAGE_NAMESPACE?=argoproj-labs
-IMAGE_NAME=${IMAGE_NAMESPACE}/argocd-ephemeral-access
+IMAGE_NAME?=${IMAGE_NAMESPACE}/argocd-ephemeral-access
+EPHEMERAL_BACKEND_NAMESPACE?=default
+EPHEMERAL_CONTROLLER_PORT?=8889
+EPHEMERAL_METRICS_ADDR?=:9999
+EPHEMERAL_BACKEND_DEFAULT_ACCESS_DURATION?=1m
 
 ifneq (${GIT_TAG},)
 IMAGE_TAG=${GIT_TAG}
@@ -259,8 +263,21 @@ generate-mocks: mockery ## Generate the mocks for the project as configured in .
 clean-ui:
 	find ${UI_DIR} -type f -name extension.tar -delete
 
+.PHONY: codegen-download-openapi
+codegen-download-openapi:  build goreman  ## Download the OpenAPI spec from the local server.
+	@echo "Starting the backend server"
+	goreman start backend &
+	sleep 5
+	@echo "Downloading OpenAPI spec from dev server"
+	yarn --cwd ${UI_DIR} api:download
+	killall goreman || true
+
+.PHONY: codegen-ui
+codegen-ui: ## Generate the UI API files.
+	yarn --cwd ${UI_DIR}  api:generate
+
 .PHONY: build-ui
-build-ui: clean-ui
+build-ui: clean-ui codegen-ui
 	yarn --cwd ${UI_DIR} install
 	yarn --cwd ${UI_DIR} build
 

ui/orval.config.ts

@@ -0,0 +1,9 @@
+module.exports = {
+  main: {
+    input: "./src/gen/schema.yaml",
+    output: {
+      target: "./src/gen/ephemeral-access-api.ts",
+      prettier: true,
+    },
+  },
+};

ui/package.json

@@ -7,17 +7,17 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@react-buddy/ide-toolbox": "^2.4.0",
-    "@react-buddy/palette-antd": "^5.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "react-router-dom": "^6.26.2",
+    "react-toastify": "9.0.3",
     "antd": "^5.20.0",
     "classnames": "^2.5.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.33",
-    "react-moment": "^0.9.7",
-    "react-router-dom": "^6.25.1",
+    "react-moment": "^1.1.3",
     "react-hot-loader": "^3.1.3",
-    "@tanstack/react-query": "4.36.1",
-    "@tanstack/react-query-devtools": "^5.59.0",
     "axios": "1.6.2"
   },
   "peerDependencies": {
@@ -27,7 +27,9 @@
   },
   "scripts": {
     "start": "webpack --config ./webpack.config.js --watch",
-    "build": "webpack --config ./webpack.config.js && tar -C dist -cvf extension.tar resources"
+    "build": "webpack --config ./webpack.config.js && tar -C dist -cvf extension.tar resources",
+    "api:download": "curl http://localhost:8888/openapi.yaml -o ./src/gen/schema.yaml",
+    "api:generate": "orval"
   },
   "eslintConfig": {
     "extends": [
@@ -47,12 +49,11 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^16.9.3",
-    "@types/react-dom": "^16.9.3",
-    "@types/react-helmet": "^6.1.0",
+    "argo-ui": "git+https://github.com/argoproj/argo-ui.git",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.1.8",
     "@types/styled-components": "^5.1.25",
-    "argo-ui": "git+https://github.com/argoproj/argo-ui.git",
     "babel-preset-react": "^6.24.1",
     "esbuild-loader": "^3.0.1",
     "portable-fetch": "^3.0.0",
@@ -67,12 +68,14 @@
     "typescript": "^4.3.5",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^4.7.2",
+    "orval": "v7.1.1"
   },
   "resolutions": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.26",
-    "react-toastify": "9.0.8"
+    "react-toastify": "9.0.3"
+  },
+  "engines": {
+    "node": ">=16.0.0"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

ui/src/component/ephemeral-access-details.tsx

@@ -14,7 +14,7 @@ import {
   createAccessrequest,
   CreateAccessRequestBody,
   listAccessrequest
-} from '../gen/ephemeralAccessAPI';
+} from '../gen/ephemeral-access-api';
 import { getHeaders } from '../config/client';
 
 interface AccessDetailsComponentProps {

ui/src/component/ephemeral-access-panel.tsx

@@ -4,7 +4,7 @@ import { Application } from '../models/type';
 import { ARGO_GRAY6_COLOR } from '../shared/colors';
 import { HelpIcon } from 'argo-ui/src/components/help-icon/help-icon';
 import { AccessPanel, EnableEphemeralAccess } from '../utils/utils';
-import { AccessRequestResponseBody } from '../gen/ephemeralAccessAPI';
+import { AccessRequestResponseBody } from '../gen/ephemeral-access-api';
 import { getDisplayTime } from '../utils/utils';
 const DisplayAccessPermission: React.FC<{ application: Application }> = ({ application }) => {
   const [accessRequest, setAccessRequest] = useState<AccessRequestResponseBody | null>(null);

ui/src/ephemeral-access.tsx

@@ -4,8 +4,6 @@ import { getUserInfo } from './config/client';
 import { Application, UserInfo } from './models/type';
 import { EnableEphemeralAccess } from './utils/utils';
 
-
-
 export const RequestAccessBtn = () => {
   return (
     <div qe-id='ext-access'>
@@ -38,5 +36,7 @@ export const RequestAccessBtnFlyout = ({ application }: RequestAccessBtnFlyoutPr
     fetchUserInfo();
   }, [application]);
 
-  return <>{userInfo && <EphemeralAccessDetails application={application} userInfo={userInfo} />}</>;
+  return (
+    <>{userInfo && <EphemeralAccessDetails application={application} userInfo={userInfo} />}</>
+  );
 };