Skip to content

Commit 44d6311

Browse files
Palakp41Palakp41
authored
feat: overlay scrollbars (#3134)
* feat: add scrollbars * fix: scrollbars height * fix: prettier
1 parent 004017f commit 44d6311

File tree

2 files changed

+87
-73
lines changed

2 files changed

+87
-73
lines changed

‎src/authorizations/components/redesigned/EditTokenOverlay.tsx‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const EditTokenOverlay: FC<Props> = props => {
8383
}
8484

8585
return (
86-
<Overlay.Container maxWidth={630}>
86+
<Overlay.Container maxWidth={800}>
8787
<Overlay.Header title="API Token Summary" onDismiss={handleDismiss} />
8888
<Overlay.Body>
8989
<FlexBox
@@ -115,59 +115,59 @@ const EditTokenOverlay: FC<Props> = props => {
115115
/>
116116
</Form.Element>
117117
</FlexBox>
118-
<FlexBox.Child className="main-flexbox-child">
119-
<FlexBox
120-
margin={ComponentSize.Large}
121-
justifyContent={JustifyContent.SpaceBetween}
122-
direction={FlexDirection.Row}
123-
stretchToFitWidth={true}
124-
alignItems={AlignItems.Center}
125-
className="flex-box-label"
126-
>
127-
<FlexBox.Child basis={40} grow={8}>
128-
<InputLabel size={ComponentSize.ExtraSmall}>
129-
Resources
130-
</InputLabel>
131-
</FlexBox.Child>
132-
<FlexBox.Child grow={1} className="flexbox-child-label-read">
133-
<InputLabel
134-
className="input-label-read"
135-
size={ComponentSize.ExtraSmall}
136-
>
137-
Read
138-
</InputLabel>
139-
</FlexBox.Child>
140-
<FlexBox.Child grow={1} className="flexbox-child-label-write">
141-
<InputLabel
142-
className="input-label-write"
143-
size={ComponentSize.ExtraSmall}
144-
>
145-
Write
146-
</InputLabel>
147-
</FlexBox.Child>
148-
</FlexBox>
149-
<EditResourceAccordion
150-
permissions={formatPermissionsObj(props.auth.permissions)}
151-
/>
152-
</FlexBox.Child>
153-
<Page.ControlBarCenter>
154-
<FlexBox margin={ComponentSize.Medium}>
155-
<Button
156-
color={ComponentColor.Tertiary}
157-
text="Cancel"
158-
onClick={handleDismiss}
159-
testID="token-cancel-btn"
160-
/>
161-
<Button
162-
color={ComponentColor.Primary}
163-
text="Save"
164-
onClick={onSave}
165-
testID="token-save-btn"
166-
status={status}
167-
/>
168-
</FlexBox>
169-
</Page.ControlBarCenter>
170118
</Form>
119+
<FlexBox.Child className="main-flexbox-child">
120+
<FlexBox
121+
margin={ComponentSize.Large}
122+
justifyContent={JustifyContent.SpaceBetween}
123+
direction={FlexDirection.Row}
124+
stretchToFitWidth={true}
125+
alignItems={AlignItems.Center}
126+
className="flex-box-label"
127+
>
128+
<FlexBox.Child basis={40} grow={8}>
129+
<InputLabel size={ComponentSize.ExtraSmall}>
130+
Resources
131+
</InputLabel>
132+
</FlexBox.Child>
133+
<FlexBox.Child grow={1} className="flexbox-child-label-read">
134+
<InputLabel
135+
className="input-label-read"
136+
size={ComponentSize.ExtraSmall}
137+
>
138+
Read
139+
</InputLabel>
140+
</FlexBox.Child>
141+
<FlexBox.Child grow={1} className="flexbox-child-label-write">
142+
<InputLabel
143+
className="input-label-write"
144+
size={ComponentSize.ExtraSmall}
145+
>
146+
Write
147+
</InputLabel>
148+
</FlexBox.Child>
149+
</FlexBox>
150+
<EditResourceAccordion
151+
permissions={formatPermissionsObj(props.auth.permissions)}
152+
/>
153+
</FlexBox.Child>
154+
<Page.ControlBarCenter>
155+
<FlexBox margin={ComponentSize.Medium}>
156+
<Button
157+
color={ComponentColor.Tertiary}
158+
text="Cancel"
159+
onClick={handleDismiss}
160+
testID="token-cancel-btn"
161+
/>
162+
<Button
163+
color={ComponentColor.Primary}
164+
text="Save"
165+
onClick={onSave}
166+
testID="token-save-btn"
167+
status={status}
168+
/>
169+
</FlexBox>
170+
</Page.ControlBarCenter>
171171
</FlexBox>
172172
</Overlay.Body>
173173
</Overlay.Container>

‎src/authorizations/components/redesigned/ResourceAccordion.tsx‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// Libraries
22
import React, {Component} from 'react'
33
import {isEmpty} from 'lodash'
4+
import 'src/authorizations/components/redesigned/customApiTokenOverlay.scss'
45

56
// Clockface
6-
import {Accordion} from '@influxdata/clockface'
7+
import {Accordion, DapperScrollbars} from '@influxdata/clockface'
78

89
// Components
910
import {ResourceAccordionHeader} from 'src/authorizations/components/redesigned/ResourceAccordionHeader'
@@ -45,30 +46,43 @@ class ResourceAccordion extends Component<OwnProps> {
4546
return (
4647
<Accordion key={resource}>
4748
<ResourceAccordionHeader resourceName={resourceName} />
48-
<AllAccordionBody
49-
resourceName={resourceName}
50-
permissions={permissions[resource]}
51-
onToggleAll={onToggleAll}
52-
disabled={false}
53-
/>
54-
{!permissions[resource].read && !permissions[resource].write
55-
? !isEmpty(permissions[resource].sublevelPermissions) &&
56-
this.getAccordionBody(resourceName, resource)
57-
: null}
49+
<DapperScrollbars
50+
autoHide={true}
51+
autoSize={true}
52+
style={{width: '100%', maxHeight: '300px'}}
53+
>
54+
<AllAccordionBody
55+
resourceName={resourceName}
56+
permissions={permissions[resource]}
57+
onToggleAll={onToggleAll}
58+
disabled={false}
59+
/>
60+
{!permissions[resource].read && !permissions[resource].write
61+
? !isEmpty(permissions[resource].sublevelPermissions) &&
62+
this.getAccordionBody(resourceName, resource)
63+
: null}
64+
</DapperScrollbars>
5865
</Accordion>
5966
)
6067
})}
6168
<Accordion key="Other Resources">
6269
<ResourceAccordionHeader resourceName="Other Resources" />
63-
<AllAccordionBody
64-
resourceName="Other Resources"
65-
permissions={permissions.otherResources}
66-
onToggleAll={onToggleAll}
67-
disabled={false}
68-
/>
69-
{!permissions.otherResources.read && !permissions.otherResources.write
70-
? this.otherResourcesAccordionBody()
71-
: null}
70+
<DapperScrollbars
71+
autoHide={true}
72+
autoSize={true}
73+
style={{width: '100%', maxHeight: '300px'}}
74+
>
75+
<AllAccordionBody
76+
resourceName="Other Resources"
77+
permissions={permissions.otherResources}
78+
onToggleAll={onToggleAll}
79+
disabled={false}
80+
/>
81+
{!permissions.otherResources.read &&
82+
!permissions.otherResources.write
83+
? this.otherResourcesAccordionBody()
84+
: null}
85+
</DapperScrollbars>
7286
</Accordion>
7387
</>
7488
)

0 commit comments

Comments
 (0)