feat(ws): automate generation of types and HTTP client layer from Swagger definitions

Signed-off-by: Guilherme Caponetto <[email protected]>

Author: caponetto

workspaces/frontend/package-lock.json

@@ -19,6 +19,7 @@
     "build:bundle-analyze": "webpack-bundle-analyzer ./bundle.stats.json",
     "build:clean": "rimraf ./dist",
     "build:prod": "webpack --config ./config/webpack.prod.js",
+    "generate:api": "swagger-typescript-api generate -p ../backend/openapi/swagger.json -o ./src/generated --extract-request-body --responses --clean-output --axios --unwrap-response-data --modular && npm run prettier",
     "start:dev": "cross-env STYLE_THEME=$npm_config_theme webpack serve --hot --color --config ./config/webpack.dev.js",
     "start:dev:mock": "cross-env MOCK_API_ENABLED=true STYLE_THEME=$npm_config_theme npm run start:dev",
     "test": "run-s prettier:check test:lint test:unit test:cypress-ci",
@@ -113,6 +114,7 @@
     "@patternfly/react-table": "^6.2.0",
     "@patternfly/react-tokens": "^6.2.0",
     "@types/js-yaml": "^4.0.9",
+    "axios": "^1.10.0",
     "date-fns": "^4.1.0",
     "eslint-plugin-local-rules": "^3.0.2",
     "js-yaml": "^4.1.0",
@@ -138,6 +140,7 @@
     "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0"
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "swagger-typescript-api": "^13.2.7"
   }
 }

workspaces/frontend/package.json

@@ -1,7 +1,7 @@
+import { NamespacesNamespace } from '~/generated/data-contracts';
 import { buildMockNamespace } from '~/shared/mock/mockBuilder';
-import { Namespace } from '~/shared/api/backendApiTypes';
 
