feat: update Tabs component with count summary

__tests__/Unit/Components/Tabs/Tab.test.tsx

@@ -1,7 +1,10 @@
 import Tabs from '@/components/Tabs';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { Tab, TABS } from '@/interfaces/task.type';
 import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+import { renderWithRouter } from '@/test_utils/createMockRouter';
+import { store } from '@/app/store';
+import { Provider } from 'react-redux';
 
 function changeName(name: string) {
     if (name === COMPLETED) {
@@ -15,55 +18,113 @@ function changeName(name: string) {
 
 describe('Tabs Component', () => {
     const onSelectMock = jest.fn();
+    const mockTasksCount = {
+        ASSIGNED: 2,
+        COMPLETED: 4,
+        AVAILABLE: 10,
+        IN_PROGRESS: 0,
+        NEEDS_REVIEW: 0,
+        IN_REVIEW: 0,
+        VERIFIED: 0,
+        MERGED: 0,
+    };
 
-    it('should render all the buttons', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('should render all the buttons', () => {
+        const { queryAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const presentTabs = screen.queryAllByRole('button');
+        const presentTabs = queryAllByRole('button');
         expect(presentTabs.length).toBe(TABS.length);
     });
 
-    it('check if selectTab() is called with right key', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('check if selectTab() is called with right key', () => {
+        const { getByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const assignedBtn = screen.getByRole('button', { name: /ASSIGNED/i });
+        const assignedBtn = getByRole('button', { name: /ASSIGNED/i });
         fireEvent.click(assignedBtn);
         expect(onSelectMock).toHaveBeenCalledWith(Tab.ASSIGNED);
     });
 
-    it('Check if correct button is selected', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.COMPLETED}
-                onSelect={onSelectMock}
-            />
+    test('Check if correct button is selected', () => {
+        const { getByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.COMPLETED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const completedBtn = screen.getByRole('button', { name: /DONE/i });
+        const completedBtn = getByRole('button', { name: /DONE/i });
         expect(completedBtn).toHaveClass('active');
     });
 
-    it('should render all tabs passed with correct text', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('should render all tabs passed with correct text', () => {
+        const { getAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const presentTabs = screen.getAllByRole('button');
+        const presentTabs = getAllByRole('button');
         for (let i = 0; i < presentTabs.length; i++) {
             expect(presentTabs[i].textContent).toBe(changeName(TABS[i]));
         }
     });
+
+    test('should change Tabs design and show tasks count if feature flag is on', () => {
+        const { getByRole, getAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+
+        const presentTabs = getAllByRole('button');
+
+        // tasks count is rendered correctly on screen
+        for (let i = 0; i < presentTabs.length; i++) {
+            expect(presentTabs[i].textContent).toBe(
+                `${changeName(TABS[i])} (${mockTasksCount[TABS[i]]})`
+            );
+        }
+
+        // feature flag's css is applied correctly
+        for (let i = 0; i < presentTabs.length; i++) {
+            expect(presentTabs[i]).toHaveClass('featureFlagTabButton');
+        }
+
+        // active tab's feature flag css is applied correctly
+        const assignedBtn = getByRole('button', {
+            name: /assigned/i,
+        });
+        expect(assignedBtn).toHaveClass('featureFlagActiveTab');
+    });
 });

src/components/Header/Header.module.scss

@@ -1,15 +1,16 @@
 .header {
+    padding-top: 0.6rem;
     display: flex;
     justify-content: center;
-    align-items: center;
     flex-wrap: wrap;
-    padding-top: 0.625rem;
+    align-items: center;
+    border-bottom: 1px solid var(--toastify-text-color-light);
 }
 
 .link {
-    padding: 0.625rem;
+    padding: 0.6rem;
     text-decoration: none;
-    font-weight: bold;
+    font-weight: 700;
     color: #041484;
     cursor: pointer;
     background: none;

src/components/ProgressForm/ProgressForm.module.scss

@@ -11,16 +11,6 @@ $similar-margin: $base-unit * 8;
 $section-padding-top-bottom: $base-unit * 30;
 $section-padding-left-right: $base-unit * 25;
 
-.banner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    width: 100%;
-    margin-top: $diff-margin;
-    margin-left: 8.2rem;
-}
-
 .mark {
     color: $color-red;
     text-decoration: underline;

src/components/ProgressForm/ProgressHeader.tsx

@@ -7,17 +7,19 @@ const ProgressHeader: FC<progressHeaderProps> = ({
     updateType,
 }) => {
     return (
-        <div className={styles.progressBanner}>
-            <p className={styles.bannerPara}>
-                You have
-                <span className={styles.totalMissedUpdates}>
-                    {totalMissedUpdates} missed
-                </span>
-                {updateType} updates
-            </p>
-            <p className={styles.bannerPara}>
-                Let&apos;s try to avoid having zero days
-            </p>
+        <div className={styles.bannerContainer}>
+            <div className={styles.progressBanner}>
+                <p className={styles.bannerPara}>
+                    You have
+                    <span className={styles.totalMissedUpdates}>
+                        {totalMissedUpdates} missed
+                    </span>
+                    {updateType} updates
+                </p>
+                <p className={styles.bannerPara}>
+                    Let&apos;s try to avoid having zero days
+                </p>
+            </div>
         </div>
     );
 };

src/components/ProgressForm/ProgressLayout.tsx

@@ -20,12 +20,10 @@ const ProgressLayout: FC = () => {
     return (
         <>
             <NavBar />
-            <div className={styles.banner}>
-                <ProgressHeader
-                    totalMissedUpdates={totalMissedUpdates}
-                    updateType="Progress"
-                />
-            </div>
+            <ProgressHeader
+                totalMissedUpdates={totalMissedUpdates}
+                updateType="Progress"
+            />
             <section className={styles.container}>
                 <h1 className={styles.formHeading}>Task Updates</h1>
                 <h2 className={styles.date}>On {getCurrentDate()}</h2>

src/components/Tabs/Tabs.module.scss

@@ -1,18 +1,51 @@
 $theme-grey: #d4d4d5;
+$theme-grey-light: #f1f1f5;
+$gray-shade-color: #808080;
+$gray-shade-color2: #5c5b5b;
+$theme-dark-grey: #a1a5b7;
+$theme-pink: #e30062;
 
 .tabButton {
+    border: none;
+    border-bottom: 1.8px solid $theme-grey;
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: $gray-shade-color;
+    background: var(--toastify-color-light);
+    padding: 0.45rem 0.8rem;
+    border-radius: 0.2rem 0.2rem 0 0;
+    cursor: pointer;
+}
+
+.tabButton:hover {
+    color: $gray-shade-color2;
+}
+
+.tabButton:active {
+    background-color: $theme-grey-light;
+}
+
+.active {
+    color: var(--toastify-color-dark);
+    border: 1.8px solid $theme-grey;
+    border-bottom: none;
+    background: var(--toastify-color-light);
+}
+
+.featureFlagTabButton {
     background: white;
     border: none;
     padding: 12px 8px 8px;
     font-size: 0.8em;
-    border-radius: 5px 5px 0 0;
-    border-bottom: 1px solid $theme-grey;
+    border: none;
     cursor: pointer;
+    color: $theme-dark-grey;
 }
 
-.active {
+.featureFlagActiveTab {
     font-weight: bold;
-    border: 1px solid $theme-grey;
-    border-bottom: none;
     background: white;
+    border: none;
+    border-bottom: 3px solid $theme-pink;
+    color: black;
 }

src/components/Tabs/index.tsx

@@ -1,11 +1,13 @@
 import styles from '@/components/Tabs/Tabs.module.scss';
-import { Tab } from '@/interfaces/task.type';
 import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+import { Tab, tasksCountObject } from '@/interfaces/task.type';
+import { useRouter } from 'next/router';
 
 type TabsProps = {
     tabs: Tab[];
     onSelect: (tab: Tab) => void;
     activeTab: Tab;
+    tasksCount: tasksCountObject;
 };
 function changeName(name: string) {
     if (name === COMPLETED) {
@@ -17,20 +19,38 @@ function changeName(name: string) {
     }
 }
 
-const Tabs = ({ tabs, onSelect, activeTab }: TabsProps) => (
-    <>
-        {tabs.map((tab: Tab) => (
-            <button
-                key={tab}
-                onClick={() => onSelect(tab)}
-                className={`${styles.tabButton} ${
-                    activeTab === tab ? styles.active : ''
-                }`}
-            >
-                {changeName(tab)}
-            </button>
-        ))}
-    </>
-);
+const Tabs = ({ tabs, onSelect, activeTab, tasksCount }: TabsProps) => {
+    const router = useRouter();
+    const { query } = router;
+    const isFeatureFlagOn = query.dev === 'true';
+    return (
+        <>
+            {tabs.map((tab: Tab) => (
+                <button
+                    key={tab}
+                    onClick={() => onSelect(tab)}
+                    className={`
+                    ${
+                        isFeatureFlagOn
+                            ? styles.featureFlagTabButton
+                            : styles.tabButton
+                    }
+                    ${
+                        activeTab === tab
+                            ? isFeatureFlagOn
+                                ? styles.featureFlagActiveTab
+                                : styles.active
+                            : ''
+                    }
+                    `}
+                >
+                    {isFeatureFlagOn
+                        ? `${changeName(tab)} (${tasksCount[tab]})`
+                        : changeName(tab)}
+                </button>
+            ))}
+        </>
+    );
+};
 
 export default Tabs;

src/components/standup/index.tsx

@@ -73,12 +73,11 @@ const StandUpContainer: FC = () => {
     return (
         <>
             <section className="container">
+                <ProgressHeader
+                    totalMissedUpdates={totalMissedUpdates}
+                    updateType="Standup"
+                />
                 <div className={styles.standupContainer}>
-                    <ProgressHeader
-                        totalMissedUpdates={totalMissedUpdates}
-                        updateType="Standup"
-                    />
-
                     <div className={styles.standupUpdateContainer}>
                         <h1 className={styles.standupTitle}>Standup Update</h1>
                         <form