LPD-91502 Render tabs if FF is enabled

Author: sandrodw3

modules/apps/site/site-cms-site-initializer/src/main/resources/META-INF/resources/js/main_view/dashboard/Dashboards.tsx

@@ -4,31 +4,37 @@
  */
 
 import ClayLayout from '@clayui/layout';
+import ClayLink from '@clayui/link';
+import ClayNavigationBar from '@clayui/navigation-bar';
 import {ClayTooltipProvider} from '@clayui/tooltip';
-import React from 'react';
+import React, {useState} from 'react';
 
 import Breadcrumb from '../../common/components/Breadcrumb';
 import InventoryDashboard from './inventory/InventoryDashboard';
+import PerformanceDashboard from './performance/PerformanceDashboard';
 
 import '../../../css/dashboard/Dashboard.scss';
 
 import {ILearnResourceContext} from 'frontend-js-components-web';
 
 import EnterpriseOnlyPlaceholder from '../../common/components/EnterpriseOnlyPlaceholder';
 
-interface IDashboards {
-	constants: {
-		[key: string]: string;
-	};
-	freeTier: boolean;
-	learnResources: ILearnResourceContext;
-}
+const TABS = {
+	inventory: Liferay.Language.get('inventory'),
+	performance: Liferay.Language.get('performance'),
+} as const;
+
+type TabId = keyof typeof TABS;
 
-const Dashboards: React.FC<IDashboards> = ({
+function Wrapper({
 	constants,
 	freeTier,
 	learnResources,
-}) => {
+}: {
+	constants: {[key: string]: string};
+	freeTier: boolean;
+	learnResources: ILearnResourceContext;
+}) {
 	return (
 		<>
 			<Breadcrumb
@@ -38,18 +44,87 @@ const Dashboards: React.FC<IDashboards> = ({
 			/>
 
 			<ClayTooltipProvider>
-				<ClayLayout.Container className="px-4" fluid>
-					{freeTier ? (
-						<EnterpriseOnlyPlaceholder
-							learnResources={learnResources}
-						/>
-					) : (
-						<InventoryDashboard constants={constants} />
-					)}
-				</ClayLayout.Container>
+				<Dashboards
+					constants={constants}
+					freeTier={freeTier}
+					learnResources={learnResources}
+				/>
 			</ClayTooltipProvider>
 		</>
 	);
-};
+}
+
+function Dashboards({
+	constants,
+	freeTier,
+	learnResources,
+}: {
+	constants: {[key: string]: string};
+	freeTier: boolean;
+	learnResources: ILearnResourceContext;
+}) {
+	const [tabId, setTabId] = useState<TabId>('inventory');
+
+	if (freeTier) {
+		return (
+			<ClayLayout.Container className="px-4" fluid>
+				<EnterpriseOnlyPlaceholder learnResources={learnResources} />
+			</ClayLayout.Container>
+		);
+	}
+
+	if (!Liferay.FeatureFlags['LPD-58315']) {
+		return (
+			<ClayLayout.Container className="px-4" fluid>
+				<InventoryDashboard constants={constants} />
+			</ClayLayout.Container>
+		);
+	}
+
+	return (
+		<>
+			<Tabs setTabId={setTabId} tabId={tabId} />
+
+			<ClayLayout.Container className="px-4" fluid>
+				{tabId === 'inventory' ? (
+					<InventoryDashboard constants={constants} />
+				) : null}
+
+				{tabId === 'performance' ? <PerformanceDashboard /> : null}
+			</ClayLayout.Container>
+		</>
+	);
+}
+
+function Tabs({
+	setTabId,
+	tabId,
+}: {
+	setTabId: (id: TabId) => void;
+	tabId: TabId;
+}) {
+	return (
+		<ClayNavigationBar
+			className="mb-4"
+			fluidSize={false}
+			triggerLabel={TABS[tabId]}
+		>
+			{(Object.keys(TABS) as TabId[]).map((id) => (
+				<ClayNavigationBar.Item active={id === tabId} key={id}>
+					<ClayLink
+						onClick={(event) => {
+							event.preventDefault();
+
+							setTabId(id);
+						}}
+						role="tab"
+					>
+						{TABS[id]}
+					</ClayLink>
+				</ClayNavigationBar.Item>
+			))}
+		</ClayNavigationBar>
+	);
+}
 
-export default Dashboards;
+export default Wrapper;

modules/apps/site/site-cms-site-initializer/src/main/resources/META-INF/resources/js/main_view/dashboard/performance/PerformanceDashboard.tsx

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2025 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import React from 'react';
+
+export default function PerformanceDashboard() {
+	return <div />;
+}