Skip to content

Commit

Permalink
Add table feedback panel and fix comments
Browse files Browse the repository at this point in the history
Signed-off-by: Anan Z <[email protected]>
  • Loading branch information
ananzh committed Jan 25, 2024
1 parent 6a50ff5 commit 30b365c
Show file tree
Hide file tree
Showing 10 changed files with 214 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/plugins/discover/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ export const CONTEXT_DEFAULT_SIZE_SETTING = 'context:defaultSize';
export const CONTEXT_STEP_SETTING = 'context:step';
export const CONTEXT_TIE_BREAKER_FIELDS_SETTING = 'context:tieBreakerFields';
export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
export const TABLE_LEGACY = 'table:legacy';
export const DATA_GRID_TABLE = 'table:datagrid';
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ActionBar } from './context/components/action_bar/action_bar';
import {
CONTEXT_STEP_SETTING,
DOC_HIDE_TIME_COLUMN_SETTING,
TABLE_LEGACY,
DATA_GRID_TABLE,
} from '../../../../common';
import { DiscoverViewServices } from '../../../build_services';
import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
Expand Down Expand Up @@ -98,9 +98,7 @@ export function ContextApp({
onChangeCount={onChangeCount}
type={SurrDocType.PREDECESSORS}
/>
{services.uiSettings?.get(TABLE_LEGACY) ? (
<LegacyHtmlTable />
) : (
{services.uiSettings?.get(DATA_GRID_TABLE) ? (
<div className="dscDocsGrid">
<DataGridTable
aria-label={'ContextTable'}
Expand All @@ -119,6 +117,8 @@ export function ContextApp({
isContextView={true}
/>
</div>
) : (
<LegacyHtmlTable />
)}
<ActionBar
defaultStepSize={defaultStepSize}
Expand Down

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

Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { i18n } from '@osd/i18n';
import React from 'react';
import { DiscoverViewServices } from '../../../build_services';
import { showOpenSearchPanel } from './show_open_search_panel';
import { showTableFeedbacksPanel } from './show_table_feedbacks_panel';
import { SavedSearch } from '../../../saved_searches';
import { Adapters } from '../../../../../inspector/public';
import { TopNavMenuData } from '../../../../../navigation/public';
Expand All @@ -20,7 +21,7 @@ import { DiscoverState, setSavedSearchId } from '../../utils/state_management';
import {
DOC_HIDE_TIME_COLUMN_SETTING,
SORT_DEFAULT_ORDER_SETTING,
TABLE_LEGACY,
DATA_GRID_TABLE,
} from '../../../../common';
import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source';
import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
Expand Down Expand Up @@ -224,21 +225,31 @@ export const getTopNavLinks = (
};

const newTable: TopNavMenuData = {
id: 'table-new',
id: 'table-datagrid',
label: i18n.translate('discover.localMenu.newTableTitle', {
defaultMessage: 'New Table',
defaultMessage: 'Try new Discover features',
}),
description: i18n.translate('discover.localMenu.newTableDescription', {
defaultMessage: 'New Data Grid Table Experience',
}),
testId: 'tableNewButton',
testId: 'datagridTableButton',
run: async () => {
const useLegacyTable = uiSettings.get(TABLE_LEGACY);
await uiSettings.set(TABLE_LEGACY, !useLegacyTable);
window.location.reload();
// fetch current state of DATA_GRID_TABLE settings
// if data grid table is used, when switch to legacy table, show feedbacks panel
// if legacy table is used, when switch to data grid table, simply set table and reload
const useDatagridTable = uiSettings.get(DATA_GRID_TABLE);
if (useDatagridTable) {
showTableFeedbacksPanel({
I18nContext: core.i18n.Context,
services,
});
} else {
await uiSettings.set(DATA_GRID_TABLE, true);
window.location.reload();
}
},
type: 'toggle' as const,
emphasize: uiSettings.get(TABLE_LEGACY) ? false : true,
emphasize: uiSettings.get(DATA_GRID_TABLE) ? true : false,
};

return [
Expand Down Expand Up @@ -302,7 +313,7 @@ const getSharingData = async ({
const searchSourceInstance = searchSource.createCopy();
const indexPattern = await searchSourceInstance.getField('index');

const { searchFields, selectFields } = await getSharingDataFields(
const { searchFields } = await getSharingDataFields(
state.columns,
services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING),
indexPattern?.timeFieldName
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import ReactDOM from 'react-dom';
import { TableFeedbacksPanel } from './table_feedbacks_panel';
import { I18nStart } from '../../../../../../core/public';
import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
import { DiscoverViewServices } from '../../../build_services';
import { DATA_GRID_TABLE } from '../../../../common';

let isFeedbackPanelOpen = false;

export function showTableFeedbacksPanel({
I18nContext,
services,
}: {
I18nContext: I18nStart['Context'];
services: DiscoverViewServices;
}) {
// if (isFeedbackPanelOpen) {
// return;
// }

// isFeedbackPanelOpen = true;
const container = document.createElement('div');
const onClose = () => {
ReactDOM.unmountComponentAtNode(container);
document.body.removeChild(container);
isFeedbackPanelOpen = false;
};

const onTurnOff = async () => {
await services.uiSettings.set(DATA_GRID_TABLE, false);
onClose();
window.location.reload();
};

document.body.appendChild(container);
const element = (
<OpenSearchDashboardsContextProvider services={services}>
<I18nContext>
<TableFeedbacksPanel onClose={onClose} onTurnOff={onTurnOff} />
</I18nContext>
</OpenSearchDashboardsContextProvider>
);
ReactDOM.render(element, container);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { TableFeedbacksPanel } from './table_feedbacks_panel';

describe('TableFeedbacksPanel', () => {
let onCloseMock: jest.Mock;
let onTurnOffMock: jest.Mock;
let wrapper: ShallowWrapper;

beforeEach(() => {
onCloseMock = jest.fn();
onTurnOffMock = jest.fn();
wrapper = shallow(<TableFeedbacksPanel onClose={onCloseMock} onTurnOff={onTurnOffMock} />);
});

it('renders correctly', () => {
expect(wrapper).toMatchSnapshot();
});

it('calls onClose when the Cancel button is clicked', () => {
wrapper.find('EuiButtonEmpty').simulate('click');
expect(onCloseMock).toHaveBeenCalled();
});

it('calls onTurnOff when the Turn off new features button is clicked', () => {
wrapper.find('EuiButton').simulate('click');
expect(onTurnOffMock).toHaveBeenCalled();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import {
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
EuiModalFooter,
EuiButton,
EuiText,
EuiButtonEmpty,
} from '@elastic/eui';

interface TableFeedbacksPanelProps {
onClose: () => void;
onTurnOff: () => Promise<void>;
}

export const TableFeedbacksPanel = ({ onClose, onTurnOff }: TableFeedbacksPanelProps) => (
<EuiModal onClose={onClose} maxWidth={600}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<h4>Share your thoughts on the latest Discover features</h4>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>
<EuiText>
<p>
Event tables: Documents are now expanded through a flyout. Density, column order, and
sorting controls have been improved.{' '}
<a href="https://survey.opensearch.org">Provide feedbacks</a>.
</p>
</EuiText>
</EuiModalBody>

<EuiModalFooter>
<EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
<EuiButton onClick={onTurnOff} fill>
Turn off new features
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { SortOrder } from '../../../saved_searches/types';
import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
import { popularizeField } from '../../helpers/popularize_field';
import { TABLE_LEGACY } from '../../../../common';
import { DATA_GRID_TABLE } from '../../../../common';
import { LegacyHtmlTable } from '../../components/legacy_table/table';

interface Props {
Expand Down Expand Up @@ -92,9 +92,7 @@ export const DiscoverTable = ({ rows }: Props) => {
return <div>{'loading...'}</div>;
}

return services.uiSettings?.get(TABLE_LEGACY) ? (
<LegacyHtmlTable />
) : (
return services.uiSettings?.get(DATA_GRID_TABLE) ? (
<DataGridTable
columns={columns}
indexPattern={indexPattern}
Expand All @@ -109,5 +107,7 @@ export const DiscoverTable = ({ rows }: Props) => {
title={savedSearch?.id ? savedSearch.title : ''}
description={savedSearch?.id ? savedSearch.description : ''}
/>
) : (
<LegacyHtmlTable />
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
DataGridTableProps,
} from '../application/components/data_grid/data_grid_table';
import { VisualizationNoResults } from '../../../visualizations/public';
import { TABLE_LEGACY } from '../../common';
import { DATA_GRID_TABLE } from '../../common';
import { getServices } from '../opensearch_dashboards_services';
import { LegacyHtmlTable } from '../application/components/legacy_table/table';
import './search_embeddable.scss';
Expand Down Expand Up @@ -57,12 +57,12 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
>
(
{discoverEmbeddableProps.totalHitCount !== 0 ? (
services.uiSettings?.get(TABLE_LEGACY) ? (
<LegacyHtmlTable />
) : (
services.uiSettings?.get(DATA_GRID_TABLE) ? (
<EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
<DataGridTableMemoized {...discoverEmbeddableProps} />
</EuiFlexItem>
) : (
<LegacyHtmlTable />
)
) : (
<EuiFlexItem>
Expand Down
14 changes: 7 additions & 7 deletions src/plugins/discover/server/ui_settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import {
CONTEXT_STEP_SETTING,
CONTEXT_TIE_BREAKER_FIELDS_SETTING,
MODIFY_COLUMNS_ON_SWITCH,
TABLE_LEGACY,
DATA_GRID_TABLE,
} from '../common';

export const uiSettings: Record<string, UiSettingsParams> = {
Expand Down Expand Up @@ -187,15 +187,15 @@ export const uiSettings: Record<string, UiSettingsParams> = {
category: ['discover'],
schema: schema.boolean(),
},
[TABLE_LEGACY]: {
name: i18n.translate('discover.advancedSettings.useLegacyTable', {
defaultMessage: 'Use legacy table',
[DATA_GRID_TABLE]: {
name: i18n.translate('discover.advancedSettings.useDataGridTable', {
defaultMessage: 'Use data grid table',
}),
value: true,
description: i18n.translate('discover.advancedSettings.useLegacyTableDescription', {
value: false,
description: i18n.translate('discover.advancedSettings.useDataGridTableDescription', {
defaultMessage:
'Discover adopts a data grid table layout that includes better sorting and resizable columns. ' +
'Disable this option if would like to try out the new table view.',
'Enable this option if would like to try out the new table view.',
}),
category: ['discover'],
schema: schema.boolean(),
Expand Down

0 comments on commit 30b365c

Please sign in to comment.