testing

Signed-off-by: Christian Vogt <[email protected]>

.env.development

@@ -20,29 +20,3 @@ MODEL_REGISTRY_NAME=modelregistry-sample
 MODEL_REGISTRY_SERVICE_HOST=localhost
 MODEL_REGISTRY_SERVICE_PORT=8085
 MODEL_REGISTRY_NAMESPACE=odh-model-registries
-
-# Module Federation Config JSON
-#
-# name: the name of the module
-# remoteEntry: the path of the remote entry file
-# proxy:
-#   path: the path to proxy
-#   pathRewrite: the value to rewrite, defaults to path
-#   authorize: whether to authorize the request, defaults to false
-# local: the host and port for local development
-#   host: defaults to localhost
-#   port: the local port to connect to
-# service:
-#  name: the service name
-#  namespace: the service namespace
-#  port: the service port to connect to
-#
-# Overrideable env vars:
-#   MF_<uppercase name>_LOCAL_HOST
-#   MF_<uppercase name>_LOCAL_PORT
-#   MF_<uppercase name>_SERVICE_NAME
-#   MF_<uppercase name>_SERVICE_NAMESPACE
-#   MF_<uppercase name>_SERVICE_PORT
-MODULE_FEDERATION_CONFIG='
-[]
-'

backend/src/utils/proxy.ts

