@openshift-assisted/ui-lib 2.9.9-cim → 2.9.11-cim

package/lib/ocm/store/slices/current-user/slice.ts

@@ -0,0 +1,129 @@
+import type { PayloadAction, SerializedError } from '@reduxjs/toolkit';
+import type { Account, Capability } from '@openshift-assisted/types/accounts-management-service';
+import type { StateSliceWithMeta } from '../../types/state-slice';
+import type { RootStateDay1 } from '../../store-day1';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { CurrentAccountApi } from '../../../../common/api/accounts-management-service/current-account-api';
+import { OrganizationsApi } from '../../../../common/api/accounts-management-service/organizations-api';
+
+const currentUserAsyncActions = {
+  getAccountAsync: createAsyncThunk('currentUser/getAccountAsync', async (_, thunkApi) => {
+    const account = await CurrentAccountApi.getCurrentAccount();
+    if (account) {
+      thunkApi.dispatch(currentUserActions.setAccount(account));
+    } else {
+      thunkApi.rejectWithValue({
+        message: 'No account data available',
+      } as SerializedError);
+    }
+  }),
+
+  getUserOrganizationWithCapabilitiesAsync: createAsyncThunk(
+    'currentUser/getUserOrganizationWithCapabilitiesAsync',
+    async (orgId: string, thunkApi) => {
+      const organization = await OrganizationsApi.getOrganization(orgId);
+      if (organization) {
+        thunkApi.dispatch(
+          currentUserActions.setOrganizationCapabilities(organization.capabilities ?? []),
+        );
+      } else {
+        thunkApi.rejectWithValue({
+          message: 'No organization data found',
+        } as SerializedError);
+      }
+    },
+  ),
+
+  getCapabilitiesAsync: createAsyncThunk(
+    'currentUser/getCapabilitiesAsync',
+    async (_, thunkApi) => {
+      await thunkApi.dispatch(currentUserAsyncActions.getAccountAsync());
+      const { currentUser } = thunkApi.getState() as RootStateDay1;
+      const orgId = currentUser.data?.organization_id;
+      if (orgId) {
+        await thunkApi.dispatch(
+          currentUserAsyncActions.getUserOrganizationWithCapabilitiesAsync(orgId),
+        );
+      } else {
+        thunkApi.rejectWithValue({
+          message: 'Account has no organization ID',
+        } as SerializedError);
+      }
+    },
+  ),
+};
+
+type AsyncThunkActions = (typeof currentUserAsyncActions)[keyof typeof currentUserAsyncActions];
+type CurrentUserAsyncThunkActionCreators =
+  | ReturnType<AsyncThunkActions['pending']>
+  | ReturnType<AsyncThunkActions['fulfilled']>
+  | ReturnType<AsyncThunkActions['rejected']>;
+
+export type CurrentUserState = StateSliceWithMeta<
+  Omit<Account, 'capabilities'> | null,
+  SerializedError | null
+>;
+
+const currentUserSlice = createSlice({
+  name: 'currentUser',
+  initialState: (): CurrentUserState => ({
+    data: null,
+    error: null,
+    meta: {
+      status: 'idle',
+      updatedAt: null,
+      currentRequestId: null,
+    },
+  }),
+  reducers: {
+    setMeta: (state, action: PayloadAction<CurrentUserAsyncThunkActionCreators>) => {
+      state.meta.updatedAt = new Date().toUTCString();
+      state.meta.status = action.payload.meta.requestStatus;
+      state.meta.currentRequestId = action.payload.meta.requestId;
+      return state;
+    },
+    setAccount: (state, action: PayloadAction<Account>) => {
+      state.data = action.payload;
+      state.error = null;
+      state.meta.updatedAt = new Date().toUTCString();
+      return state;
+    },
+    setOrganizationCapabilities: (state, action: PayloadAction<Capability[]>) => {
+      if (state.data !== null && state.data.organization) {
+        state.data.organization.capabilities = action.payload;
+        state.error = null;
+        state.meta.updatedAt = new Date().toUTCString();
+      }
+
+      return state;
+    },
+  },
+  extraReducers: (builder) => {
+    for (const { pending, fulfilled, rejected } of Object.values(currentUserAsyncActions)) {
+      builder.addCase(pending, (state, action) => {
+        if (/idle|fulfilled|rejected/.test(state.meta.status)) {
+          currentUserActions.setMeta(action);
+        }
+        return state;
+      });
+      builder.addCase(fulfilled, (state, action) => {
+        if (/idle|pending/.test(state.meta.status)) {
+          currentUserActions.setMeta(action);
+        }
+        return state;
+      });
+      builder.addCase(rejected, (state, action) => {
+        if (/idle|pending/.test(state.meta.status)) {
+          currentUserActions.setMeta(action);
+          state.error = action.error;
+        }
+        return state;
+      });
+    }
+  },
+});
+
+const currentUserActions = currentUserSlice.actions;
+const currentUserReducer = currentUserSlice.reducer;
+
+export { currentUserAsyncActions, currentUserActions, currentUserReducer };

