110e6085b8
## Description This PR includes changes for renaming design system package. Since we are building new package for the refactored design system components, the old package is renaming to design-system-old. Fixes #19536 ## Type of change - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) ## How Has This Been Tested? - Manual - Jest - Cypress ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React, { RefObject, useMemo } from "react";
|
|
import {
|
|
CollapsibleTabProps,
|
|
collapsibleTabRequiredPropKeys,
|
|
TabComponent,
|
|
TabProp,
|
|
} from "design-system-old";
|
|
import AnalyticsUtil from "utils/AnalyticsUtil";
|
|
import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers";
|
|
|
|
type EntityBottomTabsProps = {
|
|
tabs: TabProp[];
|
|
responseViewer?: boolean;
|
|
onSelect?: (tab: TabProp["key"]) => void;
|
|
selectedTabKey: string;
|
|
canCollapse?: boolean;
|
|
// Reference to container for collapsing or expanding content
|
|
containerRef?: RefObject<HTMLElement>;
|
|
// height of container when expanded
|
|
expandedHeight?: string;
|
|
};
|
|
|
|
type CollapsibleEntityBottomTabsProps = EntityBottomTabsProps &
|
|
CollapsibleTabProps;
|
|
|
|
// Tab is considered collapsible only when all required collapsible props are present
|
|
export const isCollapsibleEntityBottomTab = (
|
|
props: EntityBottomTabsProps | CollapsibleEntityBottomTabsProps,
|
|
): props is CollapsibleEntityBottomTabsProps =>
|
|
collapsibleTabRequiredPropKeys.every((key) => key in props);
|
|
|
|
// Using this if there are debugger related tabs
|
|
function EntityBottomTabs(
|
|
props: EntityBottomTabsProps | CollapsibleEntityBottomTabsProps,
|
|
) {
|
|
const onTabSelect = (index: number) => {
|
|
const tab = props.tabs[index];
|
|
props.onSelect && props.onSelect(tab.key);
|
|
|
|
if (Object.values<string>(DEBUGGER_TAB_KEYS).includes(tab.key)) {
|
|
AnalyticsUtil.logEvent("DEBUGGER_TAB_SWITCH", {
|
|
tabName: tab.key,
|
|
});
|
|
}
|
|
};
|
|
|
|
const getIndex = useMemo(() => {
|
|
const index = props.tabs.findIndex(
|
|
(tab) => tab.key === props.selectedTabKey,
|
|
);
|
|
|
|
if (index >= 0) {
|
|
return index;
|
|
}
|
|
|
|
return 0;
|
|
}, [props.selectedTabKey]);
|
|
|
|
return (
|
|
<TabComponent
|
|
onSelect={onTabSelect}
|
|
responseViewer={props.responseViewer}
|
|
selectedIndex={getIndex}
|
|
tabs={props.tabs}
|
|
{...(isCollapsibleEntityBottomTab(props)
|
|
? {
|
|
containerRef: props.containerRef,
|
|
expandedHeight: props.expandedHeight,
|
|
}
|
|
: {})}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default EntityBottomTabs;
|