Auto scroll on expanding deployed models tab and auto expand when dep…

…loying models

frontend/src/components/ScrollViewOnMount.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
 
-const ScrollViewOnMount: React.FC = () => (
-  <div
-    ref={(elm) => {
-      if (elm) {
-        elm.scrollIntoView();
-      }
-    }}
-  />
-);
+type ScrollViewOnMountProps = {
+  shouldScroll: boolean;
+};
+
+const ScrollViewOnMount: React.FC<ScrollViewOnMountProps> = ({ shouldScroll }) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (shouldScroll && ref.current) {
+      ref.current?.scrollIntoView();
+    }
+  }, [shouldScroll]);
+
+  return <div ref={ref} />;
+};
 
 export default ScrollViewOnMount;

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTable.tsx

@@ -3,6 +3,7 @@ import Table from '~/components/table/Table';
 import useTableColumnSort from '~/components/table/useTableColumnSort';
 import { ServingRuntimeKind } from '~/k8sTypes';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
+import { ServingRuntimeTableTabs } from '~/pages/modelServing/screens/types';
 import { columns } from './data';
 import ServingRuntimeTableRow from './ServingRuntimeTableRow';
 import DeleteServingRuntimeModal from './DeleteServingRuntimeModal';
@@ -25,6 +26,7 @@ const ServingRuntimeTable: React.FC<ServingRuntimeTableProps> = ({
   const [deployServingRuntime, setDeployServingRuntime] = React.useState<ServingRuntimeKind>();
   const [deleteServingRuntime, setDeleteServingRuntime] = React.useState<ServingRuntimeKind>();
   const [editServingRuntime, setEditServingRuntime] = React.useState<ServingRuntimeKind>();
+  const [expandedColumn, setExpandedColumn] = React.useState<ServingRuntimeTableTabs>();
 
   const {
     dataConnections: { data: dataConnections },
@@ -48,7 +50,9 @@ const ServingRuntimeTable: React.FC<ServingRuntimeTableProps> = ({
             obj={modelServer}
             onDeleteServingRuntime={(obj) => setDeleteServingRuntime(obj)}
             onEditServingRuntime={(obj) => setEditServingRuntime(obj)}
-            onDeployModal={(obj) => setDeployServingRuntime(obj)}
+            onDeployModel={(obj) => setDeployServingRuntime(obj)}
+            expandedColumn={expandedColumn}
+            setExpandedColumn={setExpandedColumn}
           />
         )}
       />
@@ -86,6 +90,7 @@ const ServingRuntimeTable: React.FC<ServingRuntimeTableProps> = ({
             setDeployServingRuntime(undefined);
             if (submit) {
               refreshInferenceServices();
+              setExpandedColumn(ServingRuntimeTableTabs.DEPLOYED_MODELS);
             }
           }}
           projectContext={{

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableExpandedSection.tsx

@@ -59,7 +59,9 @@ const ServingRuntimeTableExpandedSection: React.FC<ServingRuntimeTableExpandedSe
           ) : (
             <EmptyInferenceServicesCell onDeployModel={onDeployModel} />
           )}
-          <ScrollViewOnMount />
+          <ScrollViewOnMount
+            shouldScroll={activeColumn === ServingRuntimeTableTabs.DEPLOYED_MODELS}
+          />
         </ExpandableRowContent>
       </Td>
     );

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx

@@ -15,17 +15,19 @@ type ServingRuntimeTableRowProps = {
   obj: ServingRuntimeKind;
   onDeleteServingRuntime: (obj: ServingRuntimeKind) => void;
   onEditServingRuntime: (obj: ServingRuntimeKind) => void;
-  onDeployModal: (obj: ServingRuntimeKind) => void;
+  onDeployModel: (obj: ServingRuntimeKind) => void;
+  expandedColumn?: ServingRuntimeTableTabs;
+  setExpandedColumn: (column?: ServingRuntimeTableTabs) => void;
 };
 
 const ServingRuntimeTableRow: React.FC<ServingRuntimeTableRowProps> = ({
   obj,
   onDeleteServingRuntime,
   onEditServingRuntime,
-  onDeployModal,
+  onDeployModel,
+  expandedColumn,
+  setExpandedColumn,
 }) => {
-  const [expandedColumn, setExpandedColumn] = React.useState<ServingRuntimeTableTabs | undefined>();
-
   const {
     inferenceServices: {
       data: inferenceServices,
@@ -118,7 +120,7 @@ const ServingRuntimeTableRow: React.FC<ServingRuntimeTableRowProps> = ({
         </Td>
         <Td style={{ textAlign: 'end' }}>
           <Button
-            onClick={() => onDeployModal(obj)}
+            onClick={() => onDeployModel(obj)}
             key={`action-${ProjectSectionID.CLUSTER_STORAGES}`}
             variant="secondary"
           >
@@ -145,7 +147,7 @@ const ServingRuntimeTableRow: React.FC<ServingRuntimeTableRowProps> = ({
           activeColumn={expandedColumn}
           obj={obj}
           onClose={() => setExpandedColumn(undefined)}
-          onDeployModel={() => onDeployModal(obj)}
+          onDeployModel={() => onDeployModel(obj)}
         />
       </Tr>
     </Tbody>