Skip to content

Commit 04f4b24

Browse files
author
David Kim
authored
fix: apply new styling to secrets page (#2978)
* fix: apply new styling to secrets page * fix: fix variable rename modal
1 parent 57744d0 commit 04f4b24

File tree

3 files changed

+64
-75
lines changed

3 files changed

+64
-75
lines changed

‎cypress/e2e/shared/secrets.test.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,15 @@ describe('Secrets', () => {
8383
})
8484

8585
// Delete API created secrets via the UI
86-
cy.getByTestID('delete-secret-initial--toEverybody').click({
86+
cy.getByTestID('context-delete-menu toEverybody--button').click({
8787
force: true,
8888
})
89-
cy.getByTestID('delete-secret-confirm--toEverybody').should('exist')
90-
cy.getByTestID('delete-secret-confirm--toEverybody').click({
89+
cy.getByTestID(
90+
'context-delete-menu toEverybody--confirm-button'
91+
).should('exist')
92+
cy.getByTestID(
93+
'context-delete-menu toEverybody--confirm-button'
94+
).click({
9195
force: true,
9296
})
9397
cy.wait('@deleteSecret')

‎src/secrets/components/SecretContextMenu.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import {useDispatch} from 'react-redux'
55

66
// Components
77
import {
8-
Button,
98
ButtonShape,
109
ComponentColor,
1110
ComponentSize,
11+
ConfirmationButton,
12+
FlexBox,
1213
IconFont,
14+
SquareButton,
1315
} from '@influxdata/clockface'
1416

1517
// Actions
@@ -23,7 +25,6 @@ import {
2325

2426
// Types
2527
import {Secret} from 'src/types'
26-
import {Context} from 'src/clockface'
2728

2829
// Utils
2930
import {deleteSecret} from 'src/secrets/actions/thunks'
@@ -52,35 +53,29 @@ const SecretContextMenu: FC<Props> = ({secret}) => {
5253
dispatch(notify(copyToClipboardFailed(copiedText, 'Secret ID')))
5354
}
5455
}
55-
5656
return (
57-
<Context className="secrets-context-menu">
57+
<FlexBox margin={ComponentSize.ExtraSmall}>
5858
<CopyToClipboard text={secret.id} onCopy={handleCopyAttempt}>
59-
<Button
59+
<SquareButton
6060
testID={`copy-to-clipboard--${secret.id}`}
61-
size={ComponentSize.Small}
62-
color={ComponentColor.Secondary}
63-
text="Copy to Clipboard"
61+
size={ComponentSize.ExtraSmall}
62+
color={ComponentColor.Colorless}
63+
icon={IconFont.Clipboard_New}
6464
shape={ButtonShape.StretchToFit}
65-
style={{margin: '4px 0 0 0'}}
65+
titleText="Copy to clipboard"
6666
/>
6767
</CopyToClipboard>
68-
<Context.Menu
69-
testID={`delete-secret-initial--${secret.id}`}
70-
size={ComponentSize.Small}
71-
color={ComponentColor.Danger}
68+
<ConfirmationButton
69+
color={ComponentColor.Colorless}
7270
icon={IconFont.Trash_New}
73-
text="Delete"
74-
shape={ButtonShape.StretchToFit}
75-
style={{margin: '4px 0 0 10px'}}
76-
>
77-
<Context.Item
78-
label="Delete"
79-
action={handleDelete}
80-
testID={`delete-secret-confirm--${secret.id}`}
81-
/>
82-
</Context.Menu>
83-
</Context>
71+
shape={ButtonShape.Square}
72+
size={ComponentSize.ExtraSmall}
73+
confirmationLabel="Yes, delete this secret"
74+
onConfirm={handleDelete}
75+
confirmationButtonText="Confirm"
76+
testID={`context-delete-menu ${secret.id}`}
77+
/>
78+
</FlexBox>
8479
)
8580
}
8681

‎src/variables/components/RenameVariableForm.tsx‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {connect, ConnectedProps} from 'react-redux'
44
import {withRouter, RouteComponentProps} from 'react-router-dom'
55

66
// Components
7-
import {Form, Input, Button, Grid} from '@influxdata/clockface'
7+
import {Form, Input, Button, Overlay} from '@influxdata/clockface'
88

99
// Utils
1010
import {validateVariableName} from 'src/variables/utils/validation'
@@ -46,55 +46,45 @@ class RenameVariableOverlayForm extends PureComponent<Props, State> {
4646

4747
return (
4848
<Form onSubmit={this.handleSubmit}>
49-
<Grid>
50-
<Grid.Row>
51-
<Grid.Column>
52-
<div className="overlay-flux-editor--spacing">
53-
<Form.ValidationElement
54-
label="Name"
49+
<Overlay.Body>
50+
<div className="overlay-flux-editor--spacing">
51+
<Form.ValidationElement
52+
label="Name"
53+
value={workingVariable.name}
54+
required={true}
55+
prevalidate={true}
56+
validationFunc={this.handleNameValidation}
57+
>
58+
{status => (
59+
<Input
60+
placeholder="Rename your variable"
61+
name="name"
62+
autoFocus={true}
5563
value={workingVariable.name}
56-
required={true}
57-
prevalidate={true}
58-
validationFunc={this.handleNameValidation}
59-
>
60-
{status => (
61-
<Input
62-
placeholder="Rename your variable"
63-
name="name"
64-
autoFocus={true}
65-
value={workingVariable.name}
66-
onChange={this.handleChangeInput}
67-
status={status}
68-
testID="rename-variable-input"
69-
/>
70-
)}
71-
</Form.ValidationElement>
72-
</div>
73-
</Grid.Column>
74-
</Grid.Row>
75-
<Grid.Row>
76-
<Grid.Column>
77-
<Form.Footer>
78-
<Button
79-
text="Cancel"
80-
color={ComponentColor.Danger}
81-
onClick={onClose}
64+
onChange={this.handleChangeInput}
65+
status={status}
66+
testID="rename-variable-input"
8267
/>
83-
<Button
84-
text="Submit"
85-
type={ButtonType.Submit}
86-
color={ComponentColor.Primary}
87-
status={
88-
isNameValid
89-
? ComponentStatus.Default
90-
: ComponentStatus.Disabled
91-
}
92-
testID="rename-variable-submit"
93-
/>
94-
</Form.Footer>
95-
</Grid.Column>
96-
</Grid.Row>
97-
</Grid>
68+
)}
69+
</Form.ValidationElement>
70+
</div>
71+
</Overlay.Body>
72+
<Overlay.Footer>
73+
<Button
74+
text="Cancel"
75+
color={ComponentColor.Danger}
76+
onClick={onClose}
77+
/>
78+
<Button
79+
text="Submit"
80+
type={ButtonType.Submit}
81+
color={ComponentColor.Primary}
82+
status={
83+
isNameValid ? ComponentStatus.Default : ComponentStatus.Disabled
84+
}
85+
testID="rename-variable-submit"
86+
/>
87+
</Overlay.Footer>
9888
</Form>
9989
)
10090
}

0 commit comments

Comments
 (0)