fix: add full height to FrameCodeBlock (#3421)

kubeshop · Dec 4, 2023 · a4c4cda · a4c4cda
1 parent 823b712
commit a4c4cda
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 20 deletions.
diff --git a/web/src/components/CodeBlock/CodeBlock.styled.ts b/web/src/components/CodeBlock/CodeBlock.styled.ts
@@ -1,7 +1,7 @@
 import {Button, Typography} from 'antd';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 
-export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}>`
+export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string; $isFullHeight?: boolean}>`
   position: relative;
   min-height: ${({$minHeight}) => $minHeight || '370px'};
 
@@ -17,11 +17,28 @@ export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}
       background: ${({theme}) => theme.color.backgroundInteractive} !important;
     }
   }
+
+  ${({$isFullHeight}) =>
+    $isFullHeight &&
+    css`
+      height: calc(100% - 49px);
+
+      pre {
+        max-height: 100%;
+      }
+    `}
 `;
 
-export const FrameContainer = styled.div`
+export const FrameContainer = styled.div<{$isFullHeight?: boolean}>`
   position: relative;
+
+  ${({$isFullHeight}) =>
+    $isFullHeight &&
+    css`
+      height: calc(100% - 72px);
+    `}
 `;
+
 export const FrameHeader = styled.div`
   display: flex;
   justify-content: space-between;

diff --git a/web/src/components/CodeBlock/CodeBlock.tsx b/web/src/components/CodeBlock/CodeBlock.tsx
@@ -10,6 +10,7 @@ export interface IProps {
   mimeType?: string;
   maxHeight?: string;
   minHeight?: string;
+  isFullHeight?: boolean;
   className?: string;
 }
 
@@ -33,7 +34,15 @@ const formatValue = (value: string, lang?: string): string => {
   }
 };
 
-const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = '', className = ''}: IProps) => {
+const CodeBlock = ({
+  value,
+  language,
+  mimeType = '',
+  maxHeight = '',
+  minHeight = '',
+  isFullHeight,
+  className = '',
+}: IProps) => {
   const lang = useMemo(() => language || getLanguage(mimeType), [language, mimeType]);
 
   // SyntaxHighlighter has a performance problem, so we need to memoize it
@@ -48,7 +57,13 @@ const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight =
   );
 
   return (
-    <S.CodeContainer className={className} data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight}>
+    <S.CodeContainer
+      className={className}
+      data-cy="code-block"
+      $maxHeight={maxHeight}
+      $minHeight={minHeight}
+      $isFullHeight={isFullHeight}
+    >
       {memoizedHighlighter}
     </S.CodeContainer>
   );

diff --git a/web/src/components/CodeBlock/FramedCodeBlock.tsx b/web/src/components/CodeBlock/FramedCodeBlock.tsx
@@ -11,7 +11,7 @@ const FramedCodeBlock = ({title, actions, ...props}: IProps) => {
   const copy = useCopy();
 
   return (
-    <S.FrameContainer>
+    <S.FrameContainer $isFullHeight={props.isFullHeight}>
       <S.FrameHeader>
         <S.FrameTitle>{title}</S.FrameTitle>
         <S.ActionsContainer>

diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.styled.ts b/web/src/components/RunDetailAutomate/RunDetailAutomate.styled.ts
@@ -11,7 +11,6 @@ export const Section = styled.div`
   background-color: ${({theme}) => theme.color.white};
   overflow-y: scroll;
   flex-basis: 50%;
-  max-width: 50vw;
 `;
 
 export const SectionLeft = styled(Section)`

diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
@@ -2,6 +2,7 @@ import {Typography} from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100%;
   padding: 24px;
 `;
 
@@ -12,12 +13,6 @@ export const Title = styled(Typography.Title)`
   }
 `;
 
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-`;
-
 export const FileName = styled.div`
   margin-bottom: 14px;
 `;
diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
@@ -33,12 +33,18 @@ const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFil
       <S.FileName>
         <Overlay value={fileName} onChange={onFileNameChange} />
       </S.FileName>
-      <FramedCodeBlock title="Preview your YAML file" value={definition} language="yaml" />
-      <S.Footer>
-        <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
-          Download File
-        </Button>
-      </S.Footer>
+
+      <FramedCodeBlock
+        title="Preview your YAML file"
+        value={definition}
+        language="yaml"
+        actions={
+          <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
+            Download File
+          </Button>
+        }
+        isFullHeight
+      />
     </S.Container>
   );
 };

diff --git a/web/src/components/RunDetailLayout/RunDetailLayout.styled.ts b/web/src/components/RunDetailLayout/RunDetailLayout.styled.ts
@@ -9,7 +9,7 @@ export const BackIcon = styled(LeftOutlined)`
 `;
 
 export const Container = styled.div`
-  height: 100vh;
+  height: 100%;
 
   .run-tabs.ant-tabs,
   .run-tabs.ant-tabs .ant-tabs-content {