feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod temp…

…late tab #173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]>
kubeflow · Feb 12, 2025 · 26ce0e8 · 26ce0e8
1 parent 3bcb463
commit 26ce0e8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
@@ -73,7 +73,7 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
             aria-label="Pod template"
           >
             <TabContent id="podTemplateBodyPadding">
-              <TabContentBody hasPadding style={{ height: '500px' }}>
+              <TabContentBody hasPadding>
                 <WorkspaceDetailsPodTemplate />
               </TabContentBody>
             </TabContent>

diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsPodTemplate.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsPodTemplate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { CodeEditor, CodeEditorProps, Language } from '@patternfly/react-code-editor';
 import yaml from 'js-yaml';
 
 const mockYaml = `apiVersion: kubeflow.org/v1beta1
@@ -23,18 +23,28 @@ spec:
     options:
       imageConfig: "jupyterlab_scipy_190"
       podConfig: "tiny_cpu"`;
-
-export const WorkspaceDetailsPodTemplate: React.FunctionComponent = () => {
-  const parsedYaml = yaml.load(mockYaml);
-  const podTemplateYaml = yaml.dump(parsedYaml || {});
-
-  return (
+type WorkspaceDetailsPodTemplateProps = Omit<CodeEditorProps, 'ref'> & {
+  testId?: string;
+  codeEditorHeight?: string;
+};
+const parsedYaml = yaml.load(mockYaml);
+const podTemplateYaml = yaml.dump(parsedYaml || {});
+export const WorkspaceDetailsPodTemplate: React.FC<Partial<WorkspaceDetailsPodTemplateProps>> = ({
+  // 38px is the code editor toolbar height+border
+  // calculate the div height to avoid container scrolling
+  height = 'calc(100% - 38px)',
+  codeEditorHeight = '650px',
+  ...props
+}) => (
+  <div data-testid={props.testId} style={{ height, padding: '14px' }}>
     <CodeEditor
       isLineNumbersVisible
-      isFullHeight
       isReadOnly
-      code={podTemplateYaml || '# No podTemplate data available'}
+      isDownloadEnabled
+      code={podTemplateYaml || '# No pod template data available'}
+      height={codeEditorHeight}
       language={Language.yaml}
+      {...props}
     />
-  );
-};
+  </div>
+);