From ed02deb509f53a0cf19df8e3128f6bb38edb17f7 Mon Sep 17 00:00:00 2001
From: phix <peter.hicks@astronomer.io>
Date: Wed, 17 Apr 2024 09:06:48 -0700
Subject: [PATCH] Minor style changes.

---
 .../components/datasets/DatasetDetailPage.tsx |  28 +++--
 web/src/components/datasets/DatasetInfo.tsx   |   2 +-
 web/src/components/jobs/JobDetailPage.tsx     | 108 +++++++++---------
 3 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/web/src/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx
index 5ca73c1b7d..a239d0c6a0 100644
--- a/web/src/components/datasets/DatasetDetailPage.tsx
+++ b/web/src/components/datasets/DatasetDetailPage.tsx
@@ -2,7 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as Redux from 'redux'
-import { Box, Button, Divider, Grid, Switch, Tab, Tabs, createTheme } from '@mui/material'
+import {
+  Box,
+  Button,
+  Divider,
+  FormControlLabel,
+  Grid,
+  Switch,
+  Tab,
+  Tabs,
+  createTheme,
+} from '@mui/material'
 import { CalendarIcon } from '@mui/x-date-pickers'
 import { CircularProgress } from '@mui/material'
 import { DatasetVersion } from '../../types/api'
@@ -202,12 +212,16 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
           </Box>
           {tabIndex === 0 && (
             <Box ml={1} display={'flex'} alignItems={'center'}>
-              <MqText subheading>{i18next.t('datasets.show_field_tags')}</MqText>
-              <Switch
-                size={'small'}
-                checked={showTags}
-                onChange={() => setShowTags(!showTags)}
-                inputProps={{ 'aria-label': 'toggle show tags' }}
+              <FormControlLabel
+                control={
+                  <Switch
+                    size={'small'}
+                    checked={showTags}
+                    onChange={() => setShowTags(!showTags)}
+                    inputProps={{ 'aria-label': 'toggle show tags' }}
+                  />
+                }
+                label={i18next.t('datasets.show_field_tags')}
               />
             </Box>
           )}
