Skip to content
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

[Look&Feel] Consistency and density improvements #2101

Merged
merged 12 commits into from
Aug 26, 2024
Merged

[Look&Feel] Consistency and density improvements #2101

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7448881
Look&Feel Modal Changes
danieldong51 Aug 21, 2024
2cd429b
Look&Feel EuiTabs Changes
danieldong51 Aug 21, 2024
a64929a
Look&Feel Semantic Headers and Paragraph Changes
danieldong51 Aug 21, 2024
71259d9
Look&Feel Context Menu Changes
danieldong51 Aug 21, 2024
a118886
Look&Feel External Button Changes
danieldong51 Aug 21, 2024
2c631c9
Look&Feel Navigational Button Changes
danieldong51 Aug 21, 2024
2f42104
Look&Feel Render Component Changes
danieldong51 Aug 21, 2024
1a8658b
Merge branch 'main' into look&feel
derek-ho Aug 22, 2024
a48449a
Fixed jest and cypress testing
danieldong51 Aug 22, 2024
0098607
Fixed jest and cypress testing
danieldong51 Aug 23, 2024
b3a4f5c
Revert button changes
danieldong51 Aug 23, 2024
3b37f3a
Updated jest testing
danieldong51 Aug 23, 2024
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
8 changes: 4 additions & 4 deletions public/apps/account/password-reset-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
EuiModalFooter,
EuiOverlayMask,
EuiSpacer,
EuiTitle,
EuiText,
} from '@elastic/eui';
import { CoreStart } from 'opensearch-dashboards/public';
import { FormRow } from '../configuration/utils/form-row';
Expand Down Expand Up @@ -104,9 +104,9 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
<EuiModal data-test-subj="reset-password-modal" onClose={props.handleClose}>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>Reset password for &quot;{props.username}&quot;</h4>
</EuiTitle>
<EuiText size="s">
<h2>Reset password for &quot;{props.username}&quot;</h2>
</EuiText>

<EuiSpacer />

