Skip to content

feat(Operator Page): add overlay title to organization details overlay #6475

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.

Sign up for GitHub

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

Merged
merged 9 commits into from
Jan 18, 2023
Merged

feat(Operator Page): add overlay title to organization details overlay #6475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d099b81
feat: add org details header to overlay
blegesse-w Jan 10, 2023
b479257
feat: show iox org cardinality as N/A
blegesse-w Jan 10, 2023
c4fceee
fix: add "IOx" to cardinality limit
blegesse-w Jan 10, 2023
d0d6272
fix: update iox cardinality limit field type to text
blegesse-w Jan 11, 2023
03a5ce0
chore: revert code showing cardinality for iox
blegesse-w Jan 12, 2023
8d6a762
chore: rearrange operator page org overlay
blegesse-w Jan 17, 2023
4ce957f
fix: prettier
blegesse-w Jan 17, 2023
0a9f7f3
test: update orgID test
blegesse-w Jan 17, 2023
938d0af
test: use correct testID to reference orgID element
blegesse-w Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/e2e/cloud/operator.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ describe('Operator Page', () => {
})

cy.getByTestID('overlay--container').should('be.visible')
cy.getByTestID('overlay--header').contains('678')
cy.getByTestID('org-overlay-orgID').contains('678')

cy.getByTestID('limits-rate.readKBs--input').clear().type('666')

Expand Down Expand Up @@ -223,7 +223,7 @@ describe('Operator Page', () => {
})

cy.getByTestID('overlay--container').should('be.visible')
cy.getByTestID('overlay--header').contains('678')
cy.getByTestID('org-overlay-orgID').contains('678')

cy.getByTestID('limits-rate.readKBs--input')
.invoke('attr', 'value')
Expand Down
2 changes: 2 additions & 0 deletions src/operator/LimitsField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ interface Props {
const LimitsField: FC<Props> = ({type, name, limits, onChangeLimits}) => {
const [hasFocus, setHasFocus] = useState(false)
const {hasWritePermissions} = useContext(OperatorContext)

const value = get(limits, name, '')

const formatted_value =
type === InputType.Number
? Intl.NumberFormat(navigator.language).format(value)
Expand Down
5 changes: 5 additions & 0 deletions src/operator/OrgOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,8 @@
padding: $cf-space-2xs $cf-space-s;
}
}

.org-overlay-detail--text {
font-weight: 700;
font-size: 16px;
}
32 changes: 24 additions & 8 deletions src/operator/OrgOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const OrgOverlay: FC = () => {
const history = useHistory()
const canReactivateOrg =
hasWritePermissions && organization?.state === 'suspended'

const isIOx =
organization?.storageType &&
organization.storageType.toLowerCase() === 'iox'
Expand Down Expand Up @@ -98,8 +99,8 @@ const OrgOverlay: FC = () => {
>
<Overlay.Container maxWidth={1000}>
<Overlay.Header
title={orgID}
className="overlay-header--color overlay-header--title"
title="Organization Details"
className="overlay-header--color"
onDismiss={() => history.goBack()}
/>
<SpinnerContainer
Expand All @@ -110,13 +111,20 @@ const OrgOverlay: FC = () => {
<Panel.Body>
<Grid>
<Grid.Row>
<Grid.Column widthMD={Columns.Four}>
<label>Organization Name</label>
<p>{organization?.name ?? ''}</p>
<Grid.Column
widthMD={Columns.Four}
testID="org-overlay-orgID"
>
<label className="org-overlay-detail--text">
Organization ID
</label>
<p>{orgID}</p>
</Grid.Column>
<Grid.Column widthMD={Columns.Four}>
<label>Account Type</label>
<p>{organization?.account?.type ?? ''}</p>
<label className="org-overlay-detail--text">
Organization Name
</label>
<p>{organization?.name ?? ''}</p>
</Grid.Column>
<Grid.Column widthMD={Columns.Four}>
<LinkButton
Expand Down Expand Up @@ -151,9 +159,17 @@ const OrgOverlay: FC = () => {
</Grid.Row>
<Grid.Row>
<Grid.Column widthMD={Columns.Four}>
<label>Organization State</label>
<label className="org-overlay-detail--text">
Organization State
</label>
<p>{organization?.state ?? ''}</p>
</Grid.Column>
<Grid.Column widthMD={Columns.Four}>
<label className="org-overlay-detail--text">
Account Type
</label>
<p>{organization?.account?.type ?? ''}</p>
</Grid.Column>
</Grid.Row>
<SpinnerContainer
loading={limitsStatus}
Expand Down