From a393ea4d686377cb53a0b572e0fe25f557cdda97 Mon Sep 17 00:00:00 2001 From: CKanishka Date: Tue, 22 Aug 2023 23:08:52 +0530 Subject: [PATCH 1/3] fix(FE/logs): enable horizontal scroll in logs context --- .../src/components/Logs/RawLogView/index.tsx | 11 ++++++++++- .../src/components/Logs/RawLogView/styles.ts | 16 ++++++++++------ frontend/src/container/LogsContextList/index.tsx | 8 +++++++- .../src/container/LogsExplorerContext/index.tsx | 12 ++++++++++-- .../src/container/LogsExplorerContext/styles.ts | 4 ++++ 5 files changed, 41 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index e926e73643..42c7aae4ae 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -37,12 +37,19 @@ const convert = new Convert(); interface RawLogViewProps { isActiveLog?: boolean; isReadOnly?: boolean; + isTextOverflowEllipsisDisabled?: boolean; data: ILog; linesPerRow: number; } function RawLogView(props: RawLogViewProps): JSX.Element { - const { isActiveLog = false, isReadOnly = false, data, linesPerRow } = props; + const { + isActiveLog = false, + isReadOnly = false, + data, + linesPerRow, + isTextOverflowEllipsisDisabled = false, + } = props; const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink( data.id, @@ -143,6 +150,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element { @@ -181,6 +189,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element { RawLogView.defaultProps = { isActiveLog: false, isReadOnly: false, + isTextOverflowEllipsisDisabled: false, }; export default RawLogView; diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts index b4be783a2a..e47e736d61 100644 --- a/frontend/src/components/Logs/RawLogView/styles.ts +++ b/frontend/src/components/Logs/RawLogView/styles.ts @@ -35,6 +35,7 @@ interface RawLogContentProps { linesPerRow: number; $isReadOnly: boolean; $isActiveLog: boolean; + $isTextOverflowEllipsisDisabled: boolean; } export const RawLogContent = styled.div` @@ -42,12 +43,15 @@ export const RawLogContent = styled.div` font-family: Fira Code, monospace; font-weight: 300; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: ${(props): number => props.linesPerRow}; - line-clamp: ${(props): number => props.linesPerRow}; - -webkit-box-orient: vertical; + ${(props): string => + props.$isTextOverflowEllipsisDisabled + ? 'white-space: nowrap' + : `overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: ${props.linesPerRow}; + line-clamp: ${props.linesPerRow}; + -webkit-box-orient: vertical;`}; font-size: 1rem; line-height: 2rem; diff --git a/frontend/src/container/LogsContextList/index.tsx b/frontend/src/container/LogsContextList/index.tsx index 7037a386aa..25e0414498 100644 --- a/frontend/src/container/LogsContextList/index.tsx +++ b/frontend/src/container/LogsContextList/index.tsx @@ -154,7 +154,13 @@ function LogsContextList({ const getItemContent = useCallback( (_: number, log: ILog): JSX.Element => ( - + ), [], ); diff --git a/frontend/src/container/LogsExplorerContext/index.tsx b/frontend/src/container/LogsExplorerContext/index.tsx index 746148f3d1..0631c78ea6 100644 --- a/frontend/src/container/LogsExplorerContext/index.tsx +++ b/frontend/src/container/LogsExplorerContext/index.tsx @@ -9,7 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode'; import { memo, useCallback, useMemo, useState } from 'react'; import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData'; -import { EditButton, TitleWrapper } from './styles'; +import { EditButton, LogContainer, TitleWrapper } from './styles'; import { LogsExplorerContextProps } from './types'; import useInitialQuery from './useInitialQuery'; @@ -96,7 +96,15 @@ function LogsExplorerContext({ // eslint-disable-next-line react/jsx-props-no-spreading {...contextListParams} /> - + + + ` ? getAlphaColor(themeColors.white)[45] : getAlphaColor(themeColors.black)[45]}; `; + +export const LogContainer = styled.div` + overflow-x: auto; +`; From d41805a3b0e7572d95fde6e3304b664487234d7a Mon Sep 17 00:00:00 2001 From: CKanishka Date: Wed, 23 Aug 2023 11:43:16 +0530 Subject: [PATCH 2/3] refactor(FE/RawLogView): prop destructure at param level --- .../src/components/Logs/RawLogView/index.tsx | 16 +++++------- .../src/components/Logs/RawLogView/styles.ts | 26 +++++++++---------- frontend/src/utils/logs.ts | 4 +-- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index 42c7aae4ae..194ce53d28 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -42,15 +42,13 @@ interface RawLogViewProps { linesPerRow: number; } -function RawLogView(props: RawLogViewProps): JSX.Element { - const { - isActiveLog = false, - isReadOnly = false, - data, - linesPerRow, - isTextOverflowEllipsisDisabled = false, - } = props; - +function RawLogView({ + isActiveLog, + isReadOnly, + data, + linesPerRow, + isTextOverflowEllipsisDisabled, +}: RawLogViewProps): JSX.Element { const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink( data.id, ); diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts index e47e736d61..8e1394af89 100644 --- a/frontend/src/components/Logs/RawLogView/styles.ts +++ b/frontend/src/components/Logs/RawLogView/styles.ts @@ -5,8 +5,8 @@ import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs'; export const RawLogViewContainer = styled(Row)<{ $isDarkMode: boolean; - $isReadOnly: boolean; - $isActiveLog: boolean; + $isReadOnly?: boolean; + $isActiveLog?: boolean; }>` position: relative; width: 100%; @@ -33,9 +33,9 @@ export const ExpandIconWrapper = styled(Col)` interface RawLogContentProps { linesPerRow: number; - $isReadOnly: boolean; - $isActiveLog: boolean; - $isTextOverflowEllipsisDisabled: boolean; + $isReadOnly?: boolean; + $isActiveLog?: boolean; + $isTextOverflowEllipsisDisabled?: boolean; } export const RawLogContent = styled.div` @@ -43,24 +43,24 @@ export const RawLogContent = styled.div` font-family: Fira Code, monospace; font-weight: 300; - ${(props): string => - props.$isTextOverflowEllipsisDisabled + ${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string => + $isTextOverflowEllipsisDisabled ? 'white-space: nowrap' : `overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-line-clamp: ${props.linesPerRow}; - line-clamp: ${props.linesPerRow}; + -webkit-line-clamp: ${linesPerRow}; + line-clamp: ${linesPerRow}; -webkit-box-orient: vertical;`}; font-size: 1rem; line-height: 2rem; - cursor: ${(props): string => - props.$isActiveLog || props.$isReadOnly ? 'initial' : 'pointer'}; + cursor: ${({ $isActiveLog, $isReadOnly }): string => + $isActiveLog || $isReadOnly ? 'initial' : 'pointer'}; - ${(props): string => - props.$isReadOnly && !props.$isActiveLog ? 'padding: 0 1.5rem;' : ''} + ${({ $isActiveLog, $isReadOnly }): string => + $isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''} `; export const ActionButtonsWrapper = styled(Space)` diff --git a/frontend/src/utils/logs.ts b/frontend/src/utils/logs.ts index 66a6ba28a6..bfe79a3177 100644 --- a/frontend/src/utils/logs.ts +++ b/frontend/src/utils/logs.ts @@ -3,8 +3,8 @@ import { themeColors } from 'constants/theme'; import getAlphaColor from 'utils/getAlphaColor'; export const getDefaultLogBackground = ( - isReadOnly: boolean, - isDarkMode: boolean, + isReadOnly?: boolean, + isDarkMode?: boolean, ): string => { if (isReadOnly) return ''; return `&:hover { From a37476a09b35f5e4ba0cc5d440775b20e1d43aba Mon Sep 17 00:00:00 2001 From: CKanishka Date: Wed, 23 Aug 2023 11:49:05 +0530 Subject: [PATCH 3/3] refactor(FE/RawLogView): move types to seperate file --- .../src/components/Logs/RawLogView/index.tsx | 11 +---------- .../src/components/Logs/RawLogView/styles.ts | 9 ++------- frontend/src/components/Logs/RawLogView/types.ts | 16 ++++++++++++++++ 3 files changed, 19 insertions(+), 17 deletions(-) create mode 100644 frontend/src/components/Logs/RawLogView/types.ts diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index 194ce53d28..7c630a2939 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -21,8 +21,6 @@ import { useMemo, useState, } from 'react'; -// interfaces -import { ILog } from 'types/api/logs/log'; // styles import { @@ -31,17 +29,10 @@ import { RawLogContent, RawLogViewContainer, } from './styles'; +import { RawLogViewProps } from './types'; const convert = new Convert(); -interface RawLogViewProps { - isActiveLog?: boolean; - isReadOnly?: boolean; - isTextOverflowEllipsisDisabled?: boolean; - data: ILog; - linesPerRow: number; -} - function RawLogView({ isActiveLog, isReadOnly, diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts index 8e1394af89..4944d05f74 100644 --- a/frontend/src/components/Logs/RawLogView/styles.ts +++ b/frontend/src/components/Logs/RawLogView/styles.ts @@ -3,6 +3,8 @@ import { Col, Row, Space } from 'antd'; import styled from 'styled-components'; import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs'; +import { RawLogContentProps } from './types'; + export const RawLogViewContainer = styled(Row)<{ $isDarkMode: boolean; $isReadOnly?: boolean; @@ -31,13 +33,6 @@ export const ExpandIconWrapper = styled(Col)` font-size: 12px; `; -interface RawLogContentProps { - linesPerRow: number; - $isReadOnly?: boolean; - $isActiveLog?: boolean; - $isTextOverflowEllipsisDisabled?: boolean; -} - export const RawLogContent = styled.div` margin-bottom: 0; font-family: Fira Code, monospace; diff --git a/frontend/src/components/Logs/RawLogView/types.ts b/frontend/src/components/Logs/RawLogView/types.ts new file mode 100644 index 0000000000..2c70c0ddb2 --- /dev/null +++ b/frontend/src/components/Logs/RawLogView/types.ts @@ -0,0 +1,16 @@ +import { ILog } from 'types/api/logs/log'; + +export interface RawLogViewProps { + isActiveLog?: boolean; + isReadOnly?: boolean; + isTextOverflowEllipsisDisabled?: boolean; + data: ILog; + linesPerRow: number; +} + +export interface RawLogContentProps { + linesPerRow: number; + $isReadOnly?: boolean; + $isActiveLog?: boolean; + $isTextOverflowEllipsisDisabled?: boolean; +}