@@ -221,6 +221,9 @@ export const registerProxy = async (
     upstream,
     replyOptions: {
       getUpstream: () => upstream,
+      queryString: {
+        namespace: 'odh-model-registries',
+      },
     },
     preHandler: async (request, reply) => {
       if (checkRequestLimitExceeded(request, fastify, reply)) {

frontend/@mf-types/@mf/modelRegistry/apis.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = '@mf/modelRegistry/index' | '@mf/modelRegistry/plugin';
+    type PackageType<T> = T extends '@mf/modelRegistry/plugin' ? typeof import('@mf/modelRegistry/plugin') :T extends '@mf/modelRegistry/index' ? typeof import('@mf/modelRegistry/index') :any;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/__tests__/unit/testUtils/hooks.d.ts

@@ -0,0 +1,79 @@
+import { RenderHookOptions, RenderHookResult, waitForOptions } from '@testing-library/react';
+import { queries, Queries } from '@testing-library/dom';
+export type BooleanValues<T> = T extends boolean | number | null | undefined | Function ? boolean | undefined : boolean | undefined | {
+    [K in keyof T]?: BooleanValues<T[K]>;
+};
+/**
+ * Extension of RTL RenderHookResult providing functions used query the current state of the result.
+ */
+export type RenderHookResultExt<Result, Props> = RenderHookResult<Result, Props> & {
+    /**
+     * Returns the previous result.
+     */
+    getPreviousResult: () => Result;
+    /**
+     * Get the update count for how many times the hook has been rendered.
+     * An update occurs initially on render, subsequently when re-rendered, and also whenever the hook itself triggers a re-render.
+     * eg. An `useEffect` triggering a state update.
+     */
+    getUpdateCount: () => number;
+    /**
+     * Returns a Promise that resolves the next time the hook renders, commonly when state is updated as the result of an asynchronous update.
+     *
+     * Since `waitForNextUpdate` works using interval checks (backed by `waitFor`), it's possible that multiple updates may occur while waiting.
+     */
+    waitForNextUpdate: (options?: Pick<waitForOptions, 'interval' | 'timeout'>) => Promise<void>;
+};
+/**
+ * Wrapper on top of RTL `renderHook` returning a result that implements the `RenderHookResultExt` interface.
+ *
+ * `renderHook` provides full control over the rendering of your hook including the ability to wrap the test component.
+ * This is usually used to add context providers from `React.createContext` for the hook to access with `useContext`.
+ * `initialProps` and props subsequently set by `rerender` will be provided to the wrapper.
+ *
+ * ```
+ * const renderResult = renderHook(({ who }: { who: string }) => useSayHello(who), { initialProps: { who: 'world' }});
+ * expect(renderResult).hookToBe('Hello world!');
+ * renderResult.rerender({ who: 'there' });
+ * expect(renderResult).hookToBe('Hello there!');
+ * ```
+ */
+export declare const renderHook: <Result, Props, Q extends Queries = typeof queries, Container extends Element | DocumentFragment = HTMLElement, BaseElement extends Element | DocumentFragment = Container>(render: (initialProps: Props) => Result, options?: RenderHookOptions<Props, Q, Container, BaseElement>) => RenderHookResultExt<Result, Props>;
+/**
+ * Lightweight API for testing a single hook.
+ *
+ * Prefer this method of testing over `renderHook` for simplicity.
+ *
+ * ```
+ * const renderResult = testHook(useSayHello)('world');
+ * expectHook(renderResult).toBe('Hello world!');
+ * renderResult.rerender('there');
+ * expectHook(renderResult).toBe('Hello there!');
+ * ```
+ */
+export declare const testHook: <Result, P extends unknown[]>(hook: (...params: P) => Result) => (...initialParams: P) => Omit<RenderHookResultExt<Result, {
+    $params: typeof initialParams;
+}>, "rerender"> & {
+    rerender: (...params: typeof initialParams) => void;
+};
+/**
+ * A helper function for asserting the return value of hooks based on `useFetchState`.
+ *
+ * eg.
+ * ```
+ * expectHook(renderResult).isStrictEqual(standardUseFetchState('test value', true))
+ * ```
+ * is equivalent to:
+ * ```
+ * expectHook(renderResult).isStrictEqual(['test value', true, undefined, expect.any(Function)])
+ * ```
+ */
+export declare const standardUseFetchState: <D>(data: D, loaded?: boolean, error?: Error) => [data: D, loaded: boolean, loadError: Error | undefined, refresh: () => Promise<D | undefined>];
+/**
+ * Extracts a subset of values from the source that can be used to compare equality.
+ *
+ * Recursively traverses the `booleanTarget`. For every property or array index equal to `true`,
+ * adds the value of the source to the result wrapped in custom matcher `expect.isIdentityEqual`.
+ * If the entry is `false` or `undefined`, add an everything matcher to the result.
+ */
+export declare const createComparativeValue: <T>(source: T, booleanTarget: BooleanValues<T>) => unknown;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/AppContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { UserSettings, ConfigSettings } from '~/shared/types';
+type AppContextProps = {
+    config: ConfigSettings;
+    user: UserSettings;
+};
+export declare const AppContext: React.Context<AppContextProps>;
+export declare const useAppContext: () => AppContextProps;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/const.d.ts

@@ -0,0 +1 @@
+export declare const BFF_API_VERSION = "v1";

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/context/ModelRegistryContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ModelRegistryAPIState } from '~/app/hooks/useModelRegistryAPIState';
+export type ModelRegistryContextType = {
+    apiState: ModelRegistryAPIState;
+    refreshAPIState: () => void;
+};
+type ModelRegistryContextProviderProps = {
+    children: React.ReactNode;
+    modelRegistryName: string;
+};
+export declare const ModelRegistryContext: React.Context<ModelRegistryContextType>;
+export declare const ModelRegistryContextProvider: React.FC<ModelRegistryContextProviderProps>;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/context/ModelRegistrySelectorContext.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ModelRegistry } from '~/app/types';
+export type ModelRegistrySelectorContextType = {
+    modelRegistriesLoaded: boolean;
+    modelRegistriesLoadError?: Error;
+    modelRegistries: ModelRegistry[];
+    preferredModelRegistry: ModelRegistry | undefined;
+    updatePreferredModelRegistry: (modelRegistry: ModelRegistry | undefined) => void;
+};
+type ModelRegistrySelectorContextProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ModelRegistrySelectorContext: React.Context<ModelRegistrySelectorContextType>;
+export declare const ModelRegistrySelectorContextProvider: React.FC<ModelRegistrySelectorContextProviderProps>;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/context/NotificationContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Notification, NotificationAction } from '~/app/types';
+type NotificationContextProps = {
+    notifications: Notification[];
+    notificationCount: number;
+    updateNotificationCount: React.Dispatch<React.SetStateAction<number>>;
+    dispatch: React.Dispatch<NotificationAction>;
+};
+export declare const NotificationContext: React.Context<NotificationContextProps>;
+type NotificationContextProviderProps = {
+    children: React.ReactNode;
+};
+export declare const NotificationContextProvider: React.FC<NotificationContextProviderProps>;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelArtifactsByVersionId.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { ModelArtifactList } from '~/app/types';
+declare const useModelArtifactsByVersionId: (modelVersionId?: string) => FetchState<ModelArtifactList>;
+export default useModelArtifactsByVersionId;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelRegistries.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { ModelRegistry } from '~/app/types';
+declare const useModelRegistries: (queryParams: Record<string, unknown>) => FetchState<ModelRegistry[]>;
+export default useModelRegistries;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelRegistryAPI.d.ts

