Tweak UI to point at MR installation

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

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelRegistry.cy.ts

@@ -188,14 +188,15 @@ describe('Model Registry core', () => {
     modelRegistry.findDetailsPopover().findByText('No description').should('exist');
 
     //  Model registry help content
-    modelRegistry.findHelpContentButton().click();
-    modelRegistry.findHelpContentPopover().should('exist');
-    modelRegistry
-      .findHelpContentPopover()
-      .findByText(
-        'To request access to a new or existing model registry, contact your administrator.',
-      )
-      .should('exist');
+    modelRegistry.findHelpContentButton().should('exist');
+    // modelRegistry.findHelpContentButton().click(); TODO: Get conditional render depnding on the style
+    // modelRegistry.findHelpContentPopover().should('exist');
+    // modelRegistry
+    //   .findHelpContentPopover()
+    //   .findByText(
+    //     'To request access to a new or existing model registry, contact your administrator.',
+    //   )
+    //   .should('exist');
   });
 
   describe('Registered model table', () => {

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

@@ -8,6 +8,7 @@ import { ModelRegistryContextProvider } from '~/app/context/ModelRegistryContext
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
 import WhosMyAdministrator from '~/shared/components/WhosMyAdministrator';
 import { isMUITheme } from '~/shared/utilities/const';
+import KubeflowDocs from '~/shared/components/KubeflowDocs';
 import EmptyModelRegistryState from './screens/components/EmptyModelRegistryState';
 import InvalidModelRegistry from './screens/InvalidModelRegistry';
 import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator';
@@ -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,21 @@ 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?"
+            linkTestId="model-registry-help-button"
+          />
+        ) : (
+          <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;