feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod template tab #173 #197
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here.
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
| isLineNumbersVisible | ||
| isFullHeight | ||
| isReadOnly | ||
| code={podTemplateYaml || '# No podTemplate data available'} |
There was a problem hiding this comment.
| code={podTemplateYaml || '# No podTemplate data available'} | |
| code={podTemplateYaml || '# No pod template data available'} |
| @@ -72,7 +73,9 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> = | |||
| aria-label="Pod template" | |||
| > | |||
| <TabContent id="podTemplateBodyPadding"> | |||
| <TabContentBody hasPadding>Pod template</TabContentBody> | |||
| <TabContentBody hasPadding style={{ height: '500px' }}> | |||
There was a problem hiding this comment.
Ideally, the tab content body should fill the remaining height of the drawer until the bottom of the drawer, while keeping the scroll in the code editor.
There was a problem hiding this comment.
@liavweiss great work on this! I've added a suggested workaround below to fix the issue you were running into with the drawer height.
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsPodTemplate.tsx
Show resolved
Hide resolved
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
Outdated
Show resolved
Hide resolved
…late tab kubeflow#173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]>
…late tab kubeflow#173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]>
liavweiss
force-pushed
the
pod_template/#173
branch
from
80a8464 to
26ce0e8
Compare
|
After help from Jenny, and fixed all comments I ran manually in my local branch
|
There was a problem hiding this comment.
Hi @liavweiss @jenny-s51 , thanks for the PR and changes. I tried it locally, and I get the behavior below. Was the code editor supposed to adjust its height to align with the bottom of the screen?
codeeditorheight.webm
| @@ -94,10 +94,13 @@ | |||
| "webpack-merge": "^5.10.0" | |||
| }, | |||
| "dependencies": { | |||
| "@patternfly/react-code-editor": "^6.1.0", | |||
There was a problem hiding this comment.
Probably best to keep it at 6.0.0 atm to align with the other PatternFly dependencies.
| "@patternfly/react-code-editor": "^6.1.0", | |
| "@patternfly/react-code-editor": "^6.0.0", |
| <TabContentBody hasPadding> | ||
| <WorkspaceDetailsPodTemplate /> | ||
| </TabContentBody> |
There was a problem hiding this comment.
| <TabContentBody hasPadding> | |
| <WorkspaceDetailsPodTemplate /> | |
| </TabContentBody> | |
| <TabContentBody className="pf-v6-u-h-100" hasPadding> | |
| <WorkspaceDetailsPodTemplate codeEditorHeight="100%" /> | |
| </TabContentBody> |
| @@ -72,7 +73,9 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> = | |||
| aria-label="Pod template" | |||
| > | |||
| <TabContent id="podTemplateBodyPadding"> | |||
There was a problem hiding this comment.
| <TabContent id="podTemplateBodyPadding"> | |
| <TabContent style={{ flex: 1 }} className="pf-v6-u-h-100" id="podTemplateBodyPadding"> | |
As requested I added a code editor for the Pod Template section under the workspace details.
The editor will display the all yaml (mocked in the code) as read-only and will utilize the full height of its parent.