Installer for codegen ui

Makefile

@@ -259,6 +259,15 @@ 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: run-backend
+	@echo "Downloading OpenAPI spec from dev server"
+	yarn --cwd ${UI_DIR}  api:download
+
+.PHONY: codegen-ui
+codegen-ui: ## Generate the UI API files.
+	yarn --cwd ${UI_DIR}  api:generate
+
 .PHONY: build-ui
 build-ui: clean-ui
 	yarn --cwd ${UI_DIR} install

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/api/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

@@ -31,7 +31,7 @@ export const RequestAccessBtnFlyout = ({ application }: RequestAccessBtnFlyoutPr
     if (!application) return;
 
     const fetchUserInfo = async () => {
-      const info = await getUserInfo(application);
+      const info = await  getUserInfo(application);
       setUserInfo(info);
     };