Skip to content

Commit

Permalink
Remove chips that have no coresponding widgets.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kuasha420
kuasha420 committed Nov 22, 2021
1 parent d4bcbfc commit 912f152
Show file tree
Hide file tree
Showing 2 changed files with 229 additions and 19 deletions.
95 changes: 79 additions & 16 deletions assets/js/components/DashboardNavigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,69 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import Data from 'googlesitekit-data';
import {
ANCHOR_ID_CONTENT,
ANCHOR_ID_MONETIZATION,
ANCHOR_ID_SPEED,
ANCHOR_ID_TRAFFIC,
} from '../googlesitekit/constants';
import { CORE_WIDGETS } from '../googlesitekit/widgets/datastore/constants';
import {
CONTEXT_ENTITY_DASHBOARD_TRAFFIC,
CONTEXT_ENTITY_DASHBOARD_CONTENT,
CONTEXT_ENTITY_DASHBOARD_SPEED,
CONTEXT_ENTITY_DASHBOARD_MONETIZATION,
CONTEXT_MAIN_DASHBOARD_TRAFFIC,
CONTEXT_MAIN_DASHBOARD_CONTENT,
CONTEXT_MAIN_DASHBOARD_SPEED,
CONTEXT_MAIN_DASHBOARD_MONETIZATION,
} from '../googlesitekit/widgets/default-contexts';
import useDashboardType, {
DASHBOARD_TYPE_MAIN,
} from '../hooks/useDashboardType';

const { useSelect } = Data;

export default function DashboardNavigation() {
const dashboardType = useDashboardType();

const [ showTraffic, showContent, showSpeed, showMonitization ] = useSelect(
( select ) => {
if ( dashboardType === DASHBOARD_TYPE_MAIN ) {
return [
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_MAIN_DASHBOARD_TRAFFIC
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_MAIN_DASHBOARD_CONTENT
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_MAIN_DASHBOARD_SPEED
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_MAIN_DASHBOARD_MONETIZATION
),
];
}

return [
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_ENTITY_DASHBOARD_TRAFFIC
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_ENTITY_DASHBOARD_CONTENT
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_ENTITY_DASHBOARD_SPEED
),
select( CORE_WIDGETS ).isWidgetContextActive(
CONTEXT_ENTITY_DASHBOARD_MONETIZATION
),
];
}
);

const [ selectedIds, setSelectedIds ] = useState( [] );

const handleSelect = useCallback( ( selections ) => {
Expand All @@ -55,22 +110,30 @@ export default function DashboardNavigation() {
handleSelect={ handleSelect }
choice
>
<Chip
id={ ANCHOR_ID_TRAFFIC }
label={ __( 'Traffic', 'google-site-kit' ) }
/>
<Chip
id={ ANCHOR_ID_CONTENT }
label={ __( 'Content', 'google-site-kit' ) }
/>
<Chip
id={ ANCHOR_ID_SPEED }
label={ __( 'Speed', 'google-site-kit' ) }
/>
<Chip
id={ ANCHOR_ID_MONETIZATION }
label={ __( 'Monetization', 'google-site-kit' ) }
/>
{ showTraffic && (
<Chip
id={ ANCHOR_ID_TRAFFIC }
label={ __( 'Traffic', 'google-site-kit' ) }
/>
) }
{ showContent && (
<Chip
id={ ANCHOR_ID_CONTENT }
label={ __( 'Content', 'google-site-kit' ) }
/>
) }
{ showSpeed && (
<Chip
id={ ANCHOR_ID_SPEED }
label={ __( 'Speed', 'google-site-kit' ) }
/>
) }
{ showMonitization && (
<Chip
id={ ANCHOR_ID_MONETIZATION }
label={ __( 'Monetization', 'google-site-kit' ) }
/>
) }
</ChipSet>
);
}
153 changes: 150 additions & 3 deletions assets/js/components/DashboardNavigation.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,160 @@
/**
* Internal dependencies
*/

import DashboardNavigation from './DashboardNavigation';
import { Provider as ViewContextProvider } from './Root/ViewContextContext';
import { CORE_WIDGETS } from '../googlesitekit/widgets/datastore/constants';
import {
CONTEXT_MAIN_DASHBOARD_TRAFFIC,
CONTEXT_MAIN_DASHBOARD_CONTENT,
CONTEXT_MAIN_DASHBOARD_SPEED,
CONTEXT_MAIN_DASHBOARD_MONETIZATION,
} from '../googlesitekit/widgets/default-contexts';
import WithRegistrySetup from '../../../tests/js/WithRegistrySetup';
import { VIEW_CONTEXT_DASHBOARD } from '../googlesitekit/constants';

const Template = ( args ) => <DashboardNavigation { ...args } />;
const Template = ( { setupRegistry, viewContext, ...args } ) => (
<WithRegistrySetup func={ setupRegistry }>
<ViewContextProvider value={ viewContext }>
<DashboardNavigation { ...args } />
</ViewContextProvider>
</WithRegistrySetup>
);

export const DefaultDashboardNavigation = Template.bind( {} );
DashboardNavigation.storyName = 'DashboardNavigation Default State';
DashboardNavigation.args = {};
DefaultDashboardNavigation.storyName = 'DashboardNavigation Default State';
DefaultDashboardNavigation.args = {
setupRegistry: ( registry ) => {
// Traffic
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'TrafficArea', {
title: 'Traffic',
subtitle: 'Traffic Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'TrafficArea', CONTEXT_MAIN_DASHBOARD_TRAFFIC );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'TrafficWidget', {
Component: () => <div>Traffic Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'TrafficWidget', 'TrafficArea' );

// Content
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'ContentArea', {
title: 'Content',
subtitle: 'Content Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'ContentArea', CONTEXT_MAIN_DASHBOARD_CONTENT );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'ContentWidget', {
Component: () => <div>Content Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'ContentWidget', 'ContentArea' );

// Speed
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'SpeedArea', {
title: 'Speed',
subtitle: 'Speed Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'SpeedArea', CONTEXT_MAIN_DASHBOARD_SPEED );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'SpeedWidget', {
Component: () => <div>Speed Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'SpeedWidget', 'SpeedArea' );

// Monetization
registry
.dispatch( CORE_WIDGETS )
.registerWidgetArea( 'MonetizationArea', {
title: 'Monetization',
subtitle: 'Monetization Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea(
'MonetizationArea',
CONTEXT_MAIN_DASHBOARD_MONETIZATION
);
registry
.dispatch( CORE_WIDGETS )
.registerWidget( 'MonetizationWidget', {
Component: () => <div>Monetization Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'MonetizationWidget', 'MonetizationArea' );
},
viewContext: VIEW_CONTEXT_DASHBOARD,
};

export const MonetizationHiddenDashboardNavigation = Template.bind( {} );
MonetizationHiddenDashboardNavigation.storyName =
'DashboardNavigation Monetization Hidden State';
MonetizationHiddenDashboardNavigation.args = {
setupRegistry: ( registry ) => {
// Traffic
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'TrafficArea', {
title: 'Traffic',
subtitle: 'Traffic Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'TrafficArea', CONTEXT_MAIN_DASHBOARD_TRAFFIC );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'TrafficWidget', {
Component: () => <div>Traffic Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'TrafficWidget', 'TrafficArea' );

// Content
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'ContentArea', {
title: 'Content',
subtitle: 'Content Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'ContentArea', CONTEXT_MAIN_DASHBOARD_CONTENT );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'ContentWidget', {
Component: () => <div>Content Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'ContentWidget', 'ContentArea' );

// Speed
registry.dispatch( CORE_WIDGETS ).registerWidgetArea( 'SpeedArea', {
title: 'Speed',
subtitle: 'Speed Widget Area',
style: 'composite',
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidgetArea( 'SpeedArea', CONTEXT_MAIN_DASHBOARD_SPEED );
registry.dispatch( CORE_WIDGETS ).registerWidget( 'SpeedWidget', {
Component: () => <div>Speed Widget</div>,
} );
registry
.dispatch( CORE_WIDGETS )
.assignWidget( 'SpeedWidget', 'SpeedArea' );
},
viewContext: VIEW_CONTEXT_DASHBOARD,
};

export default {
title: 'Components/DashboardNavigation',
Expand Down

0 comments on commit 912f152

Please sign in to comment.