package/lib/ocm/store/slices/feature-flags/selectors.ts

@@ -1,13 +1,12 @@
+import type { FeatureListType } from '../../../../common/features/featureGate';
+import type { RootStateDay1 } from '../../store-day1';
 import { createSelector } from '@reduxjs/toolkit';
-import { AssistedInstallerFeatureType } from '../../../../common';
-import { RootStateDay1 } from '../../store-day1';
 
 export const selectFeatureFlagsSlice = (state: RootStateDay1) => state.featureFlags;
 
 export const isFeatureEnabled = createSelector(
-  [selectFeatureFlagsSlice, (_, feature: AssistedInstallerFeatureType) => feature],
-  (featureFlags, feature) => {
-    // Configured via Unleash in the OCM
-    return !!featureFlags[feature];
-  },
+  selectFeatureFlagsSlice,
+  (_featureFlags: ReturnType<typeof selectFeatureFlagsSlice>, featureId: keyof FeatureListType) =>
+    featureId,
+  (featureFlags, featureId) => featureFlags.data[featureId],
 );

package/lib/ocm/store/slices/feature-flags/slice.ts

@@ -1,15 +1,110 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { FeatureListType } from '../../../../common';
+import type { PayloadAction, SerializedError } from '@reduxjs/toolkit';
+import type { StateSliceWithMeta } from '../../types/state-slice';
+import type { FeatureListType } from '../../../../common/features/featureGate';
+import type { RootStateDay1 } from '../../store-day1';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { STANDALONE_DEPLOYMENT_ENABLED_FEATURES } from '../../../../common/features/featureGate';
+import { externalFeaturesMappings } from '../../../config/external-features';
+import { currentUserAsyncActions } from '../current-user/slice';
+
+const featureFlagsAsyncActions = {
+  detectFeaturesAsync: createAsyncThunk(
+    'featureFlags/detectFeatures',
+    async (featuresOverride: FeatureListType | null = null, thunkApi) => {
+      await thunkApi.dispatch(currentUserAsyncActions.getCapabilitiesAsync());
+      const state = thunkApi.getState() as RootStateDay1;
+      for (const { featureId, capabilityId } of externalFeaturesMappings) {
+        const capability = state.currentUser.data?.organization?.capabilities?.find(
+          (capability) => capability.name === capabilityId,
+        );
+        if (capability) {
+          thunkApi.dispatch(
+            featureFlagsActions.setFeatureFlag({
+              featureId,
+              isEnabled: capability.value === 'true',
+            }),
+          );
+        }
+      }
+      if (featuresOverride !== null) {
+        for (const [k, v] of Object.entries(featuresOverride)) {
+          thunkApi.dispatch(
+            featureFlagsActions.setFeatureFlag({
+              featureId: k as keyof FeatureListType,
+              isEnabled: v,
+            }),
+          );
+        }
+      }
+    },
+  ),
+};
+
+type AsyncThunkActions = (typeof featureFlagsAsyncActions)[keyof typeof featureFlagsAsyncActions];
+type FeatureFlagsAsyncThunkActionCreators =
+  | ReturnType<AsyncThunkActions['pending']>
+  | ReturnType<AsyncThunkActions['fulfilled']>
+  | ReturnType<AsyncThunkActions['rejected']>;
+
+export type FeatureFlagsState = StateSliceWithMeta<FeatureListType, SerializedError | null>;
+
+const initialState: FeatureFlagsState = {
+  data: STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
+  error: null,
+  meta: {
+    status: 'idle',
+    updatedAt: null,
+    currentRequestId: null,
+  },
+};
 
 const featureFlagsSlice = createSlice({
   name: 'featureFlags',
-  initialState: {} as FeatureListType,
+  initialState,
   reducers: {
-    setFeatureFlags: (state, action: PayloadAction<FeatureListType>) => {
-      return Object.assign(state, action.payload);
+    setMeta: (state, action: PayloadAction<FeatureFlagsAsyncThunkActionCreators>) => {
+      state.meta.updatedAt = new Date().toUTCString();
+      state.meta.status = action.payload.meta.requestStatus;
+      state.meta.currentRequestId = action.payload.meta.requestId;
+      return state;
+    },
+    setFeatureFlag: (
+      state,
+      action: PayloadAction<{ featureId: keyof FeatureListType; isEnabled: boolean }>,
+    ) => {
+      const { featureId, isEnabled } = action.payload;
+      state.data[featureId] = isEnabled;
+      state.error = null;
+      state.meta.updatedAt = new Date().toUTCString();
+      return state;
     },
   },
+  extraReducers: (builder) => {
+    for (const { pending, fulfilled, rejected } of Object.values(featureFlagsAsyncActions)) {
+      builder.addCase(pending, (state, action) => {
+        if (/idle|fulfilled|rejected/.test(state.meta.status)) {
+          featureFlagsActions.setMeta(action);
+        }
+        return state;
+      });
+      builder.addCase(fulfilled, (state, action) => {
+        if (/idle|pending/.test(state.meta.status)) {
+          featureFlagsActions.setMeta(action);
+        }
+        return state;
+      });
+      builder.addCase(rejected, (state, action) => {
+        if (/idle|pending/.test(state.meta.status)) {
+          featureFlagsActions.setMeta(action);
+          state.error = action.error;
+        }
+        return state;
+      });
+    }
+  },
 });
 
-export const featureFlagsActions = featureFlagsSlice.actions;
-export const featureFlagsReducer = featureFlagsSlice.reducer;
+const featureFlagsActions = featureFlagsSlice.actions;
+const featureFlagsReducer = featureFlagsSlice.reducer;
+
+export { featureFlagsAsyncActions, featureFlagsActions, featureFlagsReducer };

package/lib/ocm/store/slices/infra-envs/thunks.ts

@@ -19,7 +19,7 @@ export const listInfraEnvsByClusterId = createAsyncThunk(
 );
 
 export const createInfraEnv = createAsyncThunk(
-  '',
+  'infraEnvs/createInfraEnv',
   async (params: WithRequired<InfraEnvCreateParams, 'clusterId'>) => {
     const { data: infraEnv } = await InfraEnvsAPI.register(params);
     // dispatch({ type: 'currentCluster/updateStaticNetworkConfig' payload: infraEnv.staticNetworkConfig });

package/lib/ocm/store/store-day1.ts

@@ -3,7 +3,7 @@ import { clustersReducer } from './slices/clusters/slice';
 import { currentClusterReducer } from './slices/current-cluster/slice';
 import { infraEnvsReducer } from './slices/infra-envs/slice';
 import { featureFlagsReducer } from './slices/feature-flags/slice';
-import { STANDALONE_DEPLOYMENT_ENABLED_FEATURES } from '../../common';
+import { currentUserReducer } from './slices/current-user/slice';
 
 export const storeDay1 = configureStore({
   devTools: {
@@ -14,9 +14,7 @@ export const storeDay1 = configureStore({
     currentCluster: currentClusterReducer,
     infraEnvs: infraEnvsReducer,
     featureFlags: featureFlagsReducer,
-  },
-  preloadedState: {
-    featureFlags: STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
+    currentUser: currentUserReducer,
   },
 });
 export type RootStateDay1 = ReturnType<typeof storeDay1.getState>;

package/lib/ocm/store/types/state-slice.ts

@@ -0,0 +1,16 @@
+export interface StateSliceMeta {
+  /** @default idle */
+  status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
+  /** @default null */
+  updatedAt?: string | null;
+  /** @default null */
+  currentRequestId?: string | null;
+}
+
+export interface StateSlice<D = unknown, E = unknown> {
+  data: D;
+  error: E;
+}
+export interface StateSliceWithMeta<D = unknown, E = unknown> extends StateSlice<D, E> {
+  meta: StateSliceMeta;
+}

package/package.json

@@ -1,7 +1,14 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.9.9-cim",
-    "@openshift-assisted/types": "2.9.9-cim",
+    "@openshift-assisted/locales": "2.9.11-cim",
+    "@openshift-assisted/types": "2.9.11-cim",
+    "@patternfly/patternfly": "^4.222.4",
+    "@patternfly/react-code-editor": "^4.82.113",
+    "@patternfly/react-core": "^4.168.8",
+    "@patternfly/react-icons": "^4.93.3",
+    "@patternfly/react-styles": "^4.92.3",
+    "@patternfly/react-table": "^4.37.8",
+    "@patternfly/react-tokens": "^4.94.3",
     "axios-case-converter": "^0.11.1",
     "camel-case": "^4.1.2",
     "cidr-tools": "^4.3.0",
@@ -26,6 +33,7 @@
   },
   "description": "React component library for the Assisted Installer UI",
   "devDependencies": {
+    "@redhat-cloud-services/types": "^1.0.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/file-saver": "^2.0.1",
     "@types/human-date": "^1.4.0",
@@ -112,10 +120,14 @@
   },
   "scripts": {
     "build": "yarn run -T tsc --build --verbose && yarn copy:css",
-    "check_circular_deps": "yarn run -T dpdm --warning false --tree false --exit-code circular:1 ./lib/index.ts",
+    "check_circular_deps": "yarn run -T dpdm --transform --warning false --tree false --exit-code circular:1 ./lib/index.ts",
     "check_types": "yarn run -T tsc --noEmit",
     "clean": "yarn run -T rimraf node_modules build",
-    "copy:css": "rsync -Ruv lib/./**/*.css build/cjs"
+    "copy:css": "rsync -Ruv lib/./**/*.css build/cjs",
+    "format": "yarn run -T prettier --cache --check . \"!build\"",
+    "fix-code-style": "yarn lint --fix && yarn format --write",
+    "lint": "yarn run -T eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache .",
+    "test": "vitest"
   },
   "typesVersions": {
     "*": {
@@ -127,5 +139,5 @@
       ]
     }
   },
-  "version": "2.9.9-cim"
+  "version": "2.9.11-cim"
 }

package/build/@types/ocm/config/routeBaseBath.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"routeBaseBath.d.ts","sourceRoot":"","sources":["../../../../lib/ocm/config/routeBaseBath.ts"],"names":[],"mappings":"AAAA,eAAO,IAAI,aAAa,QAAK,CAAC;AAE9B,eAAO,MAAM,gBAAgB,aAAc,MAAM,SAEhD,CAAC"}

package/build/@types/ocm/store/store-day2.d.ts

@@ -1,10 +0,0 @@
-export declare const storeDay2: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<{
-    infraEnvs: import("@openshift-assisted/types/./assisted-installer-service").InfraEnv[];
-    featureFlags: import("../../common").FeatureListType;
-}, import("redux").AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<{
-    infraEnvs: import("@openshift-assisted/types/./assisted-installer-service").InfraEnv[];
-    featureFlags: import("../../common").FeatureListType;
-}, import("redux").AnyAction, undefined>]>;
-export type RootStateDay2 = ReturnType<typeof storeDay2.getState>;
-export type DispatchDay2 = typeof storeDay2.dispatch;
-//# sourceMappingURL=store-day2.d.ts.map

