From 60769244dfc701aafe90f49357c2b4af505526bc Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Thu, 5 Dec 2024 19:01:51 -0800 Subject: [PATCH 1/7] feat(sqllab): giving the query history pane a facelift Fixing some styling and UI components in the query history pane in SQL Lab --- .../src/SqlLab/actions/sqlLab.js | 5 +- .../SqlLab/components/QueryTable/index.tsx | 53 +++++++++++-------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js index 568dbb9b1f997..b639d5ca9c9ad 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.js +++ b/superset-frontend/src/SqlLab/actions/sqlLab.js @@ -384,6 +384,7 @@ export function runQueryFromSqlEditor( ctas, ctasMethod, ) { + console.log('YOYO', queryEditor); return function (dispatch, getState) { const qe = getUpToDateQuery(getState(), queryEditor, queryEditor.id); const query = { @@ -421,9 +422,7 @@ export function postStopQuery(query) { }) .then(() => dispatch(stopQuery(query))) .then(() => dispatch(addSuccessToast(t('Query was stopped.')))) - .catch(() => - dispatch(addDangerToast(t('Failed at stopping query. %s', query.id))), - ); + .catch(() => dispatch(addDangerToast(t('Failed at stopping query.')))); }; } diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx index 916c04aece109..1d132cb22dc3f 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx @@ -35,6 +35,7 @@ import TableView from 'src/components/TableView'; import Button from 'src/components/Button'; import { fDuration } from 'src/utils/dates'; import Icons from 'src/components/Icons'; +import Label from 'src/components/Label'; import { Tooltip } from 'src/components/Tooltip'; import { SqlLabRootState } from 'src/SqlLab/types'; import ModalTrigger from 'src/components/ModalTrigger'; @@ -125,49 +126,52 @@ const QueryTable = ({ const statusAttributes = { success: { config: { - icon: , + icon: , + //icon: , label: t('Success'), }, }, failed: { config: { - icon: , + icon: , label: t('Failed'), }, }, stopped: { config: { - icon: , + icon: , label: t('Failed'), }, }, running: { config: { - icon: , + icon: , label: t('Running'), }, }, fetching: { config: { - icon: , + icon: ( + + ), label: t('Fetching'), }, }, timed_out: { config: { - icon: , + icon: , label: t('Offline'), }, }, scheduled: { config: { - icon: , + icon: , label: t('Scheduled'), }, }, pending: { config: { - icon: , + icon: , label: t('Scheduled'), }, }, @@ -187,16 +191,14 @@ const QueryTable = ({ const status = statusAttributes[state] || statusAttributes.error; if (q.endDttm) { - q.duration = fDuration(q.startDttm, q.endDttm); + q.duration = ( + + ); } - const time = moment(q.startDttm).format().split('T'); - q.time = ( -
- - {time[0]}
{time[1]} - -
- ); q.user = ( } modalTitle={t('Data preview')} beforeOpen={() => openAsyncResults(query, displayLimit)} @@ -275,9 +281,7 @@ const QueryTable = ({ ); q.state = ( - - {status.config.icon} - + {status.config.icon} ); q.actions = (
@@ -287,6 +291,7 @@ const QueryTable = ({ 'Overwrite text in the editor with a query on this table', )} placement="top" + className="pointer" > @@ -294,6 +299,7 @@ const QueryTable = ({ onClick={() => openQueryInNewTab(query)} tooltip={t('Run query in a new tab')} placement="top" + className="pointer" > @@ -301,6 +307,7 @@ const QueryTable = ({ dispatch(removeQuery(query))} + className="pointer" > From 3cffdb24b319d942a490ae4cdf14c7ff4bdc2341 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Thu, 5 Dec 2024 19:13:43 -0800 Subject: [PATCH 2/7] improve storybook to show names by default --- .../src/components/Icons/Icons.stories.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx index db7410ca6276d..5a21daf5fb7b7 100644 --- a/superset-frontend/src/components/Icons/Icons.stories.tsx +++ b/superset-frontend/src/components/Icons/Icons.stories.tsx @@ -44,10 +44,19 @@ const IconBlock = styled.div` flex-direction: column; align-items: center; padding: ${({ theme }) => theme.gridUnit * 2}px; + + span { + margin-top: ${({ theme }) => + 2 * theme.gridUnit}px; // Add spacing between icon and name + font-size: ${({ theme }) => + theme.typography.sizes.m}; // Optional: adjust font size for elegance + color: ${({ theme }) => + theme.colors.grayscale.base}; // Optional: subtle color for the name + } `; export const InteractiveIcons = ({ - showNames, + showNames = true, ...rest }: IconType & { showNames: boolean }) => ( @@ -56,7 +65,7 @@ export const InteractiveIcons = ({ return ( - {showNames && k} + {showNames && {k}} ); })} From b9399283c000b9bcd2f702a87b13324f92cc9dba Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Fri, 6 Dec 2024 11:37:59 -0800 Subject: [PATCH 3/7] add monospace prop to Label --- superset-frontend/src/components/Label/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx index 30f3ca6aeda69..7391862f80c32 100644 --- a/superset-frontend/src/components/Label/index.tsx +++ b/superset-frontend/src/components/Label/index.tsx @@ -46,12 +46,20 @@ export interface LabelProps extends HTMLAttributes { style?: CSSProperties; children?: ReactNode; role?: string; + monospace?: boolean; } export default function Label(props: LabelProps) { const theme = useTheme(); const { colors, transitionTiming } = theme; - const { type = 'default', onClick, children, ...rest } = props; + const { + type = 'default', + monospace = false, + style, + onClick, + children, + ...rest + } = props; const { alert, primary, @@ -89,6 +97,9 @@ export default function Label(props: LabelProps) { } else { baseColor = primary; } + if (monospace) { + style.fontFamily = theme.typography.families.monospace; + } backgroundColor = baseColor.base; backgroundColorHover = onClick ? baseColor.dark1 : baseColor.base; From 476d8a7239cb82336ef21cdcc953e9f476cc519d Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Fri, 6 Dec 2024 12:19:47 -0800 Subject: [PATCH 4/7] fixes and touchups --- .../SqlLab/components/QueryTable/index.tsx | 63 ++++++++++++++----- .../src/components/Label/Label.stories.tsx | 9 ++- .../src/components/Label/index.tsx | 47 +++++++------- 3 files changed, 79 insertions(+), 40 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx index 1d132cb22dc3f..497eb9553ec88 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx @@ -126,58 +126,95 @@ const QueryTable = ({ const statusAttributes = { success: { config: { - icon: , + icon: ( + + ), //icon: , label: t('Success'), }, }, failed: { config: { - icon: , + icon: ( + + ), label: t('Failed'), }, }, stopped: { config: { - icon: , + icon: ( + + ), label: t('Failed'), }, }, running: { config: { - icon: , + icon: ( + + ), label: t('Running'), }, }, fetching: { config: { icon: ( - + ), label: t('Fetching'), }, }, timed_out: { config: { - icon: , + icon: ( + + ), label: t('Offline'), }, }, scheduled: { config: { - icon: , + icon: ( + + ), label: t('Scheduled'), }, }, pending: { config: { - icon: , + icon: ( + + ), label: t('Scheduled'), }, }, error: { config: { - icon: , + icon: ( + + ), label: t('Unknown Status'), }, }, @@ -192,11 +229,7 @@ const QueryTable = ({ if (q.endDttm) { q.duration = ( - + ); } q.user = ( @@ -218,7 +251,7 @@ const QueryTable = ({ ); q.started = ( -