Tweak UI to point at MR installation

Signed-off-by: lucferbux <[email protected]>

clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryCoreLoader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Navigate, Outlet, useParams } from 'react-router-dom';
-import { Bullseye, Alert, Divider } from '@patternfly/react-core';
+import { Bullseye, Alert, Divider, Button } from '@patternfly/react-core';
 import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import { ModelRegistrySelectorContext } from '~/app/context/ModelRegistrySelectorContext';
 import { ProjectObjectType, typedEmptyImage } from '~/shared/components/design/utils';
@@ -12,6 +12,7 @@ import EmptyModelRegistryState from './screens/components/EmptyModelRegistryStat
 import InvalidModelRegistry from './screens/InvalidModelRegistry';
 import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator';
 import { modelRegistryUrl } from './screens/routeUtils';
+import KubeflowDocs from '~/shared/components/KubeflowDocs';
 
 type ApplicationPageProps = React.ComponentProps<typeof ApplicationsPage>;
 
@@ -64,12 +65,16 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
       emptyStatePage: (
         <EmptyModelRegistryState
           testid="empty-model-registries-state"
-          title="Request access to model registries"
-          description="To request a new model registry, or to request permission to access an existing model registry, contact your administrator."
+          title={isMUITheme() ? 'Deploy a model registry' : 'Request access to model registries'}
+          description={
+            isMUITheme()
+              ? 'To deploy a new model registry, follow the instructions in the docs below.'
+              : 'To request a new model registry, or to request permission to access an existing model registry, contact your administrator.'
+          }
           headerIcon={() => (
             <img src={typedEmptyImage(ProjectObjectType.registeredModels)} alt="" />
           )}
-          customAction={<WhosMyAdministrator />}
+          customAction={isMUITheme() ? <KubeflowDocs /> : <WhosMyAdministrator />}
         />
       ),
       headerContent: null,

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistrySelector.tsx

@@ -21,6 +21,8 @@ import { ModelRegistrySelectorContext } from '~/app/context/ModelRegistrySelecto
 import { ModelRegistry } from '~/app/types';
 import SimpleSelect, { SimpleSelectOption } from '~/shared/components/SimpleSelect';
 import WhosMyAdministrator from '~/shared/components/WhosMyAdministrator';
+import { isMUITheme } from '~/shared/utilities/const';
+import KubeflowDocs from '~/shared/components/KubeflowDocs';
 
 const MODEL_REGISTRY_FAVORITE_STORAGE_KEY = 'kubeflow.dashboard.model.registry.favorite';
 
@@ -169,14 +171,18 @@ const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps> = ({
         </FlexItem>
       )}
       <FlexItem align={{ default: 'alignRight' }}>
-        <WhosMyAdministrator
-          buttonLabel="Need another registry?"
-          headerContent="Need another registry?"
-          leadText="To request access to a new or existing model registry, contact your administrator."
-          contentTestId="model-registry-help-content"
-          linkTestId="model-registry-help-button"
-          popoverPosition={PopoverPosition.left}
-        />
+        {isMUITheme() ? (
+          <KubeflowDocs buttonLabel="Need another registry?" />
+        ) : (
+          <WhosMyAdministrator
+            buttonLabel="Need another registry?"
+            headerContent="Need another registry?"
+            leadText="To request access to a new or existing model registry, contact your administrator."
+            contentTestId="model-registry-help-content"
+            linkTestId="model-registry-help-button"
+            popoverPosition={PopoverPosition.left}
+          />
+        )}
       </FlexItem>
     </Flex>
   );

clients/ui/frontend/src/shared/components/KubeflowDocs.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+
+type Props = {
+  buttonLabel?: string;
+  dockLinks?: string;
+  isInline?: boolean;
+  linkTestId?: string;
+};
+
+const KubeflowDocs: React.FC<Props> = ({
+  buttonLabel = 'Kubeflow Docs',
+  dockLinks = 'https://www.kubeflow.org/docs/components/model-registry/installation/#installing-model-registry',
+  isInline,
+  linkTestId,
+}) => (
+  <Button
+    isInline={isInline}
+    variant="link"
+    icon={<OutlinedQuestionCircleIcon />}
+    data-testid={linkTestId}
+    onClick={() => {
+      window.open(dockLinks);
+    }}
+  >
+    {buttonLabel}
+  </Button>
+);
+
+export default KubeflowDocs;