Skip to content

Commit

Permalink
[Beta] Add EuiCollapsibleNavItem component (#6904)
Browse files Browse the repository at this point in the history 
* Set up `EuiCollapsibleNavItem` component + subcomponents

- Because of the potentially recursive nature of this component, splitting it up into multiple sub-components that differentiate styling by an `isSubItem` prop is the easiest way to go

* Set up extremely light EuiCollapsibleNav beta styles

- Full component work will come in later PR

* Add detailed Stories for QA testing

* Exports

* [docs webpack] ignore circular dependency error

+ add component comment for future-proofing

* Change `iconType` to `icon`

- per recent team discussion on prop naming

* [PR feedback] Add optional `iconProps`
  • Loading branch information
@cee-chen
cee-chen authored Jul 21, 2023
1 parent 0fc3700 commit 0ccd0c7
Show file tree
Hide file tree
Showing 20 changed files with 2,023 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src-docs/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const webpackConfig = new Promise(async (resolve, reject) => {
}),

new CircularDependencyPlugin({
exclude: /node_modules/,
exclude: /node_modules|collapsible_nav_item/, // EuiCollapsibleNavItem is intentionally recursive to support any amount of nested accordion items
failOnError: true,
}),

Expand Down
370 changes: 370 additions & 0 deletions src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,370 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import React, { FunctionComponent } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';

import { EuiCollapsibleNavItem } from './collapsible_nav_item';
import { EuiCollapsibleNavBeta } from './collapsible_nav_beta';

// TODO: EuiCollapsibleNavBetaProps
const meta: Meta<{}> = {
title: 'EuiCollapsibleNavBeta',
};
export default meta;
type Story = StoryObj<{}>;

// TODO: Make this a stateful component in upcoming EuiCollapsibleNavBeta work
const OpenCollapsibleNav: FunctionComponent<{}> = ({ children }) => {
return (
<EuiCollapsibleNavBeta isOpen={true} onClose={() => {}}>
{children}
</EuiCollapsibleNavBeta>
);
};

export const KibanaExample: Story = {
render: () => (
<OpenCollapsibleNav>
<EuiFlyoutBody>
<EuiCollapsibleNavItem title="Home" icon="home" isSelected href="#" />
<EuiCollapsibleNavItem
title="Recent"
icon="clock"
items={[
{ title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
{ title: 'Consectetur cursus', icon: 'visPie', href: '#' },
{ title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Elasticsearch"
icon="logoElasticsearch"
href="#"
items={[
{ title: 'Get started', href: '#' },
{ title: 'Explore', isGroupTitle: true },
{ title: 'Discover', href: '#' },
{ title: 'Dashboards', href: '#' },
{ title: 'Visualize library', href: '#' },
{ title: 'Content', isGroupTitle: true },
{ title: 'Indices', href: '#' },
{ title: 'Transforms', href: '#' },
{ title: 'Indexing API', href: '#' },
{ title: 'Security', isGroupTitle: true },
{ title: 'API keys', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Enterprise Search"
icon="logoEnterpriseSearch"
href="#"
items={[
{ title: 'ESRE', href: '#' },
{ title: 'Vector search', href: '#' },
{ title: 'Content', href: '#' },
{ title: 'Search applications', href: '#' },
{ title: 'Behavioral analytics', href: '#' },
{ title: 'Elasticsearch', href: '#' },
{ title: 'App search', href: '#' },
{ title: 'Workplace search', href: '#' },
{ title: 'Search experiences', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Observability"
icon="logoObservability"
href="#"
items={[
{ title: 'Get started', href: '#' },
{ title: 'Alerts', href: '#' },
{ title: 'Cases', href: '#' },
{ title: 'SLOs', href: '#' },
{ title: 'Signals', isGroupTitle: true },
{ title: 'Logs', href: '#' },
{
title: 'Tracing',
href: '#',
items: [
{ title: 'Services', href: '#' },
{ title: 'Traces', href: '#' },
{ title: 'Dependencies', href: '#' },
],
},
{ title: 'Toolbox', isGroupTitle: true },
{ title: 'Visualize library', href: '#' },
{ title: 'Dashboards', href: '#' },
{
title: 'AIOps',
href: '#',
items: [
{ title: 'Anomaly detection', href: '#' },
{ title: 'Spike analysis', href: '#' },
{ title: 'Change point detection', href: '#' },
{ title: 'Notifications', href: '#' },
],
},
{ title: 'Add data', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Security"
icon="logoSecurity"
href="#"
items={[
{ title: 'Get started', href: '#' },
{ title: 'Dashboards', href: '#' },
{ title: 'Alerts', href: '#' },
{ title: 'Findings', href: '#' },
{ title: 'Cases', href: '#' },
{ title: 'Investigation', href: '#' },
{ title: 'Intelligence', href: '#' },
{
title: 'Explore',
href: '#',
items: [
{ title: 'Host', href: '#' },
{ title: 'Users', href: '#' },
{ title: 'Network', href: '#' },
],
},
{ title: 'Assets', href: '#' },
{
title: 'Rules',
href: '#',
items: [
{ title: 'SIEM rules', href: '#' },
{ title: 'Shared exception list', href: '#' },
{ title: 'CIS benchmark rules', href: '#' },
{ title: 'Defend rules', href: '#' },
],
},
{
title: 'Machine learning',
href: '#',
items: [
{ title: 'Overview', href: '#' },
{ title: 'Notifications', href: '#' },
{ title: 'Memory usage', href: '#' },
{ title: 'Anomaly detection', href: '#' },
{ title: 'Data frame analytics', href: '#' },
{ title: 'Model management', href: '#' },
],
},
{
title: 'Settings',
href: '#',
items: [
{ title: 'Endpoints', href: '#' },
{ title: 'OS query', href: '#' },
{ title: 'Response actions history', href: '#' },
{ title: 'Event filters', href: '#' },
{ title: 'Host isolation', href: '#' },
],
},
]}
/>
<EuiCollapsibleNavItem
title="Analytics"
icon="stats"
href="#"
items={[
{ title: 'Discover', href: '#' },
{ title: 'Dashboard', href: '#' },
{ title: 'Visualize library', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Machine learning"
icon="indexMapping"
href="#"
items={[
{ title: 'Overview', href: '#' },
{ title: 'Notifications', href: '#' },
{ title: 'Memory usage', href: '#' },
{ title: 'Anomaly detection', isGroupTitle: true },
{ title: 'Jobs', href: '#' },
{ title: 'Anomaly explorer', href: '#' },
{ title: 'Single metric viewer', href: '#' },
{ title: 'Settings', href: '#' },
{ title: 'Data frame analytics', isGroupTitle: true },
{ title: 'Jobs', href: '#' },
{ title: 'Results explorer', href: '#' },
{ title: 'Analytics map', href: '#' },
{ title: 'Model management', isGroupTitle: true },
{ title: 'Trained models', href: '#' },
{ title: 'Data visualizer', isGroupTitle: true },
{ title: 'File', href: '#' },
{ title: 'Data view', href: '#' },
]}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiCollapsibleNavItem
title="Developer tools"
icon="editorCodeBlock"
href="#"
items={[
{ title: 'Console', href: '#' },
{ title: 'Search profiler', href: '#' },
{ title: 'Grok debugger', href: '#' },
{ title: 'Painless lab', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Management"
icon="gear"
items={[
{ title: 'Integrations', href: '#' },
{ title: 'Fleet', href: '#' },
{ title: 'Osquery', href: '#' },
{ title: 'Stack monitoring', href: '#' },
{ title: 'Stack management', href: '#' },
]}
/>
<EuiCollapsibleNavItem
title="Project settings"
icon="gear"
items={[
{ title: 'Management', href: '#' },
{
title: 'Users and roles',
href: '#',
linkProps: { target: '_blank' },
},
{
title: 'Performance',
href: '#',
linkProps: { target: '_blank' },
},
{
title: 'Billing and subscription',
href: '#',
linkProps: { target: '_blank' },
},
]}
/>
</EuiFlyoutFooter>
</OpenCollapsibleNav>
),
};

// Security has a very custom nav
export const SecurityExample: Story = {
render: () => (
<OpenCollapsibleNav>
<EuiFlyoutBody>
<EuiCollapsibleNavItem
title="Recent"
icon="clock"
items={[
{ title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
{ title: 'Consectetur cursus', icon: 'visPie', href: '#' },
{ title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
]}
/>
<EuiCollapsibleNavItem
isSelected
title="Security"
icon="logoSecurity"
href="#"
// Workaround to always display this section as open and remove the accordion toggle
// Rather than baking in a top-level prop to support this behavior, this is likely
// the path we'd recommend to Security instead if their use-case isn't standard
accordionProps={{
forceState: 'open',
arrowProps: { css: { display: 'none' } },
}}
items={[
{ title: 'Get started', href: '#' },
{ title: 'Dashboards', href: '#' },
{ title: 'Alerts', href: '#' },
{ title: 'Findings', href: '#' },
{ title: 'Cases', href: '#' },
{ title: 'Investigation', href: '#' },
{ title: 'Intelligence', href: '#' },
{
title: 'Explore',
href: '#',
items: [
{ title: 'Host', href: '#' },
{ title: 'Users', href: '#' },
{ title: 'Network', href: '#' },
],
},
{ title: 'Assets', href: '#' },
{
title: 'Rules',
href: '#',
items: [
{ title: 'SIEM rules', href: '#' },
{ title: 'Shared exception list', href: '#' },
{ title: 'CIS benchmark rules', href: '#' },
{ title: 'Defend rules', href: '#' },
],
},
{
title: 'Machine learning',
href: '#',
items: [
{ title: 'Overview', href: '#' },
{ title: 'Notifications', href: '#' },
{ title: 'Memory usage', href: '#' },
{ title: 'Anomaly detection', href: '#' },
{ title: 'Data frame analytics', href: '#' },
{ title: 'Model management', href: '#' },
],
},
{
title: 'Settings',
href: '#',
items: [
{ title: 'Endpoints', href: '#' },
{ title: 'OS query', href: '#' },
{ title: 'Response actions history', href: '#' },
{ title: 'Event filters', href: '#' },
{ title: 'Host isolation', href: '#' },
],
},
]}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiCollapsibleNavItem
title="Developer tools"
icon="editorCodeBlock"
href="#"
/>
<EuiCollapsibleNavItem
title="Project settings"
icon="gear"
items={[
{ title: 'Management', href: '#' },
{
title: 'Users and roles',
href: '#',
linkProps: { target: '_blank' },
},
{
title: 'Performance',
href: '#',
linkProps: { target: '_blank' },
},
{
title: 'Billing and subscription',
href: '#',
linkProps: { target: '_blank' },
},
]}
/>
</EuiFlyoutFooter>
</OpenCollapsibleNav>
),
};
Loading

0 comments on commit 0ccd0c7

Please sign in to comment.