Open rohan-chaturvedi opened 3 months ago
hey, I would like to work on this issue. @rohan-chaturvedi
hey, I would like to work on this issue. @rohan-chaturvedi
Great, its all yours!
Hey @rohan-chaturvedi just wanted a little clarification about the UI, for testing I have created a dropdown ui, should I make a separate pop up screen/page for the changes or should I just try to make the current dropdown look cleaner?
Hey @harshith-1008 , this is a good start! However I think we should avoid this "accordion" style behavior, since it shifts the entire rest of the UI down. Instead, how about trying a modal dialog? We have a GenericDialog
component you could use: https://github.com/phasehq/console/blob/main/frontend/components/common/GenericDialog.tsx
thanks for the feedback, ill try to implement it.
@rohan-chaturvedi I tried using genericDialogue component, but it expects button variant props, if I pass button variant then the alert changes to green box around the text. I have changed the component such that it accepts an empty string as props for genericDialogue, is it fine?
@rohan-chaturvedi I tried using genericDialogue component, but it expects button variant props, if I pass button variant then the alert changes to green box around the text. I have changed the component such that it accepts an empty string as props for genericDialogue, is it fine?
@harshith-1008 that should be fine, just make sure that its not a breaking change for other components that use it. I'll take a look in detail once you have a PR. Once thing you could try is adding an i
icon in an outline
or secondary
button as the modal trigger rather than the entire alert text :thinking:
@rohan-chaturvedi I hope this UI is fine.
This is a great start! A few suggestions:
CHECKING
" rather than "Modified 'Added CHECKING'"MONOSPACE
fonts for key namesfont-medium
or a different font color, (maybe font-mono
as well?)@rohan-chaturvedi is this ui okay?
That looks awesome! A few notes:
Only use font-mono
for key names or field names. For example: "Modified AWS_SECRET_ACCESS_KEY
"
Make sure the color-coding logic is consistent. Green makes sense for a new secret, but for modified secrets there's both blue and yellow. I'd suggest just picking one (yellow makes more sense IMO)
Could we show details of the changes here? For example:
Modified AWS_SECRET_ACCESS_KEY
value
aCRAMarEbFC3Q5c24pi7AVMIt6TaCfHeFZ4KCf/a
-> JBgoiFGNdbutADANDPmjp[OMKOJHduafdKAD
You could use the secret history UI as a baseline for this as well:
@harshith-1008 The SecretPropertyDiffs component could be useful for rendering details of changes
@rohan-chaturvedi just one small clarification, the font-mono should be just on keys name right? not the properties name right?
Yep, I think that will work well
@rohan-chaturvedi Is this UI fine?
@harshith-1008 This is good progress! The UI still needs a bit of work though. Could you tag me on the PR when its ready? It will be easier to suggest changes to the styles.
Is your feature request related to a problem?
Making changes to secrets currently shows a "You have undeployed changes to this environment." warning banner and an amber highlight to affected secrets, but it can be difficult to determine what changes were made other than which secrets are affected.
2024-06-16 20-44-40.webm
Describe the solution you'd like
Clicking the warning banner should show a modal with details of secrets affected, with diffs of specific properties changed, such as tags, comments, etc. For example:
GOOGLE_CLIENT_ID
TEST
SESSION_COOKIE_DOMAIN
Ideally, something inspired by VSCode's diffs would be great: