From f6f75a8427e737c92d8ecd81098b6fca850f4642 Mon Sep 17 00:00:00 2001 From: Abhishek Reddy <62020972+AbhishekReddy1127@users.noreply.github.com> Date: Mon, 27 Feb 2023 19:47:55 -0600 Subject: [PATCH] Updated the section Collapsable Nav (#330) Signed-off-by: AbhishekReddy1127 Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> --- .../views/collapsible_nav/collapsible_nav.tsx | 2 +- .../collapsible_nav/collapsible_nav_all.tsx | 170 ++++-------------- .../collapsible_nav_example.js | 5 +- .../collapsible_nav/collapsible_nav_group.tsx | 8 +- .../collapsible_nav/collapsible_nav_list.tsx | 157 ++++++---------- 5 files changed, 100 insertions(+), 242 deletions(-) diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx index dbbf12ce33..08aa6d3d74 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx @@ -44,7 +44,7 @@ export default () => { onClose={() => setNavIsOpen(false)}>
-

I am some nav

+

Navigation

 diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx index 508da42263..1155a251d8 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx @@ -10,8 +10,6 @@ */ import React, { useState } from 'react'; -import find from 'lodash/find'; -import findIndex from 'lodash/findIndex'; import { OuiCollapsibleNav, @@ -26,48 +24,21 @@ import { OuiIcon } from '../../../../src/components/icon'; import { OuiButtonEmpty } from '../../../../src/components/button'; import { OuiPageTemplate } from '../../../../src/components/page'; import { - OuiPinnableListGroup, OuiListGroupItem, - OuiPinnableListGroupItemProps, + OuiListGroup, } from '../../../../src/components/list_group'; import { OuiFlexItem } from '../../../../src/components/flex'; -import { OuiHorizontalRule } from '../../../../src/components/horizontal_rule'; import { - DeploymentsGroup, - KibanaNavLinks, - SecurityGroup, + ManagementLinks, + OpenSearchDashboardsLinks, + OpenSearchPluginLinks, } from './collapsible_nav_list'; import { OuiShowFor } from '../../../../src/components/responsive'; import { OuiImage } from '../../../../src/components/image'; import contentSvg from '../../images/content.svg'; import { useExitPath } from '../../services/routing/routing'; -const TopLinks: OuiPinnableListGroupItemProps[] = [ - { - label: 'Home', - iconType: 'home', - isActive: true, - 'aria-current': true, - onClick: () => {}, - pinnable: false, - }, -]; -const KibanaLinks: OuiPinnableListGroupItemProps[] = KibanaNavLinks.map( - (link) => { - return { - ...link, - onClick: () => {}, - }; - } -); -const LearnLinks: OuiPinnableListGroupItemProps[] = [ - { label: 'Docs', onClick: () => {} }, - { label: 'Blogs', onClick: () => {} }, - { label: 'Webinars', onClick: () => {} }, - { label: 'Elastic.co', href: 'https://elastic.co' }, -]; - const CollapsibleNavAll = () => { const exitPath = useExitPath(); const [navIsOpen, setNavIsOpen] = useState(true); @@ -80,8 +51,9 @@ const CollapsibleNavAll = () => { */ const [openGroups, setOpenGroups] = useState( JSON.parse(String(localStorage.getItem('openNavGroups'))) || [ - 'Kibana', - 'Learn', + 'OpenSearch Dashboards', + 'OpenSearch Plugins', + 'Management', ] ); @@ -102,55 +74,6 @@ const CollapsibleNavAll = () => { localStorage.setItem('openNavGroups', JSON.stringify(openGroups)); }; - /** - * Pinning - */ - const [pinnedItems, setPinnedItems] = useState< - OuiPinnableListGroupItemProps[] - >(JSON.parse(String(localStorage.getItem('pinnedItems'))) || []); - - const addPin = (item: any) => { - if (!item || find(pinnedItems, { label: item.label })) { - return; - } - item.pinned = true; - const newPinnedItems = pinnedItems ? pinnedItems.concat(item) : [item]; - setPinnedItems(newPinnedItems); - localStorage.setItem('pinnedItems', JSON.stringify(newPinnedItems)); - }; - - const removePin = (item: any) => { - const pinIndex = findIndex(pinnedItems, { label: item.label }); - if (pinIndex > -1) { - item.pinned = false; - const newPinnedItems = pinnedItems; - newPinnedItems.splice(pinIndex, 1); - setPinnedItems([...newPinnedItems]); - localStorage.setItem('pinnedItems', JSON.stringify(newPinnedItems)); - } - }; - - function alterLinksWithCurrentState( - links: OuiPinnableListGroupItemProps[], - showPinned = false - ): OuiPinnableListGroupItemProps[] { - return links.map((link) => { - const { pinned, ...rest } = link; - return { - pinned: showPinned ? pinned : false, - ...rest, - }; - }); - } - - function addLinkNameToPinTitle(listItem: OuiPinnableListGroupItemProps) { - return `Pin ${listItem.label} to top`; - } - - function addLinkNameToUnpinTitle(listItem: OuiPinnableListGroupItemProps) { - return `Unpin ${listItem.label}`; - } - const collapsibleNav = ( { } onClose={() => setNavIsOpen(false)}> - {/* Dark deployments section */} - - {DeploymentsGroup} - - - {/* Shaded pinned section always with a home item */} - + {/* BOTTOM */} + + {/* OpenSearch Dashboards section */} - + toggleAccordion(isOpen, 'OpenSearch Dashboards') + }> + - - - - - {/* BOTTOM */} - - {/* Kibana section */} toggleAccordion(isOpen, 'Kibana')}> - + toggleAccordion(isOpen, 'OpenSearch Plugins') + }> + { /> - {/* Security callout */} - {SecurityGroup} - - {/* Learn section */} toggleAccordion(isOpen, 'Learn')}> - toggleAccordion(isOpen, 'Management')}> + { const leftSectionItems = [ collapsibleNav, - - Elastic + + OpenSearch UI , ]; diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js index 907726f8c9..1da140014a 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js @@ -179,7 +179,7 @@ export const CollapsibleNavExample = { `, }, { - title: 'Full pattern with header and saved pins', + title: 'Full pattern with header', source: [ { type: GuideSectionTypes.JS, @@ -196,8 +196,7 @@ export const CollapsibleNavExample = { {' '} with a toggle button to open an OuiCollapsibleNav. The contents of which are multiple{' '} - OuiCollapsibleNavGroups and saves the - open/closed/pinned state for each section and item in local store. + OuiCollapsibleNavGroups

This is just a pattern and should be treated as such. Consuming diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx index 4d337013ae..d0de5c59f9 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx @@ -22,10 +22,7 @@ export default () => (

This is a basic group without any modifications

 - +

This is a nice group with a heading supplied via{' '} @@ -38,7 +35,6 @@ export default () => ( background="light" title="Nav group" isCollapsible={true} - iconType="logoElastic" initialIsOpen={true}>

@@ -51,8 +47,6 @@ export default () => ( { + return { + ...link, + onClick: () => {}, + }; +}); -export const DeploymentsGroup = ( - - Deployment
- personal-databoard - - } - iconType="logoGCPMono" - iconSize="xl" - isCollapsible={true} - initialIsOpen={false} - background="dark"> -

- - - - Manage deployments - -
- -); +export const OpenSearchPluginLinks: OuiListGroupItemProps[] = [ + { label: 'Query Workbench' }, + { label: 'Reporting' }, + { label: 'Alerting' }, + { label: 'Anomaly Detection' }, + { label: 'Notification' }, + { label: 'Observability' }, + { label: 'Security Analytics' }, + { label: 'Index Management' }, + { label: 'Search Relevance' }, +].map((link) => { + return { + ...link, + onClick: () => {}, + }; +}); -export const SecurityGroup = ( - - }> - -

- Threat prevention, detection, and response with SIEM and endpoint - security. -
- Learn more -

- - -); +export const ManagementLinks: OuiListGroupItemProps[] = [ + { label: 'Dev Tools' }, + { label: 'Stack Management' }, +].map((link) => { + return { + ...link, + onClick: () => {}, + }; +}); export default () => ( <> - {DeploymentsGroup} - - {}} + + + + + - {}} + - {SecurityGroup} );