-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added title in bar and status timeline #2312
- Loading branch information
1 parent
d9e894b
commit c6ea993
Showing
9 changed files
with
104 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/dashboard/src/customization/propertiesSections/widgetTitle/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React from 'react'; | ||
|
|
||
| import SpaceBetween from '@cloudscape-design/components/space-between'; | ||
| import { PropertiesSection } from '~/customization/propertiesSectionComponent'; | ||
| import { CommonChartProperties } from '~/customization/widgets/types'; | ||
| import { DashboardWidget } from '~/types'; | ||
| import { TitleSection } from './titleSection'; | ||
| import { maybeWithDefault } from '~/util/maybe'; | ||
| import { PropertyLens } from '~/customization/propertiesSection'; | ||
|
|
||
| const isWidgetTitle = (w: DashboardWidget): w is DashboardWidget<CommonChartProperties> => | ||
| 'queryConfig' in w.properties && | ||
| !(w.type === 'kpi' || w.type === 'status' || w.type === 'table' || w.type === 'text'); | ||
|
|
||
| const RenderWidgetTitleSection = ({ | ||
| useProperty, | ||
| }: { | ||
| useProperty: PropertyLens<DashboardWidget<CommonChartProperties>>; | ||
| }) => { | ||
| const [titleMaybe, updateTitle] = useProperty( | ||
| (properties) => properties.title, | ||
| (properties, updatedTitle) => ({ | ||
| ...properties, | ||
| title: updatedTitle, | ||
| }) | ||
| ); | ||
|
|
||
| const title = maybeWithDefault(undefined, titleMaybe); | ||
|
|
||
| return ( | ||
| <SpaceBetween size='s' direction='vertical'> | ||
| <TitleSection title={title} updateTitle={updateTitle} /> | ||
| </SpaceBetween> | ||
| ); | ||
| }; | ||
|
|
||
| export const WidgetTitle: React.FC = () => ( | ||
| <PropertiesSection | ||
| isVisible={isWidgetTitle} | ||
| render={({ useProperty }) => <RenderWidgetTitleSection useProperty={useProperty} />} | ||
| /> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
packages/dashboard/src/customization/propertiesSections/widgetTitle/widgetTitle.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
| import { Provider } from 'react-redux'; | ||
| import { getByLabelText, getByPlaceholderText, queryByLabelText, render } from '@testing-library/react'; | ||
| import { configureDashboardStore } from '~/store'; | ||
| import { DashboardWidget } from '~/types'; | ||
| import { WidgetTitle } from './index'; | ||
| import { | ||
| MOCK_LINE_CHART_WIDGET, | ||
| MOCK_TEXT_WIDGET, | ||
| MOCK_KPI_WIDGET, | ||
| MOCK_RECTANGLE_WIDGET, | ||
| } from '../../../../testing/mocks'; | ||
|
|
||
| const store = (widgets: DashboardWidget) => | ||
| configureDashboardStore({ | ||
| dashboardConfiguration: { | ||
| widgets: [widgets], | ||
| }, | ||
| selectedWidgets: [widgets], | ||
| }); | ||
|
|
||
| const TestComponent = (widget: DashboardWidget) => ( | ||
| <Provider store={store(widget)}> | ||
| <WidgetTitle /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| it('renders', () => { | ||
| const elem = render(<TestComponent {...MOCK_LINE_CHART_WIDGET} />).baseElement; | ||
| expect(elem).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('renders the widget title input', () => { | ||
| const TITLE_WIDGETS = [MOCK_LINE_CHART_WIDGET]; | ||
| TITLE_WIDGETS.map((widget) => { | ||
| const elem = render(<TestComponent {...widget} />).baseElement; | ||
| expect(getByLabelText(elem, 'Widget title')).toBeTruthy(); | ||
| expect(getByPlaceholderText(elem, 'Input title')).toBeTruthy(); | ||
| }); | ||
| }); | ||
|
|
||
| it('renders the without widget title input', () => { | ||
| const NO_TITLE_WIDGETS = [MOCK_KPI_WIDGET, MOCK_RECTANGLE_WIDGET, MOCK_TEXT_WIDGET]; | ||
| NO_TITLE_WIDGETS.map((widget) => { | ||
| const elem = render(<TestComponent {...widget} />).baseElement; | ||
| expect(queryByLabelText(elem, 'Widget title')).toBeNull(); | ||
| expect(queryByLabelText(elem, 'Input title')).toBeNull(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters