React SuperTabs

SuperTabs is a powerful and user-friendly tab management component. It enables seamless navigation by opening modules as tabs, with support for sub-tabs, smooth transitions. An experimental keep-alive feature ensures components stay active across tab switches for enhanced usability.

SuperTabs Features

• Tab-based Navigation: Open modules as tabs for an intuitive and efficient navigation experience.
• Sub-Tabs Support: Create nested sub-tabs within a main tab for hierarchical organization.
• Smooth Transitions: Enjoy a polished user experience with fluid tab-switching animations.
• Keep-Alive (Experimental): Maintain the state of components across tab switches for seamless interaction (experimental feature).

Installation and usage

Basic

Import TabProvider and wrap it around the main wrapper

• This is needed to access useTabContext.
• Make sure to pass SITE_PREFIX and SITE_PAGES (From Navigation.js)
• homeUrl is optional and defaults to "/"
• persistTabsAfterLogin is optional and defaults to "false"
  • Used to preserve tab state upon login.
• entityIdentifierKey is optional and defaults to 'organization_id',
  • Used to identify the organization / client id
• preventHomeRedirect is optional and defaults to false,
  • This will open a menu on click of home button instead of redirecting
• handleOpenTab async function to open the tab in backend
  • expects the following keys in return
  • { status: 1, tabId, children: undefined }
• handleCloseTab async function to open the tab in backend
  • expects the following keys in return
  • { status: 1, current_tab_id: 123 }
• handleReorderTabs async function to open the tab in backend
  • { status: 1 }
• getTabs async function to open the tab in backend async () => { },
  • expects the following keys in return
  • { status: 1, tabs: [], current_tab: {} || null, hasNoTabs }
  • hasNoTabs = user for whom there are no tabs open
• getUserDetails function which return the user details from user token
• hasPrivilege function which checks if the user has the privilege passed in function param
• alertService An object containing different methods for displaying toast alerts.
  • can call success, warning, error, info, alert methods.
  • super-notifier - NPM package can be used here
  • https://www.npmjs.com/package/super-notifier

Eg. 
const SITE_PREFIX = 'teamLink_'
const API_BASE_URL = 'https://api.teamlink.com/data_stream'
const SITE_PAGES = [{
	title:  "Organization",
	url:  "/app/organization",
	privilege:  "ORGANIZATION",
	id:  1,
},
{
	title:  "Recruiter",
	url:  "/app/recruiter/f-home",
	privilege:  "RECRUITER",
	showAddButton:  true,
    customAddButtons: [
      {
        name: "Data Grid",
        id: 1,
      },
      {
        name: "Trend Master",
        id: 2,
      }
    ],
	containsSubTabs:  true,
	id:  2,
}]

// showAddButton - can be added if the module needs plus button.
// containsSubTabs - can be added if the tab includes sub tabs.
// customAddButtons - These buttons will be added in the sub tab list. Clicking on the button will trigger the binded callback with object as param.

import { TabProvider } from 'components/SuperTabs/TabContext';
<TabProvider
    SITE_PREFIX={SITE_PREFIX}
    SITE_PAGES={SITE_PAGES}
    homeUrl="/app"
    getTabs={getTabs}
    handleOpenTab={handleOpenTab}
    handleCloseTab={handleCloseTab}
    handleReorderTabs={handleReorderTabs}
    alertService={alertService}
>
    <Main />
</TabProvider>

Render the component within the App's header

import { useTabContext } from "components/SuperTabs/TabContext";

<header>
    <SuperTabs />
</header>

Wrap the hyperlink as follows:

Each tab should contain all the necessary information to be stored.

Mandatory Fields:

• id
• name
• url

For Avatar:

• showAvatar must be set to true
• The following fields must be provided:
  • firstName
  • lastName
  • imgSrc

// Tab object Examples

{
    id: 1,
    name: 'title',
    url: '/recruiter/f-1`
}

{
    id: 100,
    url: '/profile/100`
    firstName: 'John',
    lastName: 'Doe',
    showAvatar: true,
    imgSrc: img_url,
    department,
    designation,
    department_id,
}

import SuperLink from "components/SuperTabs/SuperLink";
<SuperLink tab={page} isSubTab={false}>
    {page.title}
</SuperLink>

OR

import { useTabContext } from "components/SuperTabs/TabContext";
const { openSuperTabOnRowClick } = useTabContext();

function handleRowClick(e) {
    const tab = { id: e.id, name: e.name, url: `/recruiter/f-${e.id}` };
    // isSubTab defaults to true
    openSuperTabOnRowClick({ tab, isSubTab });
}

Bind the callback for the plus button to each module during the initial render.

If a module requires a plus button for adding a new tab, you can include the following:

import { emitter } from "components/SuperTabs/SuperTabs";
import { useTabContext } from "components/SuperTabs/TabContext";

const { openSuperTabOnRowClick } = useTabContext();

const handleTabAddBtn = useCallback(() => {
    openSuperTabOnRowClick({
        tab: {
            id: 123,
            name: `New Funnel`,
            url: `/recruiter/f-${123}`,
        },
        isSubTab: true,
    });
}, [openSuperTabOnRowClick]);

useEffect(() => {
    const unsub = emitter.emit("bindCallback", {
        id: 2, // Same id provided for this module in navigation.js
        callback: handleTabAddBtn,
    });
    return unsub;
}, [handleTabAddBtn]);

Note: The logo of the home tab can be updated by targeting the brand-logo class.

Advanced

Cleanup

When a tab is closed, it may be necessary to clean up some data. The superTabClose event can be utilized for this purpose.

import { emitter } from  'components/SuperTabs/SuperTabs';

useEffect(() => {
	const  unsub  =  emitter.subscribe('superTabClose', ({ appId, isSubTab, tab }) => {
		// Same id provided for this module in navigation.js
		if (appId === 2 && isSubTab) {
			// handle clean up here
		}
	})
	return unsub;
}, []);

Not Available page

• If a profile is deleted, the tab will remain open. To address this, we can display a "Page Not Available" message.

import  NotAvailable  from  'components/SuperTabs/NotAvailable';

<NotAvailable  subTabName='Profile' />

Keep Alive (Experimental)

import { withKeepAlive } from  "components/SuperTabs/KeepAlive";

// Same id provided for this module in navigation.js
export  default  withKeepAlive(Component, Unique ID);

Eg.
const  Component  = () => {
	return <div>Component</div>
}

export  default  withKeepAlive(Component, 2);

Keep Alive Cleanup

// This can be incorporated into a component that is always rendered, such as the header.

import { useAliveScope } from  "components/SuperTabs/KeepAlive";
import  { emitter } from  "components/SuperTabs/SuperTabs";

const { drop } =  useAliveScope();

useEffect(() => {
	const unsub = emitter.subscribe('superTabClose', (e) => {
		const { appId, isSubTab } =  e;
		if (appId && !isSubTab) {
			// drop the cache of the tab
			drop(appId);
		}
	})
	return unsub;
}, []);