Merge pull request janus-idp#55 from thefrontside/pc/remove-height-pe…

…rcentages remove height defined in precise percentages
mareklibra · Mar 17, 2023 · 5c1d514 · 5c1d514
2 parents c004df3 + 4dce4e1
commit 5c1d514
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 12 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -43,7 +43,7 @@
     "@backstage/plugin-techdocs-react": "^1.1.3",
     "@backstage/plugin-user-settings": "^0.7.0",
     "@backstage/theme": "^0.2.17",
-    "@parodos/plugin-parodos": "^0.1.0",
+    "@parodos/plugin-parodos": "^0.2.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",

diff --git a/plugins/parodos/src/components/workflow/workflowDetail/WorkFlowDetail.tsx b/plugins/parodos/src/components/workflow/workflowDetail/WorkFlowDetail.tsx
@@ -4,7 +4,7 @@ import {
   Progress,
   SupportButton,
 } from '@backstage/core-components';
-import { Chip, Typography } from '@material-ui/core';
+import { Box, Chip, makeStyles, Typography } from '@material-ui/core';
 import { WorkFlowLogViewer } from './WorkFlowLogViewer';
 import React, { useEffect, useState } from 'react';
 import { WorkFlowStepper } from './topology/WorkFlowStepper';
@@ -14,6 +14,26 @@ import * as urls from '../../../urls';
 import { useBackendUrl } from '../../api';
 import { WorkflowTask } from '../../../models/workflowTaskSchema';
 
+const useStyles = makeStyles(_theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  badge: {
+    alignSelf: 'flex-start',
+  },
+  detailContainer: {
+    flex: 1,
+    display: 'grid',
+    gridTemplateRows: '1fr 1fr',
+    minHeight: 0,
+  },
+  viewerContainer: {
+    display: 'grid',
+    minHeight: 0,
+  },
+}));
+
 export const WorkFlowDetail = () => {
   const { executionId } = useParams();
   const { state } = useLocation();
@@ -23,6 +43,7 @@ export const WorkFlowDetail = () => {
   const [log, setLog] = useState<string>(``);
   const [countlog, setCountlog] = useState<number>(0);
   const backendUrl = useBackendUrl();
+  const styles = useStyles();
 
   const getSelectedTaskLog = React.useCallback(
     (templog: string) => {
@@ -79,20 +100,31 @@ export const WorkFlowDetail = () => {
   }, [countlog, executionId, getSelectedTaskLog, selectedTask]);
 
   return (
-    <ParodosPage>
-      {isNew && <Chip label="New application" color="secondary" />}
+    <ParodosPage className={styles.container}>
+      {isNew && (
+        <Chip
+          className={styles.badge}
+          label="New application"
+          color="secondary"
+        />
+      )}
       <ContentHeader title="Onboarding">
         <SupportButton title="Need help?">Lorem Ipsum</SupportButton>
       </ContentHeader>
       <Typography paragraph>
         You are onboarding: org-name/new-project. Execution Id is {executionId}
       </Typography>
-      {allTasks.length > 0 ? (
-        <WorkFlowStepper tasks={allTasks} setSelectedTask={setSelectedTask} />
-      ) : (
-        <Progress />
-      )}
-      {log !== '' && <WorkFlowLogViewer log={log} />}
+
+      <Box className={styles.detailContainer}>
+        {allTasks.length > 0 ? (
+          <WorkFlowStepper tasks={allTasks} setSelectedTask={setSelectedTask} />
+        ) : (
+          <Progress />
+        )}
+        <div className={styles.viewerContainer}>
+          {log !== '' && <WorkFlowLogViewer log={log} />}
+        </div>
+      </Box>
     </ParodosPage>
   );
 };
diff --git a/plugins/parodos/src/components/workflow/workflowDetail/WorkFlowLogViewer.tsx b/plugins/parodos/src/components/workflow/workflowDetail/WorkFlowLogViewer.tsx
@@ -14,7 +14,7 @@ const ParodosLogViewer = withStyles(theme => ({
 }))(LogViewer);
 
 export const WorkFlowLogViewer = ({ log }: { log: string }) => (
-  <div style={{ height: '43%' }}>
+  <div>
     <ParodosLogViewer text={log} />
   </div>
 );
diff --git a/plugins/parodos/src/components/workflow/workflowDetail/topology/WorkFlowStepper.tsx b/plugins/parodos/src/components/workflow/workflowDetail/topology/WorkFlowStepper.tsx
@@ -8,7 +8,6 @@ import { WorkflowTask } from '../../../../models/workflowTaskSchema';
 const useStyles = makeStyles(theme => ({
   pfRi__topologyDemo: {
     width: '100%',
-    height: '35%',
     '& .pf-topology-visualization-surface__svg': {
       background: theme.palette.background.default,
     },

diff --git a/yarn.lock b/yarn.lock
@@ -6061,6 +6061,38 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.4.0.tgz#2c91791a9ba6ca0a0f4aaac5e45d58df13639ac8"
   integrity sha512-IgMK9i3sFGNUqPMbjABm0G26g0QCKCUBfglhQ7rQq6WcxbKfEHRcmwsoER4hZcuYqJgkYn2OeuoJIv7Jsftp7g==
 
+"@parodos/plugin-parodos@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@parodos/plugin-parodos/-/plugin-parodos-0.1.0.tgz#34aebd4732e9148afde87a831d94876e69e7495f"
+  integrity sha512-pzc/U0GpaDH/4KtabuduUQ3zpTWjSS2F9hVMhFk4kfEXoy6QUqSv/AKsyLhKwH7N225jBJfvqKrR6lgSdeU4Gw==
+  dependencies:
+    "@backstage/core-components" "^0.12.4"
+    "@backstage/core-plugin-api" "^1.4.0"
+    "@backstage/theme" "^0.2.17"
+    "@backstage/types" "^1.0.2"
+    "@emotion/react" "^11.10.6"
+    "@emotion/styled" "^11.10.6"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.57"
+    "@mui/icons-material" "^5.11.11"
+    "@mui/material" "^5.11.12"
+    "@patternfly/react-core" "^4.276.6"
+    "@patternfly/react-icons" "^4.93.6"
+    "@patternfly/react-styles" "^4.92.6"
+    "@patternfly/react-topology" "^4.91.27"
+    "@rjsf/core" "^5.2.0"
+    "@rjsf/core-v5" "npm:@rjsf/[email protected]"
+    "@rjsf/material-ui-v5" "npm:@rjsf/[email protected]"
+    "@rjsf/mui" "^5.2.0"
+    "@rjsf/utils" "^5.2.0"
+    "@rjsf/validator-ajv8" "^5.2.0"
+    assert-ts "^0.3.4"
+    mobx "^5.15.4"
+    mobx-react "^6.2.0"
+    react-use "^17.2.4"
+    zod "^3.21.4"
+
 "@patternfly/react-core@^4.276.6":
   version "4.276.6"
   resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.6.tgz#fa39aa61022f70bf350b2efc660bdeb096bda447"