Merge pull request #449 from equinor/feature/sidebar-hide-create

Add 'showCreate' prop to sidebar
equinor · Feb 20, 2024 · bdac608 · bdac608
2 parents fa918b8 + c346ef6
commit bdac608
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/components/Navigation/SideBar/SideBar.test.tsx b/src/components/Navigation/SideBar/SideBar.test.tsx
@@ -146,3 +146,34 @@ test('Render Create button correctly when open', async () => {
   const createButton = screen.getAllByRole('button')[0];
   expect(createButton).toHaveStyleRule('height', '36px');
 });
+
+test('Hides create button when showCreate=false', async () => {
+  const createLabel = faker.animal.dog();
+  const handleOnCreate = vi.fn();
+  window.localStorage.setItem(
+    'amplify-sidebar-state',
+    JSON.stringify({ isOpen: false })
+  );
+  render(
+    <SideBar
+      createLabel={createLabel}
+      onCreate={handleOnCreate}
+      showCreate={false}
+    >
+      {defaultMenuItems.map((m) => (
+        <SideBar.Item key={m.name} {...m} />
+      ))}
+    </SideBar>,
+    { wrapper: SideBarProvider }
+  );
+  const user = userEvent.setup();
+
+  await user.click(screen.getAllByRole('button')[0]);
+
+  const icons = screen.getAllByTestId('eds-icon-path');
+  for (const icon of icons) {
+    expect(icon).not.toHaveAttribute('d', add.svgPathData);
+  }
+
+  expect(screen.queryByText(createLabel)).not.toBeInTheDocument();
+});
diff --git a/src/components/Navigation/SideBar/SideBar.tsx b/src/components/Navigation/SideBar/SideBar.tsx
@@ -45,6 +45,7 @@ const TopContainer = styled.div`
 
 interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
+  showCreate?: boolean;
 }
 
 interface SideBarWithoutCreate extends SidebarProps {
@@ -61,7 +62,7 @@ export const SideBar = forwardRef<
   HTMLDivElement,
   SidebarWithCreate | SideBarWithoutCreate
 >((props, ref) => {
-  const { children } = props;
+  const { children, showCreate = true } = props;
   const { isOpen, setIsOpen } = useSideBar();
 
   const handleToggle = () => {
@@ -75,7 +76,7 @@ export const SideBar = forwardRef<
       data-testid="sidebar"
     >
       <TopContainer>
-        {props.onCreate && (
+        {props.onCreate && showCreate && (
           <CreateItem
             createLabel={props.createLabel}
             onCreate={props.onCreate}