Expand Down
21 changes: 10 additions & 11 deletions public/apps/account/role-info-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
EuiModalBody,
EuiOverlayMask,
EuiText,
EuiTitle,
EuiHorizontalRule,
EuiSpacer,
} from '@elastic/eui';
Expand Down Expand Up @@ -48,29 +47,29 @@ export function RoleInfoPanel(props: { coreStart: CoreStart; handleClose: () =>
<EuiModal data-test-subj="role-info-modal" onClose={props.handleClose}>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>Roles ({roles.length})</h4>
</EuiTitle>
<EuiText color="subdued">
<EuiText size="s">
<h2>Roles ({roles.length})</h2>
</EuiText>
<EuiText color="subdued" size="s">
Roles you are currently mapped to by your administrator.
</EuiText>
<EuiSpacer />
{roles.map((item) => (
<EuiText key={item}>
<EuiText key={item} size="s">
{item}
<br />
</EuiText>
))}
<EuiHorizontalRule />
<EuiTitle>
<h4>Backend roles ({backendRoles.length})</h4>
</EuiTitle>
<EuiText color="subdued">
<EuiText size="s">
<h2>Backend roles ({backendRoles.length})</h2>
</EuiText>
<EuiText color="subdued" size="s">
Backend roles you are currently mapped to by your administrator.
</EuiText>
<EuiSpacer />
{backendRoles.map((item) => (
<EuiText key={item}>
<EuiText key={item} size="s">
{item}
<br />
</EuiText>
Expand Down
7 changes: 3 additions & 4 deletions public/apps/account/tenant-switch-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
EuiCompressedRadioGroup,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { CoreStart } from 'opensearch-dashboards/public';
import { keys } from 'lodash';
Expand Down Expand Up @@ -286,9 +285,9 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
<EuiModal data-test-subj="tenant-switch-modal" onClose={props.handleClose}>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>Select your tenant</h4>
</EuiTitle>
<EuiText size="s">
<h2>Select your tenant</h2>
</EuiText>

<EuiSpacer />

Expand Down
26 changes: 18 additions & 8 deletions public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,53 +8,63 @@ exports[`Account menu - Role info panel renders 1`] = `
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Roles (
2
)
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiText
color="subdued"
size="s"
>
Roles you are currently mapped to by your administrator.
</EuiText>
<EuiSpacer />
<EuiText
key="role1"
size="s"
>
role1
<br />
</EuiText>
<EuiText
key="role2"
size="s"
>
role2
<br />
</EuiText>
<EuiHorizontalRule />
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Backend roles (
2
)
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiText
color="subdued"
size="s"
>
Backend roles you are currently mapped to by your administrator.
</EuiText>
<EuiSpacer />
<EuiText
key="backend_role1"
size="s"
>
backend_role1
<br />
</EuiText>
<EuiText
key="backend_role2"
size="s"
>
backend_role2
<br />
Expand Down
50 changes: 30 additions & 20 deletions public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Select your tenant
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiSpacer />
<EuiText
color="subdued"
Expand Down Expand Up @@ -120,11 +122,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Select your tenant
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiSpacer />
<EuiText
color="subdued"
Expand Down Expand Up @@ -235,11 +239,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Select your tenant
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiSpacer />
<EuiText
color="subdued"
Expand Down Expand Up @@ -350,11 +356,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Select your tenant
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiSpacer />
<EuiText
color="subdued"
Expand Down Expand Up @@ -465,11 +473,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
>
<EuiSpacer />
<EuiModalBody>
<EuiTitle>
<h4>
<EuiText
size="s"
>
<h2>
Select your tenant
</h4>
</EuiTitle>
</h2>
</EuiText>
<EuiSpacer />
<EuiText
color="subdued"
Expand Down
5 changes: 3 additions & 2 deletions public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
EuiPanel,
EuiSpacer,
EuiTitle,
EuiText,
} from '@elastic/eui';
import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
import { cloneDeep, set, without } from 'lodash';
Expand Down Expand Up @@ -221,9 +222,9 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
coreStart={props.coreStart}
fallBackComponent={
<EuiPageHeader>
<EuiTitle size="l">
<EuiText size="s">
<h1>General settings</h1>
</EuiTitle>
</EuiText>
</EuiPageHeader>
}
resourceType={ResourceType.auditLogging}
Expand Down
8 changes: 4 additions & 4 deletions public/apps/configuration/panels/audit-logging/audit-logging.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: bool
<EuiForm>
<EuiDescribedFormGroup title={<h3>Storage location</h3>} className="described-form-group">
<EuiCompressedFormRow className="form-row">
<EuiText color="subdued" grow={false}>
<EuiText color="subdued" grow={false} size="s">
<FormattedMessage
id="audit.logs.storageInstruction"
defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
Expand Down Expand Up @@ -264,9 +264,9 @@ export function AuditLogging(props: AuditLoggingProps) {
navigation={props.depsStart.navigation}
fallBackComponent={
<EuiPageHeader>
<EuiTitle size="l">
<h3>Audit logging</h3>
</EuiTitle>
<EuiText size="s">
<h1>Audit logging</h1>
</EuiText>
</EuiPageHeader>
}
resourceType={ResourceType.auditLogging}
Expand Down
21 changes: 11 additions & 10 deletions ...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,13 +274,13 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
}
fallBackComponent={
<EuiPageHeader>
<EuiTitle
size="l"
<EuiText
size="s"
>
<h3>
<h1>
Audit logging
</h3>
</EuiTitle>
</h1>
</EuiText>
</EuiPageHeader>
}
navigation={Object {}}
Expand Down Expand Up @@ -309,6 +309,7 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
<EuiText
color="subdued"
grow={false}
size="s"
>
<FormattedMessage
defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
Expand Down Expand Up @@ -705,13 +706,13 @@ exports[`Audit logs should load access error component 1`] = `
}
fallBackComponent={
<EuiPageHeader>
<EuiTitle
size="l"
<EuiText
size="s"
>
<h3>
<h1>
Audit logging
</h3>
</EuiTitle>
</h1>
</EuiText>
</EuiPageHeader>
}
navigation={Object {}}
Expand Down
10 changes: 5 additions & 5 deletions public/apps/configuration/panels/auth-view/auth-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*/

import React, { useContext } from 'react';
import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiText } from '@elastic/eui';
import { isEmpty } from 'lodash';
import { AuthenticationSequencePanel } from './authentication-sequence-panel';
import { AuthorizationPanel } from './authorization-panel';
Expand Down Expand Up @@ -87,9 +87,9 @@ export function AuthView(props: AppDependencies) {
navigation={props.depsStart.navigation}
coreStart={props.coreStart}
fallBackComponent={
<EuiTitle size="l">
<EuiText size="s">
<h1>Authentication and authorization</h1>
</EuiTitle>
</EuiText>
}
/>
{accessErrorFlag ? (
Expand Down Expand Up @@ -118,9 +118,9 @@ export function AuthView(props: AppDependencies) {
appRightControls={buttonData}
fallBackComponent={
<EuiPageHeader>
<EuiTitle size="l">
<EuiText size="s">
<h1>Authentication and authorization</h1>
</EuiTitle>
</EuiText>
{!loading && !errorFlag && props.config.ui.backend_configurable && (
<ExternalLinkButton
href={DocLinks.BackendConfigurationDoc}
Expand Down
1 change: 0 additions & 1 deletion public/apps/configuration/panels/auth-view/instruction-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export function InstructionView(props: { config: ClientConfigType }) {
{props.config.ui.backend_configurable && (
<div style={{ textAlign: 'center' }}>
<ExternalLinkButton
fill
size="s"
href={DocLinks.BackendConfigurationDoc}
text="Create config.yml"
Expand Down
6 changes: 3 additions & 3 deletions public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ exports[`Auth view should load access error component 1`] = `
}
}
fallBackComponent={
<EuiTitle
size="l"
<EuiText
size="s"
>
<h1>
Authentication and authorization
</h1>
</EuiTitle>
</EuiText>
}
navigation={Object {}}
/>
Expand Down
Loading
Loading