add api to webpack configuration

cockpit/webpack.config.ts

@@ -2,7 +2,6 @@ const path = require('path');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack'); // Add this line
-
 const [mode, devtool] =
   process.env.NODE_ENV === 'production'
     ? ['production', 'source-map']
@@ -31,7 +30,13 @@ module.exports = {
   resolve: {
     modules: ['node_modules'],
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    alias: {
+      // Use different modules based on the environment
+      // For example, `api` will resolve to `cloudApi` or `imageBuilderApi` accordingly
+      api: path.resolve(__dirname, '../../src/store/cockpitApi.ts'),
+    },
   },
+
   module: {
     rules: [
       {

package.json

@@ -97,7 +97,7 @@
     "test:watch": "TZ=UTC vitest",
     "test:coverage": "TZ=UTC vitest run --coverage",
     "build": "fec build",
-    "cockpit:build": "webpack --config cockpit/webpack.config.ts && ./create_symlink.sh",
+    "devel-install": "webpack --config cockpit/webpack.config.ts && mkdir -p ~/.local/share/cockpit\n\tln -s `pwd`/cockpit/public ~/.local/share/cockpit/image-builder-frontend",
     "api": "npm-run-all api:pull api:generate",
     "api:generate": "bash api/codegen.sh",
     "api:pull": "bash api/pull.sh",

src/AppCockpit.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { HashRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import { Router } from './Router';
 import { store } from './store';
@@ -15,9 +15,9 @@ const Application = () => {
   return (
     <React.Fragment>
       <NotificationsPortal />
-      <HashRouter>
+      <BrowserRouter>
         <Router />
-      </HashRouter>
+      </BrowserRouter>
     </React.Fragment>
   );
 };

src/store/cockpitApi.ts

@@ -1,40 +1,10 @@
 import { emptyCockpitApi as api } from './emptyCockpitApi';
+import {
+  GetBlueprintsApiArg,
+  GetBlueprintsApiResponse,
+} from './imageBuilderApi';
 
-export type ListResponseMeta = {
-  count: number;
-};
-export type ListResponseLinks = {
-  first: string;
-  last: string;
-};
-export type BlueprintItem = {
-  id: string;
-  version: number;
-  name: string;
-  description: string;
-  last_modified_at: string;
-};
-
-export type BlueprintsResponse = {
-  meta: ListResponseMeta;
-  links: ListResponseLinks;
-  data: BlueprintItem[];
-};
-
-export type GetBlueprintsApiResponse =
-  /** status 200 a list of blueprints */ BlueprintsResponse;
-export type GetBlueprintsApiArg = {
-  /** fetch blueprint with specific name */
-  name?: string;
-  /** search for blueprints by name or description */
-  search?: string;
-  /** max amount of blueprints, default 100 */
-  limit?: number;
-  /** blueprint page offset, default 0 */
-  offset?: number;
-};
-
-// initialize an empty api service that we'll inject endpoints into later as needed
+// Injects API endpoints into the service for querying blueprints
 export const blueprintsReducer = api.injectEndpoints({
   endpoints: (build) => ({
     getBlueprints: build.query<GetBlueprintsApiResponse, GetBlueprintsApiArg>({

src/store/index.ts

@@ -19,7 +19,9 @@ import wizardSlice, {
   selectImageTypes,
 } from './wizardSlice';
 
-export const reducer = combineReducers({
+import { isOnPremise } from '../constants';
+
+export const serviceReducer = combineReducers({
   [contentSourcesApi.reducerPath]: contentSourcesApi.reducer,
   [edgeApi.reducerPath]: edgeApi.reducer,
   [imageBuilderApi.reducerPath]: imageBuilderApi.reducer,
@@ -31,6 +33,14 @@ export const reducer = combineReducers({
   blueprints: blueprintsSlice.reducer,
 });
 
+export const onPremReducer = combineReducers({
+  [imageBuilderApi.reducerPath]: imageBuilderApi.reducer,
+  [blueprintsReducer.reducerPath]: blueprintsReducer.reducer,
+  notifications: notificationsReducer,
+  wizard: wizardSlice,
+  blueprints: blueprintsSlice.reducer,
+});
+
 startAppListening({
   actionCreator: changeArchitecture,
   effect: (action, listenerApi) => {
@@ -88,7 +98,7 @@ startAppListening({
 // Listener middleware must be prepended according to RTK docs:
 // https://redux-toolkit.js.org/api/createListenerMiddleware#basic-usage
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export const middleware = (getDefaultMiddleware: Function) =>
+export const serviceMiddleware = (getDefaultMiddleware: Function) =>
   getDefaultMiddleware()
     .prepend(listenerMiddleware.middleware)
     .concat(
@@ -100,7 +110,23 @@ export const middleware = (getDefaultMiddleware: Function) =>
       blueprintsReducer.middleware
     );
 
-export const store = configureStore({ reducer, middleware });
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export const onPremMiddleware = (getDefaultMiddleware: Function) =>
+  getDefaultMiddleware()
+    .prepend(listenerMiddleware.middleware)
+    .concat(
+      promiseMiddleware,
+      imageBuilderApi.middleware,
+      blueprintsReducer.middleware
+    );
+
+const rootReducer = isOnPremise ? onPremReducer : serviceReducer;
+const rootMiddleware = isOnPremise ? onPremMiddleware : serviceMiddleware;
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: rootMiddleware,
+});
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;