Skip to content

Commit

Permalink
Page header (#236) (#239)
Browse files Browse the repository at this point in the history
* added release notes 2.16 (#227)

* added release notes 2.16



* added release notes for 2.16



---------



* chanels complete



* almost done



* corrected Chanel list page



* view channel



* view channel



* channel details fixed



* fixed many things



* bug fixes



* fix tests page header changes



* code refactored



* fix UTs



* Compressed UX



* resolve merge conflict from main



* resolve merge conflict from main



* refactored the code



* refactored the code



* addressed the comment



* addressed the comment



* addressed the comment



* addressed the comment



---------


(cherry picked from commit 33d7bc1)

Signed-off-by: Riya Saxena <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent f03ecac commit dec3f88
Show file tree
Hide file tree
Showing 43 changed files with 1,418 additions and 766 deletions.
18 changes: 0 additions & 18 deletions .babelrc

This file was deleted.

21 changes: 21 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

// babelrc doesn't respect NODE_PATH anymore but using require does.
// Alternative to install them locally in node_modules
module.exports = {
"presets": [
require('@babel/preset-env'),
require('@babel/preset-react'),
require('@babel/preset-typescript'),
],
"plugins":
[
[require("@babel/plugin-transform-modules-commonjs"), { "allowTopLevelThis": true }],
[require('@babel/plugin-transform-runtime'), { regenerator: true }],
require('@babel/plugin-transform-class-properties'),
require('@babel/plugin-transform-object-rest-spread')
]
};
1 change: 1 addition & 0 deletions models/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,5 @@ export interface TableState<T> {
selectedItems: T[];
items: T[];
loading: boolean;
isPopoverOpen?: boolean; // Ensure this is included
}
3 changes: 2 additions & 1 deletion opensearch_dashboards.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"opensearchDashboardsVersion": "2.17.0",
"requiredPlugins": [
"navigation",
"data"
"data",
"opensearchDashboardsUtils"
],
"optionalPlugins": [
"share",
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,12 @@
"plugin_helpers": "node ../../scripts/plugin_helpers",
"postbuild": "echo Renaming build artifact to [$npm_package_config_zip_name-$npm_package_version.zip] && mv build/$npm_package_config_id*.zip build/$npm_package_config_zip_name-$npm_package_version.zip"
},
"dependencies": {},
"devDependencies": {
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/showdown": "^1.9.3",
"cypress": "9.5.4",
"enzyme-adapter-react-16": "^1.15.5",
"jest-dom": "^4.0.0",
"cypress": "9.5.4"
"jest-dom": "^4.0.0"
},
"resolutions": {
"async": "^3.2.3",
Expand Down
43 changes: 43 additions & 0 deletions public/components/PageHeader/PageHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import {
TopNavControlData,
TopNavControlDescriptionData,
TopNavControlLinkData,
} from '../../../../../src/plugins/navigation/public';
import { getApplication, getNavigationUI, getUseUpdatedUx } from '../../services/utils/constants';

export interface PageHeaderProps {
appRightControls?: TopNavControlData[];
appBadgeControls?: TopNavControlData[];
appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData)[];
appLeftControls?: TopNavControlData[];
}

const PageHeader: React.FC<PageHeaderProps> = ({
children,
appBadgeControls,
appRightControls,
appDescriptionControls,
appLeftControls,
}) => {
const { HeaderControl } = getNavigationUI();
const { setAppBadgeControls, setAppRightControls, setAppDescriptionControls, setAppLeftControls } = getApplication();

return getUseUpdatedUx() ? (
<>
<HeaderControl setMountPoint={setAppBadgeControls} controls={appBadgeControls} />
<HeaderControl setMountPoint={setAppRightControls} controls={appRightControls} />
<HeaderControl setMountPoint={setAppDescriptionControls} controls={appDescriptionControls} />
<HeaderControl setMountPoint={setAppLeftControls} controls={appLeftControls} />
</>
) : (
<>{children}</>
);
};

export default PageHeader;
129 changes: 83 additions & 46 deletions public/pages/Channels/Channels.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ import {
EuiLink,
EuiTableFieldDataColumnType,
EuiTableSortingType,
EuiTitle,
SortDirection,
} from '@elastic/eui';
import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
import _ from 'lodash';
import React, { Component, useContext } from 'react';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { ChannelItemType, TableState } from '../../../models/interfaces';
import {
Expand All @@ -29,6 +30,7 @@ import { NotificationService } from '../../services';
import {
BREADCRUMBS,
ROUTES,
setBreadcrumbs,
} from '../../utils/constants';
import {
CHANNEL_TYPE,
Expand All @@ -43,6 +45,9 @@ import MDSEnabledComponent, {
isDataSourceChanged,
isDataSourceError,
} from '../../components/MDSEnabledComponent/MDSEnabledComponent';
import PageHeader from "../../components/PageHeader/PageHeader"
import { getUseUpdatedUx } from '../../services/utils/constants';
import { TopNavControlButtonData } from 'src/plugins/navigation/public';

interface ChannelsProps extends RouteComponentProps, DataSourceMenuProperties {
notificationService: NotificationService;
Expand Down Expand Up @@ -115,7 +120,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
}

async componentDidMount() {
this.context.chrome.setBreadcrumbs([
setBreadcrumbs([
BREADCRUMBS.NOTIFICATIONS,
BREADCRUMBS.CHANNELS,
]);
Expand Down Expand Up @@ -215,26 +220,82 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
onSelectionChange: this.onSelectionChange,
};

const headerControls = [
{
id: 'Create Channel',
label: 'Create channel',
iconType: 'plus',
fill: true,
href: `#${ROUTES.CREATE_CHANNEL}`,
testId: 'createButton',
controlType: 'button',
} as TopNavControlButtonData,
];

const totalChannels = (
<EuiTitle size="m">
<h2>({this.state.total})</h2>
</EuiTitle>
)

const channelActionsComponent = <ChannelActions
selected={this.state.selectedItems}
setSelected={(selectedItems: ChannelItemType[]) => this.setState({ selectedItems })}
items={this.state.items}
setItems={(items: ChannelItemType[]) => this.setState({ items })}
refresh={this.refresh} />;

const channelControlsComponent = <ChannelControls
onSearchChange={this.onSearchChange}
filters={this.state.filters}
onFiltersChange={this.onFiltersChange} />;

const basicTableComponent = <EuiBasicTable
columns={this.columns}
items={this.state.items}
itemId="config_id"
isSelectable={true}
selection={selection}
noItemsMessage={<EuiEmptyPrompt
title={<h2>No channels to display</h2>}
body="To send or receive notifications, you will need to create a notification channel."
actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiSmallButton>} />}
onChange={this.onTableChange}
pagination={pagination}
sorting={sorting}
tableLayout="auto"
loading={this.state.loading} />;

return (
<>
{getUseUpdatedUx() ? (
<>
<PageHeader
appRightControls={headerControls}
appLeftControls={[{ renderComponent: totalChannels }]}
/>
<ContentPanel>
<div style={{ marginBottom: '10px' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{channelControlsComponent}
<div style={{ marginLeft: '10px' }}>
{channelActionsComponent}
</div>
</div>
</div>
<EuiHorizontalRule margin="s" />
{basicTableComponent}
</ContentPanel>
</>
) : (
<ContentPanel
actions={
<ContentPanelActions
actions={[
{
component: (
<ChannelActions
selected={this.state.selectedItems}
setSelected={(selectedItems: ChannelItemType[]) =>
this.setState({ selectedItems })
}
items={this.state.items}
setItems={(items: ChannelItemType[]) =>
this.setState({ items })
}
refresh={this.refresh}
/>
),
component: channelActionsComponent,
},
{
component: (
Expand All @@ -251,38 +312,14 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
titleSize="m"
total={this.state.total}
>
<ChannelControls
onSearchChange={this.onSearchChange}
filters={this.state.filters}
onFiltersChange={this.onFiltersChange}
/>
{channelControlsComponent}
<EuiHorizontalRule margin="s" />

<EuiBasicTable
columns={this.columns}
items={this.state.items}
itemId="config_id"
isSelectable={true}
selection={selection}
noItemsMessage={
<EuiEmptyPrompt
title={<h2>No channels to display</h2>}
body="To send or receive notifications, you will need to create a notification channel."
actions={
<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiSmallButton>
}
/>
}
onChange={this.onTableChange}
pagination={pagination}
sorting={sorting}
tableLayout="auto"
loading={this.state.loading}
/>
{basicTableComponent}
</ContentPanel>
</>
)}
</>

);
}
}
};

5 changes: 5 additions & 0 deletions public/pages/Channels/__tests__/ChannelDetails.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ import {
import { CoreServicesContext } from '../../../components/coreServices';
import { ServicesContext } from '../../../services';
import { ChannelDetails } from '../components/details/ChannelDetails';
import { setupCoreStart } from '../../../../test/utils/helpers';

beforeAll(() => {
setupCoreStart();
});

describe('<ChannelDetails/> spec', () => {
configure({ adapter: new Adapter() });
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ import {
import { CoreServicesContext } from '../../../components/coreServices';
import { ServicesContext } from '../../../services';
import { ChannelDetailsActions } from '../components/details/ChannelDetailsActions';
import { setupCoreStart } from '../../../../test/utils/helpers';

beforeAll(() => {
setupCoreStart();
});

describe('<ChannelDetailsActions /> spec', () => {
configure({ adapter: new Adapter() });
Expand Down
5 changes: 5 additions & 0 deletions public/pages/Channels/__tests__/Channels.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ import {
import { CoreServicesContext } from '../../../components/coreServices';
import { MainContext } from '../../Main/Main';
import { Channels } from '../Channels';
import { setupCoreStart } from '../../../../test/utils/helpers';

beforeAll(() => {
setupCoreStart();
});

describe('<Channels/> spec', () => {
it('renders the empty component', () => {
Expand Down
Loading

0 comments on commit dec3f88

Please sign in to comment.