chores(ui): codegen ui

Signed-off-by: ashutosh16 <[email protected]>
argoproj-labs · Nov 6, 2024 · 1823b6b · 1823b6b
1 parent 0fc0a30
commit 1823b6b
Show file tree

Hide file tree

Showing 9 changed files with 2,813 additions and 681 deletions.
diff --git a/Makefile b/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

diff --git a/ui/package.json b/ui/package.json
@@ -7,18 +7,20 @@
     "@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"
+    "axios": "1.6.2",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.59.0"
   },
   "peerDependencies": {
     "moment": "^2.29.4",
@@ -27,7 +29,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 +51,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 +70,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": "^6.31.0"
   },
   "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"
 }
diff --git a/ui/src/component/ephemeral-access-details.tsx b/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 {

diff --git a/ui/src/component/ephemeral-access-panel.tsx b/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);

diff --git a/ui/src/ephemeral-access.tsx b/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);
     };
 

diff --git a/ui/src/gen/ephemeralAccessAPI.ts → ui/src/gen/ephemeral-access-api.ts b/ui/src/gen/ephemeralAccessAPI.ts → ui/src/gen/ephemeral-access-api.ts
@@ -1,46 +1,38 @@
 /**
- * Generated by orval v7.1.1 🍺
+ * Generated by orval v6.31.0 🍺
  * Do not edit manually.
  * Ephemeral Access API
  * OpenAPI spec version: 0.0.1
  */
-import axios from 'axios'
-import type {
-  AxiosRequestConfig,
-  AxiosResponse
-} from 'axios'
+import axios from 'axios';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 // https://stackoverflow.com/questions/49579094/typescript-conditional-types-filter-out-readonly-properties-pick-only-requir/49579497#49579497
-type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends <
-T,
->() => T extends Y ? 1 : 2
-? A
-: B;
+type IfEquals<X, Y, A = X, B = never> =
+  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
 
 type WritableKeys<T> = {
-[P in keyof T]-?: IfEquals<
-  { [Q in P]: T[P] },
-  { -readonly [Q in P]: T[P] },
-  P
->;
+  [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P>;
 }[keyof T];
 
-type UnionToIntersection<U> =
-  (U extends any ? (k: U)=>void : never) extends ((k: infer I)=>void) ? I : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+  ? I
+  : never;
 type DistributeReadOnlyOverUnions<T> = T extends any ? NonReadonly<T> : never;
 
 type Writable<T> = Pick<T, WritableKeys<T>>;
-type NonReadonly<T> = [T] extends [UnionToIntersection<T>] ? {
-  [P in keyof Writable<T>]: T[P] extends object
-    ? NonReadonly<NonNullable<T[P]>>
-    : T[P];
-} : DistributeReadOnlyOverUnions<T>;
+type NonReadonly<T> = [T] extends [UnionToIntersection<T>]
+  ? {
+      [P in keyof Writable<T>]: T[P] extends object ? NonReadonly<NonNullable<T[P]>> : T[P];
+    }
+  : DistributeReadOnlyOverUnions<T>;
+
+export type ListAccessRequestResponseBodyItems = AccessRequestResponseBody[] | null;
 
 export interface ListAccessRequestResponseBody {
   /** A URL to the JSON Schema for this object. */
   readonly $schema?: string;
-  /** @nullable */
-  items: AccessRequestResponseBody[] | null;
+  items: ListAccessRequestResponseBodyItems;
 }
 
 export interface ErrorDetail {
@@ -52,16 +44,18 @@ export interface ErrorDetail {
   value?: unknown;
 }
 
+/**
+ * Optional list of individual error details
+ */
+export type ErrorModelErrors = ErrorDetail[] | null;
+
 export interface ErrorModel {
   /** A URL to the JSON Schema for this object. */
   readonly $schema?: string;
   /** A human-readable explanation specific to this occurrence of the problem. */
   detail?: string;
-  /**
-   * Optional list of individual error details
-   * @nullable
-   */
-  errors?: ErrorDetail[] | null;
+  /** Optional list of individual error details */
+  errors?: ErrorModelErrors;
   /** A URI reference that identifies the specific occurrence of the problem. */
   instance?: string;
   /** HTTP status code */
@@ -82,16 +76,16 @@ export interface CreateAccessRequestBody {
 /**
  * The current access request status.
  */
-export type AccessRequestResponseBodyStatus = typeof AccessRequestResponseBodyStatus[keyof typeof AccessRequestResponseBodyStatus];
-
+export type AccessRequestResponseBodyStatus =
+  (typeof AccessRequestResponseBodyStatus)[keyof typeof AccessRequestResponseBodyStatus];
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const AccessRequestResponseBodyStatus = {
   REQUESTED: 'REQUESTED',
   GRANTED: 'GRANTED',
   EXPIRED: 'EXPIRED',
   DENIED: 'DENIED',
-  INVALID: 'INVALID',
+  INVALID: 'INVALID'
 } as const;
 
 export interface AccessRequestResponseBody {
@@ -117,34 +111,27 @@ export interface AccessRequestResponseBody {
   username: string;
 }
 
-
-
-
-
-  /**
+/**
  * Will retrieve an ordered list of access requests for the given context
  * @summary List AccessRequests
  */
 export const listAccessrequest = <TData = AxiosResponse<ListAccessRequestResponseBody>>(
-     options?: AxiosRequestConfig
- ): Promise<TData> => {
-    return axios.get(
-      `/accessrequests`,options
-    );
-  }
+  options?: AxiosRequestConfig
+): Promise<TData> => {
+  console.log('listAccessrequest')
+  return axios.get(`/accessrequests`, options);
+};
 
 /**
  * Will create an access request for the given role and context
  * @summary Create AccessRequest
  */
 export const createAccessrequest = <TData = AxiosResponse<AccessRequestResponseBody>>(
-    createAccessRequestBody: NonReadonly<CreateAccessRequestBody>, options?: AxiosRequestConfig
- ): Promise<TData> => {
-    return axios.post(
-      `/accessrequests`,
-      createAccessRequestBody,options
-    );
-  }
-
-export type ListAccessrequestResult = AxiosResponse<ListAccessRequestResponseBody>
-export type CreateAccessrequestResult = AxiosResponse<AccessRequestResponseBody>
+  createAccessRequestBody: NonReadonly<CreateAccessRequestBody>,
+  options?: AxiosRequestConfig
+): Promise<TData> => {
+  return axios.post(`/accessrequests`, createAccessRequestBody, options);
+};
+
+export type ListAccessrequestResult = AxiosResponse<ListAccessRequestResponseBody>;
+export type CreateAccessrequestResult = AxiosResponse<AccessRequestResponseBody>;