package/build/@types/ocm/store/store-day2.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"store-day2.d.ts","sourceRoot":"","sources":["../../../../lib/ocm/store/store-day2.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;0CAWpB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,QAAQ,CAAC"}

package/build/cjs/ocm/config/routeBaseBath.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"routeBaseBath.js","sourceRoot":"","sources":["../../../../lib/ocm/config/routeBaseBath.ts"],"names":[],"mappings":";;;AAAW,QAAA,aAAa,GAAG,EAAE,CAAC;AAEvB,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAE,EAAE;IACnD,qBAAa,GAAG,QAAQ,CAAC;AAC3B,CAAC,CAAC;AAFW,QAAA,gBAAgB,oBAE3B"}

package/build/cjs/ocm/store/store-day2.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.storeDay2 = void 0;
-const toolkit_1 = require("@reduxjs/toolkit");
-const slice_1 = require("./slices/infra-envs/slice");
-const slice_2 = require("./slices/feature-flags/slice");
-const common_1 = require("../../common");
-exports.storeDay2 = (0, toolkit_1.configureStore)({
-    devTools: {
-        name: 'Assisted Installer - Day 2',
-    },
-    reducer: {
-        infraEnvs: slice_1.infraEnvsReducer,
-        featureFlags: slice_2.featureFlagsReducer,
-    },
-    preloadedState: {
-        featureFlags: common_1.STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
-    },
-});
-//# sourceMappingURL=store-day2.js.map

