-
Notifications
You must be signed in to change notification settings - Fork 13.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Query History cosmetic issues #14885
Conversation
3308d7a
to
8d049dc
Compare
@@ -57,12 +59,42 @@ const StaticPosition = css` | |||
position: static; | |||
`; | |||
|
|||
const verticalAlign = css` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we move this to a styles.ts
file?
@@ -98,6 +130,36 @@ const QueryTable = props => { | |||
q.duration = fDuration(q.startDttm, q.endDttm); | |||
} | |||
const time = moment(q.startDttm).format().split('T'); | |||
const statusConfig = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i'd move this into a function where we pass state
and returns the updated statusConfig
const updateStatusConfig = (state) => {
//...
}
Codecov Report
@@ Coverage Diff @@
## master #14885 +/- ##
==========================================
- Coverage 77.61% 77.58% -0.04%
==========================================
Files 963 964 +1
Lines 49246 49329 +83
Branches 6197 6231 +34
==========================================
+ Hits 38224 38270 +46
- Misses 10821 10857 +36
- Partials 201 202 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
On the headers, can you update "Sql" to "SQL"? Thank you :) |
75ba4ad
to
a196579
Compare
a196579
to
8596e30
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, just a comment on removing all the if
logic.
label: '', | ||
status: '', | ||
}; | ||
if (q.state === 'success') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To simplify some of the code here and where you set the color you could move all of this to a map:
statusAttributes = {
success: {
color: theme.colors.success.base,
config: {
name: 'check',
label: t('Success'),
status: 'success',
},
},
...
}
Then you can get the color with:
color: ${({ status, theme }) => statusAttributes[status]?.color || theme.colors.grayscale.base;
And here:
statusConfig = statusAttributes[q.state]?.config || defaultStatusConfig;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ohhhhhh I really like this.
@AAfghahi I believe this PR created a few bugs in sqllab. It looks like the StatusAttributes do not all have the same structure, |
Hi @michellethomas I'll fix that now, will ping you when I have the PR setup |
Thanks for the quick response! If it helps with testing, it looks like the |
nope! That's probably why I wasn't able to test it :) |
I think this should do it? I checked in with our designer for the additional colors. |
* easiest fix * Query History Cosmetic Issues * added revisions * beto revisions
* easiest fix * Query History Cosmetic Issues * added revisions * beto revisions
* easiest fix * Query History Cosmetic Issues * added revisions * beto revisions
SUMMARY
Changed some cosmetic Issues on Query History in Sql Lab
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
Now:
TESTING INSTRUCTIONS
Go to SQL Lab, run a query, check out SQL Query History
ADDITIONAL INFORMATION