diff --git a/web/src/components/datasets/DatasetInfo.tsx b/web/src/components/datasets/DatasetInfo.tsx
index 9e30a84459..9de16a6513 100644
--- a/web/src/components/datasets/DatasetInfo.tsx
+++ b/web/src/components/datasets/DatasetInfo.tsx
@@ -101,7 +101,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
               {datasetFields.map((field) => {
                 return (
                   <React.Fragment key={field.name}>
-                    <TableRow sx={{ cursor: 'pointer' }}>
+                    <TableRow>
                       <TableCell align='left'>{field.name}</TableCell>
                       {!showTags && (
                         <TableCell align='left'>
diff --git a/web/src/components/jobs/JobDetailPage.tsx b/web/src/components/jobs/JobDetailPage.tsx
index e1b7f21e2c..2a786d2b6b 100644
--- a/web/src/components/jobs/JobDetailPage.tsx
+++ b/web/src/components/jobs/JobDetailPage.tsx
@@ -7,7 +7,7 @@ import '../../i18n/config'
 import * as Redux from 'redux'
 import { Box, Button, CircularProgress, Divider, Grid, Tab, Tabs } from '@mui/material'
 import { CalendarIcon } from '@mui/x-date-pickers'
-import { DirectionsRun, Pause, Start } from '@mui/icons-material'
+import { DirectionsRun, SportsScore, Start } from '@mui/icons-material'
 import { IState } from '../../store/reducers'
 import { LineageJob } from '../lineage/types'
 import { MqInfo } from '../core/info/MqInfo'
@@ -115,15 +115,62 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
         padding: theme.spacing(2),
       }}
     >
-      <Box display={'flex'} alignItems={'center'}>
+      <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
         <MqText font={'mono'} heading>
           {job.name}
         </MqText>
+        <Box display={'flex'} alignItems={'center'}>
+          <Box mr={1}>
+            <Button
+              variant='outlined'
+              size={'small'}
+              sx={{
+                borderColor: theme.palette.error.main,
+                color: theme.palette.error.main,
+                '&:hover': {
+                  borderColor: alpha(theme.palette.error.main, 0.3),
+                  backgroundColor: alpha(theme.palette.error.main, 0.3),
+                },
+              }}
+              onClick={() => {
+                props.dialogToggle('')
+              }}
+            >
+              {i18next.t('jobs.dialog_delete')}
+            </Button>
+            <Dialog
+              dialogIsOpen={display.dialogIsOpen}
+              dialogToggle={dialogToggle}
+              title={i18next.t('jobs.dialog_confirmation_title')}
+              ignoreWarning={() => {
+                deleteJob(job.name, job.namespace)
+                props.dialogToggle('')
+              }}
+            />
+          </Box>
+          <Box mr={1}>
+            <Button
+              size={'small'}
+              variant='outlined'
+              color='primary'
+              target={'_blank'}
+              href={job.location}
+              disabled={!job.location}
+            >
+              {i18next.t('jobs.location')}
+            </Button>
+          </Box>
+          <IconButton onClick={() => setSearchParams({})} size='small'>
+            <CloseIcon fontSize={'small'} />
+          </IconButton>
+        </Box>
       </Box>
-      <Box mt={1}>
-        <MqText subdued>{job.description}</MqText>
-      </Box>
-      <Divider sx={{ my: 1 }} />
+      {job.description && (
+        <Box mt={1}>
+          <MqText subdued>{job.description}</MqText>
+        </Box>
+      )}
+      <Divider sx={{ mt: 2, mb: 1 }} />
       <Grid container spacing={2}>
         <Grid item xs={4}>
           <MqInfo
@@ -155,7 +202,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
         </Grid>
         <Grid item xs={4}>
           <MqInfo
-            icon={<Pause color={'disabled'} />}
+            icon={<SportsScore color={'disabled'} />}
             label={'Last Finished'}
             value={job.latestRun ? formatUpdatedAt(job.latestRun.endedAt) : 'N/A'}
           />
@@ -163,7 +210,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
         <Grid item xs={4}>
           <MqInfo
             icon={<DirectionsRun color={'disabled'} />}
-            label={'State'}
+            label={'Running Status'}
             value={<MqStatus label={job.latestRun?.state} color={jobRunsStatus(runs)} />}
           />
         </Grid>
@@ -180,51 +227,6 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
           <Tab label={i18next.t('jobs.latest_tab')} disableRipple={true} />
           <Tab label={i18next.t('jobs.history_tab')} disableRipple={true} />
         </Tabs>
-        <Box display={'flex'} alignItems={'center'}>
-          <Box mr={1}>
-            <Button
-              variant='outlined'
-              size={'small'}
-              sx={{
-                borderColor: theme.palette.error.main,
-                color: theme.palette.error.main,
-                '&:hover': {
-                  borderColor: alpha(theme.palette.error.main, 0.3),
-                  backgroundColor: alpha(theme.palette.error.main, 0.3),
-                },
-              }}
-              onClick={() => {
-                props.dialogToggle('')
-              }}
-            >
-              {i18next.t('jobs.dialog_delete')}
-            </Button>
-            <Dialog
-              dialogIsOpen={display.dialogIsOpen}
-              dialogToggle={dialogToggle}
-              title={i18next.t('jobs.dialog_confirmation_title')}
-              ignoreWarning={() => {
-                deleteJob(job.name, job.namespace)
-                props.dialogToggle('')
-              }}
-            />
-          </Box>
-          <Box mr={1}>
-            <Button
-              size={'small'}
-              variant='outlined'
-              color='primary'
-              target={'_blank'}
-              href={job.location}
-              disabled={!job.location}
-            >
-              {i18next.t('jobs.location')}
-            </Button>
-          </Box>
-          <IconButton onClick={() => setSearchParams({})} size='large'>
-            <CloseIcon fontSize={'small'} />
-          </IconButton>
-        </Box>
       </Box>
       {tabIndex === 0 ? (
         job.latestRun ? (