@@ -0,0 +1,6 @@
+import { ModelRegistryAPIState } from '~/app/hooks/useModelRegistryAPIState';
+type UseModelRegistryAPI = ModelRegistryAPIState & {
+    refreshAllAPI: () => void;
+};
+export declare const useModelRegistryAPI: () => UseModelRegistryAPI;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelRegistryAPIState.d.ts

@@ -0,0 +1,5 @@
+import { APIState } from '~/shared/api/types';
+import { ModelRegistryAPIs } from '~/app/types';
+export type ModelRegistryAPIState = APIState<ModelRegistryAPIs>;
+declare const useModelRegistryAPIState: (hostPath: string | null, queryParameters?: Record<string, unknown>) => [apiState: ModelRegistryAPIState, refreshAPIState: () => void];
+export default useModelRegistryAPIState;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelVersionById.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { ModelVersion } from '~/app/types';
+declare const useModelVersionById: (modelVersionId?: string) => FetchState<ModelVersion | null>;
+export default useModelVersionById;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelVersions.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { ModelVersionList } from '~/app/types';
+declare const useModelVersions: () => FetchState<ModelVersionList>;
+export default useModelVersions;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useModelVersionsByRegisteredModel.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { ModelVersionList } from '~/app/types';
+declare const useModelVersionsByRegisteredModel: (registeredModelId?: string) => FetchState<ModelVersionList>;
+export default useModelVersionsByRegisteredModel;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useNotification.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare enum NotificationTypes {
+    SUCCESS = "success",
+    ERROR = "error",
+    INFO = "info",
+    WARNING = "warning"
+}
+type NotificationProps = (title: string, message?: React.ReactNode) => void;
+type NotificationRemoveProps = (id: number | undefined) => void;
+type NotificationTypeFunc = {
+    [key in NotificationTypes]: NotificationProps;
+};
+interface NotificationFunc extends NotificationTypeFunc {
+    remove: NotificationRemoveProps;
+}
+export declare const useNotification: () => NotificationFunc;
+export {};

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useRegisteredModelById.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { RegisteredModel } from '~/app/types';
+declare const useRegisteredModelById: (registeredModel?: string) => FetchState<RegisteredModel | null>;
+export default useRegisteredModelById;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/hooks/useRegisteredModels.d.ts

