Show Entity task/note tabs (#1282)

* - show task tab
- tab bar

* - add notes tab

* - fixed unused style

* - add button
- fixed company edit note test

* - fixed merge & dropdown

* - added Tests
- refactored directory structure activities
- moved Task/Note Pages to corresponding modules
- fixed TabList

* lint

front/src/modules/ui/tab/components/Tab.tsx

@@ -2,26 +2,33 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
+  id: string;
   title: string;
   icon?: React.ReactNode;
   active?: boolean;
   className?: string;
   onClick?: () => void;
+  disabled?: boolean;
 };
 
-const StyledTab = styled.div<{ active?: boolean }>`
+const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
   align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-color: ${({ theme, active }) =>
     active ? theme.border.color.inverted : 'transparent'};
-  color: ${({ theme, active }) =>
-    active ? theme.font.color.primary : theme.font.color.secondary};
+  color: ${({ theme, active, disabled }) =>
+    active
+      ? theme.font.color.primary
+      : disabled
+      ? theme.font.color.light
+      : theme.font.color.secondary};
   cursor: pointer;
 
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2)};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
 `;
 
 const StyledHover = styled.span`
@@ -38,14 +45,22 @@ const StyledHover = styled.span`
 `;
 
 export function Tab({
+  id,
   title,
   icon,
   active = false,
   onClick,
   className,
+  disabled,
 }: OwnProps) {
   return (
-    <StyledTab onClick={onClick} active={active} className={className}>
+    <StyledTab
+      onClick={onClick}
+      active={active}
+      className={className}
+      disabled={disabled}
+      data-testid={'tab-' + id}
+    >
       <StyledHover>
         {icon}
         {title}

front/src/modules/ui/tab/components/TabList.tsx

@@ -10,6 +10,8 @@ type SingleTabProps = {
   title: string;
   icon?: React.ReactNode;
   id: string;
+  hide?: boolean;
+  disabled?: boolean;
 };
 
 type OwnProps = {
@@ -31,17 +33,21 @@ export function TabList({ tabs, context }: OwnProps) {
 
   return (
     <>
-      {tabs.map((tab) => (
-        <Tab
-          key={tab.id}
-          title={tab.title}
-          icon={tab.icon}
-          active={tab.id === activeTabId}
-          onClick={() => {
-            setActiveTabId(tab.id);
-          }}
-        />
-      ))}
+      {tabs
+        .filter((tab) => !tab.hide)
+        .map((tab) => (
+          <Tab
+            id={tab.id}
+            key={tab.id}
+            title={tab.title}
+            icon={tab.icon}
+            active={tab.id === activeTabId}
+            onClick={() => {
+              setActiveTabId(tab.id);
+            }}
+            disabled={tab.disabled}
+          />
+        ))}
     </>
   );
 }

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -26,6 +26,7 @@ export const Catalog: Story = {
   args: { title: 'Tab title', icon: <IconCheckbox /> },
   argTypes: {
     active: { control: false },
+    disabled: { control: false },
     onClick: { control: false },
   },
   parameters: {
@@ -43,6 +44,11 @@ export const Catalog: Story = {
           values: ['true', 'false'],
           props: (active: string) => ({ active: active === 'true' }),
         },
+        {
+          name: 'Disabled',
+          values: ['true', 'false'],
+          props: (disabled: string) => ({ disabled: disabled === 'true' }),
+        },
       ],
     },
   },

front/src/modules/ui/tab/components/__stories__/Tablist.stories.tsx

@@ -0,0 +1,69 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { IconCheckbox } from '@tabler/icons-react';
+
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { TabList } from '../TabList';
+
+const tabs = [
+  {
+    id: '1',
+    title: 'Tab1',
+    icon: <IconCheckbox size={16} />,
+    hide: true,
+  },
+  {
+    id: '2',
+    title: 'Tab2',
+    icon: <IconCheckbox size={16} />,
+    hide: false,
+  },
+  {
+    id: '3',
+    title: 'Tab3',
+    icon: <IconCheckbox size={16} />,
+    hide: false,
+    disabled: true,
+  },
+  {
+    id: '4',
+    title: 'Tab4',
+    icon: <IconCheckbox size={16} />,
+    hide: false,
+    disabled: false,
+  },
+];
+
+const meta: Meta<typeof TabList> = {
+  title: 'UI/Tab/TabList',
+  component: TabList,
+  args: {
+    tabs: tabs,
+  },
+  decorators: [
+    (Story) => (
+      <RecoilScope>
+        <Story />
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabList>;
+
+export const TabListDisplay: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const submitButton = canvas.queryByText('Tab1');
+    expect(submitButton).toBeNull();
+    expect(await canvas.findByText('Tab2')).toBeInTheDocument();
+    expect(await canvas.findByText('Tab3')).toBeInTheDocument();
+    expect(await canvas.findByText('Tab4')).toBeInTheDocument();
+  },
+};