-export const mockNamespaces: Namespace[] = [
+export const mockNamespaces: NamespacesNamespace[] = [
   buildMockNamespace({ name: 'default' }),
   buildMockNamespace({ name: 'kubeflow' }),
   buildMockNamespace({ name: 'custom-namespace' }),

workspaces/frontend/src/__mocks__/mockNamespaces.ts

@@ -1,5 +1,7 @@
-import { ResponseBody } from '~/shared/api/types';
+interface Envelope<T> {
+  data: T;
+}
 
-export const mockBFFResponse = <T>(data: T): ResponseBody<T> => ({
+export const mockBFFResponse = <T>(data: T): Envelope<T> => ({
   data,
 });

workspaces/frontend/src/__mocks__/utils.ts

@@ -1,34 +1,34 @@
-import { WorkspaceState } from '~/shared/api/backendApiTypes';
-import type { Workspace, WorkspaceKindInfo } from '~/shared/api/backendApiTypes';
+import type { WorkspacesWorkspace, WorkspacesWorkspaceKindInfo } from '~/generated/data-contracts';
+import { WorkspacesWorkspaceState } from '~/generated/data-contracts';
 
 const generateMockWorkspace = (
   name: string,
   namespace: string,
-  state: WorkspaceState,
+  state: WorkspacesWorkspaceState,
   paused: boolean,
   imageConfigId: string,
   imageConfigDisplayName: string,
   podConfigId: string,
   podConfigDisplayName: string,
   pvcName: string,
-): Workspace => {
+): WorkspacesWorkspace => {
   const pausedTime = new Date(2025, 0, 1).getTime();
   const lastActivityTime = new Date(2025, 0, 2).getTime();
   const lastUpdateTime = new Date(2025, 0, 3).getTime();
 
   return {
     name,
     namespace,
-    workspaceKind: { name: 'jupyterlab' } as WorkspaceKindInfo,
+    workspaceKind: { name: 'jupyterlab' } as WorkspacesWorkspaceKindInfo,
     deferUpdates: paused,
     paused,
     pausedTime,
     pendingRestart: Math.random() < 0.5, //to generate randomly True/False value
     state,
     stateMessage:
-      state === WorkspaceState.WorkspaceStateRunning
+      state === WorkspacesWorkspaceState.WorkspaceStateRunning
         ? 'Workspace is running smoothly.'
-        : state === WorkspaceState.WorkspaceStatePaused
+        : state === WorkspacesWorkspaceState.WorkspaceStatePaused
           ? 'Workspace is paused.'
           : 'Workspace is operational.',
     podTemplate: {
@@ -104,11 +104,11 @@ const generateMockWorkspaces = (numWorkspaces: number, byNamespace = false) => {
   for (let i = 1; i <= numWorkspaces; i++) {
     const state =
       i % 3 === 0
-        ? WorkspaceState.WorkspaceStateError
+        ? WorkspacesWorkspaceState.WorkspaceStateError
         : i % 2 === 0
-          ? WorkspaceState.WorkspaceStatePaused
-          : WorkspaceState.WorkspaceStateRunning;
-    const paused = state === WorkspaceState.WorkspaceStatePaused;
+          ? WorkspacesWorkspaceState.WorkspaceStatePaused
+          : WorkspacesWorkspaceState.WorkspaceStateRunning;
+    const paused = state === WorkspacesWorkspaceState.WorkspaceStatePaused;
     const name = `workspace-${i}`;
     const namespace = namespaces[i % namespaces.length];
     const pvcName = `data-pvc-${i}`;

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspace.mock.ts

@@ -1,7 +1,12 @@
-import type { WorkspaceKind } from '~/shared/api/backendApiTypes';
+import {
+  WorkspacekindsRedirectMessageLevel,
+  type WorkspacekindsWorkspaceKind,
+} from '~/generated/data-contracts';
 
 // Factory function to create a valid WorkspaceKind
-function createMockWorkspaceKind(overrides: Partial<WorkspaceKind> = {}): WorkspaceKind {
+function createMockWorkspaceKind(
+  overrides: Partial<WorkspacekindsWorkspaceKind> = {},
+): WorkspacekindsWorkspaceKind {
   return {
     name: 'jupyter-lab',
     displayName: 'JupyterLab Notebook',
@@ -27,14 +32,15 @@ function createMockWorkspaceKind(overrides: Partial<WorkspaceKind> = {}): Worksp
           values: [
             {
               id: 'jupyterlab_scipy_180',
+              description: 'JupyterLab with SciPy 1.8.0',
               displayName: 'jupyter-scipy:v1.8.0',
-              labels: { pythonVersion: '3.11' },
+              labels: [{ key: 'pythonVersion', value: '3.11' }],
               hidden: true,
               redirect: {
                 to: 'jupyterlab_scipy_190',
                 message: {
                   text: 'This update will change...',
-                  level: 'Info',
+                  level: WorkspacekindsRedirectMessageLevel.RedirectMessageLevelInfo,
                 },
               },
             },
@@ -45,9 +51,13 @@ function createMockWorkspaceKind(overrides: Partial<WorkspaceKind> = {}): Worksp
           values: [
             {
               id: 'tiny_cpu',
+              hidden: false,
               displayName: 'Tiny CPU',
               description: 'Pod with 0.1 CPU, 128 Mb RAM',
-              labels: { cpu: '100m', memory: '128Mi' },
+              labels: [
+                { key: 'cpu', value: '100m' },
+                { key: 'memory', value: '128Mi' },
+              ],
             },
           ],
         },

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts

@@ -1,14 +1,14 @@
-import type { Workspace } from '~/shared/api/backendApiTypes';
+import { mockNamespaces } from '~/__mocks__/mockNamespaces';
+import { mockBFFResponse } from '~/__mocks__/utils';
 import { home } from '~/__tests__/cypress/cypress/pages/home';
 import {
   mockWorkspaces,
   mockWorkspacesByNS,
 } from '~/__tests__/cypress/cypress/tests/mocked/workspace.mock';
-import { mockNamespaces } from '~/__mocks__/mockNamespaces';
-import { mockBFFResponse } from '~/__mocks__/utils';
+import type { WorkspacesWorkspace } from '~/generated/data-contracts';
 
 // Helper function to validate the content of a single workspace row in the table
-const validateWorkspaceRow = (workspace: Workspace, index: number) => {
+const validateWorkspaceRow = (workspace: WorkspacesWorkspace, index: number) => {
   // Validate the workspace name
   cy.findByTestId(`workspace-row-${index}`)
     .find('[data-testid="workspace-name"]')

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/Workspaces.cy.ts

@@ -1,4 +1,7 @@
-import { WorkspaceKind, WorkspaceOptionRedirect } from '~/shared/api/backendApiTypes';
+import {
+  WorkspacekindsOptionRedirect,
+  WorkspacekindsWorkspaceKind,
+} from '~/generated/data-contracts';
 
 type KindLogoDict = Record<string, string>;
 
@@ -7,7 +10,9 @@ type KindLogoDict = Record<string, string>;
  * @param {WorkspaceKind[]} workspaceKinds - The list of workspace kinds.
  * @returns {KindLogoDict} A dictionary with kind names as keys and logo URLs as values.
  */
-export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): KindLogoDict {
+export function buildKindLogoDictionary(
+  workspaceKinds: WorkspacekindsWorkspaceKind[] | [],
+): KindLogoDict {
   const kindLogoDict: KindLogoDict = {};
 
   for (const workspaceKind of workspaceKinds) {
@@ -20,15 +25,15 @@ export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): K
   return kindLogoDict;
 }
 
-type WorkspaceRedirectStatus = Record<string, WorkspaceOptionRedirect | undefined>;
+type WorkspaceRedirectStatus = Record<string, WorkspacekindsOptionRedirect | undefined>;
 
 /**
  * Builds a dictionary of workspace kinds to redirect statuses.
  * @param {WorkspaceKind[]} workspaceKinds - The list of workspace kinds.
  * @returns {WorkspaceRedirectStatus} A dictionary with kind names as keys and redirect status objects as values.
  */
 export function buildWorkspaceRedirectStatus(
-  workspaceKinds: WorkspaceKind[] | [],
+  workspaceKinds: WorkspacekindsWorkspaceKind[] | [],
 ): WorkspaceRedirectStatus {
   const workspaceRedirectStatus: WorkspaceRedirectStatus = {};
   for (const workspaceKind of workspaceKinds) {

workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Alert } from '@patternfly/react-core/dist/esm/components/Alert';
 import { List, ListItem } from '@patternfly/react-core/dist/esm/components/List';
-import { ValidationError } from '~/shared/api/backendApiTypes';
-import { ErrorEnvelopeException } from '~/shared/api/apiUtils';
+import { ApiValidationError } from '~/generated/data-contracts';
 
 interface ValidationErrorAlertProps {
   title: string;
-  errors: (ValidationError | ErrorEnvelopeException)[];
+  errors: ApiValidationError[];
 }
 
 export const ValidationErrorAlert: React.FC<ValidationErrorAlertProps> = ({ title, errors }) => {
@@ -18,7 +17,9 @@ export const ValidationErrorAlert: React.FC<ValidationErrorAlertProps> = ({ titl
     <Alert variant="danger" title={title} isInline>
       <List>
         {errors.map((error, index) => (
-          <ListItem key={index}>{error.message}</ListItem>
+          <ListItem key={index}>
+            {error.message}: &apos;{error.field}&apos;
+          </ListItem>
         ))}
       </List>
     </Alert>

workspaces/frontend/src/app/components/ValidationErrorAlert.tsx

@@ -30,7 +30,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/
 import { TimesCircleIcon } from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { QuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
 import {
   DataFieldKey,
   defineDataFields,
@@ -53,6 +52,7 @@ import {
   formatWorkspaceIdleState,
 } from '~/shared/utilities/WorkspaceUtils';
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
+import { WorkspacesWorkspace, WorkspacesWorkspaceState } from '~/generated/data-contracts';
 
 const {
   fields: wsTableColumns,
@@ -78,12 +78,12 @@ type WorkspaceTableSortableColumnKeys = SortableDataFieldKey<typeof wsTableColum
 export type WorkspaceTableFilteredColumn = FilteredColumn<WorkspaceTableFilterableColumnKeys>;
 
 interface WorkspaceTableProps {
-  workspaces: Workspace[];
+  workspaces: WorkspacesWorkspace[];
   canCreateWorkspaces?: boolean;
   canExpandRows?: boolean;
   initialFilters?: WorkspaceTableFilteredColumn[];
   hiddenColumns?: WorkspaceTableColumnKeys[];
-  rowActions?: (workspace: Workspace) => IActions;
+  rowActions?: (workspace: WorkspacesWorkspace) => IActions;
 }
 
 export interface WorkspaceTableRef {
@@ -162,7 +162,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
       navigate('workspaceCreate');
     }, [navigate]);
 
-    const setWorkspaceExpanded = (workspace: Workspace, isExpanding = true) =>
+    const setWorkspaceExpanded = (workspace: WorkspacesWorkspace, isExpanding = true) =>
       setExpandedWorkspacesNames((prevExpanded) => {
         const newExpandedWorkspacesNames = prevExpanded.filter(
           (wsName) => wsName !== workspace.name,
@@ -172,7 +172,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
           : newExpandedWorkspacesNames;
       });
 
-    const isWorkspaceExpanded = (workspace: Workspace) =>
+    const isWorkspaceExpanded = (workspace: WorkspacesWorkspace) =>
       expandedWorkspacesNames.includes(workspace.name);
 
     const filteredWorkspaces = useMemo(() => {
@@ -214,7 +214,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
     // Column sorting
 
     const getSortableRowValues = (
-      workspace: Workspace,
+      workspace: WorkspacesWorkspace,
     ): Record<WorkspaceTableSortableColumnKeys, string | number> => ({
       name: workspace.name,
       kind: workspace.workspaceKind.name,
@@ -299,19 +299,19 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
       }
     };
 
-    const extractStateColor = (state: WorkspaceState) => {
+    const extractStateColor = (state: WorkspacesWorkspaceState) => {
       switch (state) {
-        case WorkspaceState.WorkspaceStateRunning:
+        case WorkspacesWorkspaceState.WorkspaceStateRunning:
           return 'green';
-        case WorkspaceState.WorkspaceStatePending:
+        case WorkspacesWorkspaceState.WorkspaceStatePending:
           return 'orange';
-        case WorkspaceState.WorkspaceStateTerminating:
+        case WorkspacesWorkspaceState.WorkspaceStateTerminating:
           return 'yellow';
-        case WorkspaceState.WorkspaceStateError:
+        case WorkspacesWorkspaceState.WorkspaceStateError:
           return 'red';
-        case WorkspaceState.WorkspaceStatePaused:
+        case WorkspacesWorkspaceState.WorkspaceStatePaused:
           return 'purple';
-        case WorkspaceState.WorkspaceStateUnknown:
+        case WorkspacesWorkspaceState.WorkspaceStateUnknown:
         default:
           return 'grey';
       }