@@ -0,0 +1,4 @@
+import { FetchState } from '~/shared/utilities/useFetchState';
+import { RegisteredModelList } from '~/app/types';
+declare const useRegisteredModels: () => FetchState<RegisteredModelList>;
+export default useRegisteredModels;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/ModelRegistryCoreLoader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type ModelRegistryCoreLoaderProps = {
+    getInvalidRedirectPath: (modelRegistry: string) => string;
+};
+declare const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps>;
+export default ModelRegistryCoreLoader;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/ModelRegistryRoutes.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import '~/shared/style/MUI-theme.scss';
+declare const ModelRegistryRoutes: React.FC;
+export default ModelRegistryRoutes;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/InvalidModelRegistry.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type InvalidModelRegistryProps = {
+    title?: string;
+    modelRegistry?: string;
+};
+declare const InvalidModelRegistry: React.FC<InvalidModelRegistryProps>;
+export default InvalidModelRegistry;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelPropertiesDescriptionListGroup.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ModelRegistryCustomProperties } from '~/app/types';
+type ModelPropertiesDescriptionListGroupProps = {
+    customProperties: ModelRegistryCustomProperties;
+    isArchive?: boolean;
+    saveEditedCustomProperties: (properties: ModelRegistryCustomProperties) => Promise<unknown>;
+};
+declare const ModelPropertiesDescriptionListGroup: React.FC<ModelPropertiesDescriptionListGroupProps>;
+export default ModelPropertiesDescriptionListGroup;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { KeyValuePair } from '~/shared/types';
+import { EitherNotBoth } from '~/shared/typeHelpers';
+type ModelPropertiesTableRowProps = {
+    allExistingKeys: string[];
+    setIsEditing: (isEditing: boolean) => void;
+    isSavingEdits: boolean;
+    isArchive?: boolean;
+    setIsSavingEdits: (isSaving: boolean) => void;
+    saveEditedProperty: (oldKey: string, newPair: KeyValuePair) => Promise<unknown>;
+} & EitherNotBoth<{
+    isAddRow: true;
+}, {
+    isEditing: boolean;
+    keyValuePair: KeyValuePair;
+    deleteProperty: (key: string) => Promise<unknown>;
+}>;
+declare const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps>;
+export default ModelPropertiesTableRow;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelRegistry.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import ApplicationsPage from '~/shared/components/ApplicationsPage';
+type ModelRegistryProps = Omit<React.ComponentProps<typeof ApplicationsPage>, 'title' | 'description' | 'loadError' | 'loaded' | 'provideChildrenPadding' | 'removeChildrenTopPadding' | 'headerContent'>;
+declare const ModelRegistry: React.FC<ModelRegistryProps>;
+export default ModelRegistry;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelRegistrySelector.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type ModelRegistrySelectorProps = {
+    modelRegistry: string;
+    onSelection: (modelRegistry: string) => void;
+    primary?: boolean;
+};
+declare const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps>;
+export default ModelRegistrySelector;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelRegistrySelectorNavigator.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import ModelRegistrySelector from './ModelRegistrySelector';
+type ModelRegistrySelectorNavigatorProps = {
+    getRedirectPath: (namespace: string) => string;
+} & Omit<React.ComponentProps<typeof ModelRegistrySelector>, 'onSelection' | 'modelRegistry'>;
+declare const ModelRegistrySelectorNavigator: React.FC<ModelRegistrySelectorNavigatorProps>;
+export default ModelRegistrySelectorNavigator;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetails.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import ApplicationsPage from '~/shared/components/ApplicationsPage';
+import { ModelVersionDetailsTab } from './const';
+type ModelVersionsDetailProps = {
+    tab: ModelVersionDetailsTab;
+} & Omit<React.ComponentProps<typeof ApplicationsPage>, 'breadcrumb' | 'title' | 'description' | 'loadError' | 'loaded' | 'provideChildrenPadding'>;
+declare const ModelVersionsDetails: React.FC<ModelVersionsDetailProps>;
+export default ModelVersionsDetails;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ModelVersion } from '~/app/types';
+interface ModelVersionsDetailsHeaderActionsProps {
+    mv: ModelVersion;
+    hasDeployment?: boolean;
+}
+declare const ModelVersionsDetailsHeaderActions: React.FC<ModelVersionsDetailsHeaderActionsProps>;
+export default ModelVersionsDetailsHeaderActions;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ModelVersion } from '~/app/types';
+import { ModelVersionDetailsTab } from './const';
+type ModelVersionDetailTabsProps = {
+    tab: ModelVersionDetailsTab;
+    modelVersion: ModelVersion;
+    isArchiveVersion?: boolean;
+    refresh: () => void;
+};
+declare const ModelVersionDetailsTabs: React.FC<ModelVersionDetailTabsProps>;
+export default ModelVersionDetailsTabs;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ModelVersion } from '~/app/types';
+type ModelVersionDetailsViewProps = {
+    modelVersion: ModelVersion;
+    isArchiveVersion?: boolean;
+    refresh: () => void;
+};
+declare const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps>;
+export default ModelVersionDetailsView;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionSelector.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ModelVersion } from '~/app/types';
+type ModelVersionSelectorProps = {
+    rmId?: string;
+    selection: ModelVersion;
+    onSelect: (versionId: string) => void;
+};
+declare const ModelVersionSelector: React.FC<ModelVersionSelectorProps>;
+export default ModelVersionSelector;

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersionDetails/const.d.ts

@@ -0,0 +1,8 @@
+export declare enum ModelVersionDetailsTab {
+    DETAILS = "details",
+    DEPLOYMENTS = "deployments"
+}
+export declare enum ModelVersionDetailsTabTitle {
+    DETAILS = "Details",
+    DEPLOYMENTS = "Deployments"
+}

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/app/pages/modelRegistry/screens/ModelVersions/ModelDetailsView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { RegisteredModel } from '~/app/types';
+type ModelDetailsViewProps = {
+    registeredModel: RegisteredModel;
+    refresh: () => void;
+    isArchiveModel?: boolean;
+};
+declare const ModelDetailsView: React.FC<ModelDetailsViewProps>;
+export default ModelDetailsView;