package/build/cjs/ocm/store/store-day2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"store-day2.js","sourceRoot":"","sources":["../../../../lib/ocm/store/store-day2.ts"],"names":[],"mappings":";;;AAAA,8CAAkD;AAClD,qDAA6D;AAC7D,wDAAmE;AACnE,yCAAsE;AAEzD,QAAA,SAAS,GAAG,IAAA,wBAAc,EAAC;IACtC,QAAQ,EAAE;QACR,IAAI,EAAE,4BAA4B;KACnC;IACD,OAAO,EAAE;QACP,SAAS,EAAE,wBAAgB;QAC3B,YAAY,EAAE,2BAAmB;KAClC;IACD,cAAc,EAAE;QACd,YAAY,EAAE,+CAAsC;KACrD;CACF,CAAC,CAAC"}

package/lib/ocm/store/store-day2.ts

@@ -1,19 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import { infraEnvsReducer } from './slices/infra-envs/slice';
-import { featureFlagsReducer } from './slices/feature-flags/slice';
-import { STANDALONE_DEPLOYMENT_ENABLED_FEATURES } from '../../common';
-
-export const storeDay2 = configureStore({
-  devTools: {
-    name: 'Assisted Installer - Day 2',
-  },
-  reducer: {
-    infraEnvs: infraEnvsReducer,
-    featureFlags: featureFlagsReducer,
-  },
-  preloadedState: {
-    featureFlags: STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
-  },
-});
-export type RootStateDay2 = ReturnType<typeof storeDay2.getState>;
-export type DispatchDay2 = typeof storeDay2.dispatch;