Skip to content

Commit

Permalink
Refactor: update page header for settings, objects and index pattern …
Browse files Browse the repository at this point in the history
…page (opensearch-project#7744)

* settings header

Signed-off-by: tygao <[email protected]>

* update all pages header

Signed-off-by: tygao <[email protected]>

* Changeset file for PR opensearch-project#7744 created/updated

* style: update management style

Signed-off-by: tygao <[email protected]>

* remove extra spacer

Signed-off-by: tygao <[email protected]>

* add tests and snapshots

Signed-off-by: tygao <[email protected]>

---------

Signed-off-by: tygao <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
2 people authored and Qxisylolo committed Aug 20, 2024
1 parent 798305b commit 021210d
Show file tree
Hide file tree
Showing 36 changed files with 5,681 additions and 510 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7744.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
refactor:
- Update page header for settings, objects and index pattern page ([#7744](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7744))
2 changes: 1 addition & 1 deletion src/plugins/advanced_settings/opensearch_dashboards.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "opensearchDashboards",
"server": true,
"ui": true,
"requiredPlugins": ["management"],
"requiredPlugins": ["management","navigation"],
"optionalPlugins": ["home"],
"requiredBundles": ["opensearchDashboardsReact", "home"]
}

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@ import {
} from '../../../../core/public';
import { FieldSetting } from './types';
import { AdvancedSettingsComponent } from './advanced_settings';
import { notificationServiceMock, docLinksServiceMock } from '../../../../core/public/mocks';
import {
notificationServiceMock,
docLinksServiceMock,
applicationServiceMock,
} from '../../../../core/public/mocks';
import { ComponentRegistry } from '../component_registry';

jest.mock('./components/field', () => ({
Expand Down Expand Up @@ -288,4 +292,21 @@ describe('AdvancedSettings', () => {
.prop('enableSaving')
).toBe(false);
});

it('should render normally when use updated UX', async () => {
const component = mountWithI18nProvider(
<AdvancedSettingsComponent
queryText="test:string:setting"
enableSaving={false}
toasts={notificationServiceMock.createStartContract().toasts}
dockLinks={docLinksServiceMock.createStartContract().links}
uiSettings={mockConfig().core.uiSettings}
componentRegistry={new ComponentRegistry().start}
useUpdatedUX={true}
navigationUI={{ HeaderControl: () => null, TopNavMenu: () => null }}
application={applicationServiceMock.createStartContract()}
/>
);
expect(component).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,28 @@ import { CallOuts } from './components/call_outs';
import { Search } from './components/search';
import { Form } from './components/form';
import { AdvancedSettingsVoiceAnnouncement } from './components/advanced_settings_voice_announcement';
import { IUiSettingsClient, DocLinksStart, ToastsStart } from '../../../../core/public/';
import {
IUiSettingsClient,
DocLinksStart,
ToastsStart,
ApplicationStart,
} from '../../../../core/public/';
import { ComponentRegistry } from '../';

import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';

import { FieldSetting, SettingsChanges } from './types';
import { NavigationPublicPluginStart } from '../../../../plugins/navigation/public';

interface AdvancedSettingsProps {
enableSaving: boolean;
uiSettings: IUiSettingsClient;
dockLinks: DocLinksStart['links'];
toasts: ToastsStart;
componentRegistry: ComponentRegistry['start'];
useUpdatedUX: boolean;
navigationUI: NavigationPublicPluginStart['ui'];
application: ApplicationStart;
}

interface AdvancedSettingsComponentProps extends AdvancedSettingsProps {
Expand Down Expand Up @@ -226,21 +235,50 @@ export class AdvancedSettingsComponent extends Component<
);
const PageFooter = componentRegistry.get(componentRegistry.componentType.PAGE_FOOTER_COMPONENT);

return (
<div>
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<PageTitle />
</EuiFlexItem>
<EuiFlexItem>
const renderHeader = () => {
if (!this.props.useUpdatedUX) {
return (
<>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<PageTitle />
</EuiFlexItem>
<EuiFlexItem>
<Search
query={query}
categories={this.categories}
onQueryChange={this.onQueryChange}
/>
</EuiFlexItem>
</EuiFlexGroup>
<PageSubtitle />
<EuiSpacer size="m" />
<CallOuts />
</>
);
} else {
const { HeaderControl } = this.props.navigationUI;
return (
<>
<HeaderControl
setMountPoint={this.props.application.setAppBottomControls}
controls={[
{
renderComponent: <CallOuts />,
},
]}
/>
<Search query={query} categories={this.categories} onQueryChange={this.onQueryChange} />
</EuiFlexItem>
</EuiFlexGroup>
<PageSubtitle />
<EuiSpacer size="m" />
<CallOuts />
<EuiSpacer size="m" />
<EuiSpacer size="m" />
</>
);
}
};

return (
<div>
{renderHeader()}
<AdvancedSettingsVoiceAnnouncement queryText={query.text} settings={filteredSettings} />

<Form
Expand Down Expand Up @@ -276,6 +314,9 @@ export const AdvancedSettings = (props: AdvancedSettingsProps) => {
dockLinks={props.dockLinks}
toasts={props.toasts}
componentRegistry={props.componentRegistry}
useUpdatedUX={props.useUpdatedUX}
navigationUI={props.navigationUI}
application={props.application}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,10 @@ import { EuiPageContent } from '@elastic/eui';
import { AdvancedSettings } from './advanced_settings';
import { ManagementAppMountParams } from '../../../management/public';
import { ComponentRegistry } from '../types';
import { NavigationPublicPluginStart } from '../../../../plugins/navigation/public';

import './index.scss';

const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
defaultMessage: 'Advanced settings',
});
const crumb = [{ text: title }];

const readOnlyBadge = {
text: i18n.translate('advancedSettings.badge.readOnly.text', {
defaultMessage: 'Read only',
Expand All @@ -59,19 +55,35 @@ const readOnlyBadge = {
};

export async function mountManagementSection(
getStartServices: StartServicesAccessor,
getStartServices: StartServicesAccessor<{
navigation: NavigationPublicPluginStart;
}>,
params: ManagementAppMountParams & { wrapInPage?: boolean },
componentRegistry: ComponentRegistry['start']
) {
params.setBreadcrumbs(crumb);
const [{ uiSettings, notifications, docLinks, application, chrome }] = await getStartServices();
const [
{ uiSettings, notifications, docLinks, application, chrome },
{ navigation },
] = await getStartServices();

const canSave = application.capabilities.advancedSettings.save as boolean;

if (!canSave) {
chrome.setBadge(readOnlyBadge);
}

const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
defaultMessage: 'Advanced settings',
});
const newUXTitle = i18n.translate('advancedSettings.newHeader.pageTitle', {
defaultMessage: 'Application settings',
});

const useUpdatedUX = uiSettings.get('home:useNewHomePage');
// If new navigation is off, this will be rendered as breadcrumb. If is on, this will be rendered as title.
const crumb = [{ text: useUpdatedUX ? newUXTitle : title }];
params.setBreadcrumbs(crumb);

const content = (
<Router history={params.history}>
<Switch>
Expand All @@ -82,6 +94,9 @@ export async function mountManagementSection(
dockLinks={docLinks.links}
uiSettings={uiSettings}
componentRegistry={componentRegistry}
useUpdatedUX={useUpdatedUX}
navigationUI={navigation.ui}
application={application}
/>
</Route>
</Switch>
Expand Down
20 changes: 17 additions & 3 deletions src/plugins/advanced_settings/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ import { i18n } from '@osd/i18n';
import { AppMountParameters, CoreSetup, CoreStart, Plugin } from 'opensearch-dashboards/public';
import { FeatureCatalogueCategory } from '../../home/public';
import { ComponentRegistry } from './component_registry';
import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
import {
AdvancedSettingsSetup,
AdvancedSettingsStart,
AdvancedSettingsPluginSetup,
AdvancedSettingsPluginStart,
} from './types';
import { setupTopNavThemeButton } from './register_nav_control';
import { DEFAULT_NAV_GROUPS, AppNavLinkStatus, WorkspaceAvailability } from '../../../core/public';
import { getScopedBreadcrumbs } from '../../opensearch_dashboards_react/public';
Expand All @@ -48,8 +53,17 @@ const titleInGroup = i18n.translate('advancedSettings.applicationSettingsLabel',
});

export class AdvancedSettingsPlugin
implements Plugin<AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup> {
public setup(core: CoreSetup, { management, home }: AdvancedSettingsPluginSetup) {
implements
Plugin<
AdvancedSettingsSetup,
AdvancedSettingsStart,
AdvancedSettingsPluginSetup,
AdvancedSettingsPluginStart
> {
public setup(
core: CoreSetup<AdvancedSettingsPluginStart>,
{ management, home }: AdvancedSettingsPluginSetup
) {
const opensearchDashboardsSection = management.sections.section.opensearchDashboards;

opensearchDashboardsSection.registerApp({
Expand Down
5 changes: 5 additions & 0 deletions src/plugins/advanced_settings/public/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { ComponentRegistry } from './component_registry';
import { HomePublicPluginSetup } from '../../home/public';

import { ManagementSetup } from '../../management/public';
import { NavigationPublicPluginStart } from '../../../plugins/navigation/public';

export interface AdvancedSettingsSetup {
component: ComponentRegistry['setup'];
Expand All @@ -45,4 +46,8 @@ export interface AdvancedSettingsPluginSetup {
home?: HomePublicPluginSetup;
}

export interface AdvancedSettingsPluginStart {
navigation: NavigationPublicPluginStart;
}

export { ComponentRegistry };

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 021210d

Please sign in to comment.