omit unnecessary contents of Sidebar

package.json

@@ -153,10 +153,8 @@
     ],
     "@alienfast/i18next-loader": "^1.0.16",
     "@atlaskit/drawer": "^5.3.5",
-    "@atlaskit/inline-dialog": "^12.1.11",
     "@atlaskit/logo": "^12.3.3",
     "@atlaskit/navigation-next": "^8.0.2",
-    "@atlaskit/toggle": "^8.1.6",
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/polyfill": "^7.4.4",

src/client/js/components/Sidebar.jsx

@@ -3,132 +3,70 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import Avatar from '@atlaskit/avatar';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import BacklogIcon from '@atlaskit/icon/glyph/backlog';
 import BoardIcon from '@atlaskit/icon/glyph/board';
-import DashboardIcon from '@atlaskit/icon/glyph/dashboard';
-import FolderIcon from '@atlaskit/icon/glyph/folder';
 import GraphLineIcon from '@atlaskit/icon/glyph/graph-line';
-import IssuesIcon from '@atlaskit/icon/glyph/issues';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import { JiraIcon, JiraWordmark } from '@atlaskit/logo';
-import { ToggleStateless } from '@atlaskit/toggle';
-import { gridSize as gridSizeFn } from '@atlaskit/theme';
-import InlineDialog from '@atlaskit/inline-dialog';
 
 import {
-  ContainerHeader,
   GlobalNav,
   GroupHeading,
   HeaderSection,
-  Item as ItemComponent,
-  ItemAvatar,
+  Item,
   LayoutManager,
   MenuSection,
   NavigationProvider,
   Separator,
   Wordmark,
 } from '@atlaskit/navigation-next';
+import Drawer from '@atlaskit/drawer';
 
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
+class GlobalNavigation extends React.Component {
 
-const gridSize = gridSizeFn();
+  state = {
+    isDrawerOpen: false,
+  };
 
-const Item = ({ testKey, ...props }) => {
-  const item = <ItemComponent {...props} />;
-  return testKey ? <div data-webdriver-test-key={testKey}>{item}</div> : item;
-};
+  openDrawer = () => this.setState({ isDrawerOpen: true });
 
-/**
- * Global navigation
- */
-const globalNavPrimaryItems = [
-  {
-    id: 'jira',
-    icon: () => <JiraIcon size="medium" label="Jira" />,
-    label: 'Jira',
-  },
-  { id: 'search', icon: SearchIcon, label: 'Search' },
-  { id: 'create', icon: AddIcon, label: 'Add' },
-];
+  closeDrawer = () => this.setState({ isDrawerOpen: false });
 
-const globalNavSecondaryItems = [
-  {
-    id: '10-composed-navigation',
-    icon: QuestionCircleIcon,
-    label: 'Help',
-    size: 'small',
-  },
-  {
-    id: '10-composed-navigation-2',
-    icon: () => (
-      <Avatar
-        borderColor="transparent"
-        isActive={false}
-        isHover={false}
-        size="small"
-      />
-    ),
-    label: 'Profile',
-    size: 'small',
-  },
-];
+  render() {
+    const { isDrawerOpen } = this.state;
+    return (
+      <div>
+        <GlobalNav
+          primaryItems={[
+            {
+              id: 'jira',
+              icon: () => <JiraIcon size="medium" label="Jira" />,
+              label: 'Jira',
+            },
+            {
+              id: 'search',
+              icon: SearchIcon,
+              label: 'Search',
+              onClick: this.openDrawer,
+            },
+            { id: 'create', icon: AddIcon, label: 'Add' },
+          ]}
+          secondaryItems={[]}
+        />
+        <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
+          <code>Drawer contents</code>
+        </Drawer>
+      </div>
+    );
+  }
 
-const GlobalNavigation = () => (
-  <div data-webdriver-test-key="global-navigation">
-    <GlobalNav
-      primaryItems={globalNavPrimaryItems}
-      secondaryItems={globalNavSecondaryItems}
-    />
-  </div>
-);
+}
 
-const TestMark = ({ id, children }) => (
-  <div data-webdriver-test-key={id}>{children}</div>
-);
-
-/**
- * Content navigation
- */
-const ProductNavigation = () => (
-  <div data-webdriver-test-key="product-navigation">
-    <HeaderSection>
-      {({ className }) => (
-        <div className={className}>
-          <TestMark id="product-header">
-            <Wordmark wordmark={JiraWordmark} />
-          </TestMark>
-        </div>
-      )}
-    </HeaderSection>
-    <MenuSection>
-      {({ className }) => (
-        <div className={className}>
-          <Item
-            before={DashboardIcon}
-            text="Dashboards"
-            testKey="product-item-dashboards"
-          />
-          <Item
-            before={FolderIcon}
-            text="Projects"
-            testKey="product-item-projects"
-          />
-          <Item
-            before={IssuesIcon}
-            text="Issues"
-            testKey="product-item-issues"
-          />
-        </div>
-      )}
-    </MenuSection>
-  </div>
-);
 
 class Sidebar extends React.Component {
 
@@ -136,45 +74,19 @@ class Sidebar extends React.Component {
     super(props);
 
     this.state = {
-      shouldDisplayContainerNav: true,
-      dialogOpen: false,
+      isDrawerOpen: false,
     };
 
-    this.toggleContainerNav = this.toggleContainerNav.bind(this);
     this.renderContainerNavigation = this.renderContainerNavigation.bind(this);
   }
 
-  toggleContainerNav() {
-    this.setState(state => ({
-      shouldDisplayContainerNav: !state.shouldDisplayContainerNav,
-    }));
-  }
-
   renderContainerNavigation() {
     return (
       <div data-webdriver-test-key="container-navigation">
         <HeaderSection>
-          {({ css }) => (
-            <div
-              data-webdriver-test-key="container-header"
-              css={{
-                ...css,
-                paddingBottom: gridSize * 2.5,
-              }}
-            >
-              <ContainerHeader
-                before={itemState => (
-                  <ItemAvatar
-                    itemState={itemState}
-                    appearance="square"
-                    size="large"
-                  />
-                )}
-                text="My software project"
-                subText="Software project"
-              />
-            </div>
-          )}
+          { () => (
+            <Wordmark wordmark={JiraWordmark} />
+          ) }
         </HeaderSection>
         <MenuSection>
           {({ className }) => (
@@ -183,39 +95,19 @@ class Sidebar extends React.Component {
                 before={BacklogIcon}
                 text="Backlog"
                 isSelected
-                testKey="container-item-backlog"
               />
               <Item
                 before={BoardIcon}
                 text="Active sprints"
-                testKey="container-item-sprints"
               />
               <Item
                 before={GraphLineIcon}
                 text="Reports"
-                testKey="container-item-reports"
               />
               <Separator />
               <GroupHeading>Shortcuts</GroupHeading>
               <Item before={ShortcutIcon} text="Project space" />
               <Item before={ShortcutIcon} text="Project repo" />
-              <InlineDialog
-                onClose={() => {
-                  this.setState({ dialogOpen: false });
-                }}
-                content={<div>Renders correctly without getting chopped off</div>}
-                isOpen={this.state.dialogOpen}
-                placement="right"
-              >
-                <Item
-                  onClick={() => {
-                    this.setState({ dialogOpen: true });
-                  }}
-                  before={GraphLineIcon}
-                  text="Item with InlineDialog"
-                  testKey="container-item-click"
-                />
-              </InlineDialog>
             </div>
           )}
         </MenuSection>
@@ -224,26 +116,13 @@ class Sidebar extends React.Component {
   }
 
   render() {
-    const { shouldDisplayContainerNav } = this.state;
     return (
       <NavigationProvider>
         <LayoutManager
           globalNavigation={GlobalNavigation}
-          productNavigation={ProductNavigation}
-          containerNavigation={
-            shouldDisplayContainerNav ? this.renderContainerNavigation : null
-          }
+          productNavigation={() => null}
+          containerNavigation={this.renderContainerNavigation}
         >
-          <div
-            data-webdriver-test-key="content"
-            style={{ padding: `${gridSize * 4}px ${gridSize * 5}px` }}
-          >
-            <ToggleStateless
-              isChecked={shouldDisplayContainerNav}
-              onChange={this.toggleContainerNav}
-            />{' '}
-            Display container navigation layer
-          </div>
         </LayoutManager>
       </NavigationProvider>
     );

yarn.lock

@@ -79,17 +79,6 @@
     tslib "^1.9.3"
     uuid "^3.1.0"
 
-"@atlaskit/inline-dialog@^12.1.11":
-  version "12.1.11"
-  resolved "https://registry.yarnpkg.com/@atlaskit/inline-dialog/-/inline-dialog-12.1.11.tgz#a14040b598148c3c4ed6503c9f28902e4c0ef713"
-  integrity sha512-O7kZb+so6X01RNPqgbiunRvJ5WH/UHGa5wStNY+tp1g/gpDMVJtDhcpZR8dcqFmG60KaL8w60sR7TqRzwCD03w==
-  dependencies:
-    "@atlaskit/analytics-next" "^6.3.5"
-    "@atlaskit/popper" "^3.1.11"
-    "@atlaskit/theme" "^9.5.1"
-    react-node-resolver "^1.0.1"
-    tslib "^1.9.3"
-
 "@atlaskit/item@^11.0.2":
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/@atlaskit/item/-/item-11.0.2.tgz#6f870fd8e45cb8670efb3e9aeb62cf7d8dd12d62"
@@ -193,16 +182,6 @@
     prop-types "^15.5.10"
     tslib "^1.9.3"
 
-"@atlaskit/toggle@^8.1.6":
-  version "8.1.6"
-  resolved "https://registry.yarnpkg.com/@atlaskit/toggle/-/toggle-8.1.6.tgz#b1a661f6cbf842fc689a7008136ce26f86e9e856"
-  integrity sha512-eF9RBDHoibpJZet8o0Zc1I2EW/ujj5zsvSvAUPlVBGIKQk8Cqgtxwra57Phxsc4HlapAGpB7hns4pqDOIxG2mQ==
-  dependencies:
-    "@atlaskit/analytics-next" "^6.3.5"
-    "@atlaskit/theme" "^9.5.1"
-    react-uid "^2.2.0"
-    tslib "^1.9.3"
-
 "@atlaskit/tooltip@^15.2.5":
   version "15.2.5"
   resolved "https://registry.yarnpkg.com/@atlaskit/tooltip/-/tooltip-15.2.5.tgz#a0bdc2e00f28cba11253c6f69df870d927dacd2e"