@databiosphere/findable-ui 37.1.0 → 38.0.0

package/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 
 export interface TitleLayoutProps extends LayoutSpacing {
   children: ReactNode;

package/src/components/DataDictionary/components/Table/table.tsx

@@ -6,8 +6,8 @@ import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
 import { GridPaper } from "../../../common/Paper/paper.styles";
-import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
 export const Table = <T extends RowData>({
@@ -15,7 +15,7 @@ export const Table = <T extends RowData>({
   table,
 }: TableProps<T>): JSX.Element => {
   return (
-    <StyledRoundedPaper variant="table">
+    <RoundedPaper elevation={0}>
       <GridPaper>
         <TableContainer>
           <GridTable
@@ -23,10 +23,7 @@ export const Table = <T extends RowData>({
               table.getVisibleFlatColumns()
             )}
           >
-            <TableHead
-              rowDirection={ROW_DIRECTION.DEFAULT}
-              tableInstance={table}
-            />
+            <TableHead tableInstance={table} />
             <TableBody
               rowDirection={ROW_DIRECTION.DEFAULT}
               rows={row.getLeafRows()}
@@ -35,6 +32,6 @@ export const Table = <T extends RowData>({
           </GridTable>
         </TableContainer>
       </GridPaper>
-    </StyledRoundedPaper>
+    </RoundedPaper>
   );
 };

package/src/components/DataDictionary/components/Title/title.tsx

@@ -1,8 +1,10 @@
+import { TypographyProps } from "@mui/material";
 import React from "react";
-import { TitleProps } from "../../../common/Title/title";
 import { StyledTitle } from "./title.styles";
 
 export const Title = ({
-  title = "Data Dictionary",
+  children = "Data Dictionary",
   ...props
-}: TitleProps): JSX.Element => <StyledTitle title={title} {...props} />;
+}: TypographyProps): JSX.Element => (
+  <StyledTitle {...props}>{children}</StyledTitle>
+);

package/src/components/DataDictionary/dataDictionary.tsx

@@ -2,6 +2,7 @@ import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
+import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -15,7 +16,6 @@ import { useTable } from "./components/Table/hook";
 import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
 import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
-import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
 import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 import { DataDictionaryProps } from "./types";
 
@@ -52,7 +52,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
       {/* Fade in when header is measured. */}
       <View className={className}>
         <TitleLayout {...spacing}>
-          <Title title={title} />
+          <Title>{title}</Title>
         </TitleLayout>
         <OutlineLayout {...spacing}>
           <Outline outline={outline} />

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -7,7 +7,7 @@ import {
   RoundedPaper,
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
-import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
+import { StyledToolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table, TableProps } from "../Table/table";
 
 interface DetailViewTableProps<T extends RowData> extends TableProps<T> {
@@ -31,9 +31,9 @@ export const DetailViewTable = <T extends RowData>({
   ...tableProps
 }: DetailViewTableProps<T>): JSX.Element => {
   return items.length > 0 ? (
-    <Paper className={className} variant="table">
+    <Paper className={className}>
       <GridPaper>
-        {tools && <Toolbar variant="table">{tools}</Toolbar>}
+        {tools && <StyledToolbar>{tools}</StyledToolbar>}
         <Table
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -2,7 +2,7 @@ import { Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
-import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { StyledTableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
@@ -27,12 +27,12 @@ export const CollapsableRows = <T extends RowData>({
       {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
-          <TableRow key={row.id} isPreview={row.getIsPreview()}>
+          <StyledTableRow key={row.id} isPreview={row.getIsPreview()}>
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
             />
-          </TableRow>
+          </StyledTableRow>
         );
       })}
     </Fragment>

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -5,7 +5,7 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../../../../../Table/components/TableCell/common/utils";
-import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
+import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T extends RowData> {
@@ -32,7 +32,7 @@ export const TableRows = <T extends RowData>({
     <Fragment>
       {(leafOrSubRows || rows).map((row) => {
         return (
-          <TableRow
+          <StyledTableRow
             key={row.id}
             isGrouped={row.getIsGrouped()}
             isPreview={row.getIsPreview()}
@@ -51,7 +51,7 @@ export const TableRows = <T extends RowData>({
                 </TableCell>
               );
             })}
-          </TableRow>
+          </StyledTableRow>
         );
       })}
     </Fragment>

package/src/components/Detail/components/Table/table.tsx

@@ -77,7 +77,7 @@ export const Table = <T extends RowData>({
         gridTemplateColumns={gridTemplateColumns}
         stickyHeader={rowDirection === ROW_DIRECTION.DEFAULT && stickyHeader}
       >
-        <TableHead rowDirection={rowDirection} tableInstance={tableInstance} />
+        <TableHead tableInstance={tableInstance} />
         <TableBody
           rowDirection={rowDirection}
           tableInstance={tableInstance}

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+
+export const StyledButton = styled(Button)`
+  padding: 0;
+`;

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { BUTTON_PROPS } from "../../../../styles/common/mui/button";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { StyledButton } from "./clearAllFilters.styles";
 
 export const ClearAllFilters = (): JSX.Element => {
   const { exploreDispatch } = useExploreState();
@@ -15,11 +16,13 @@ export const ClearAllFilters = (): JSX.Element => {
   };
 
   return (
-    <ButtonTextPrimary
+    <StyledButton
+      color={BUTTON_PROPS.COLOR.PRIMARY}
       data-testid={TEST_IDS.CLEAR_ALL_FILTERS}
       onClick={onClearFilters}
+      variant={BUTTON_PROPS.VARIANT.TEXT}
     >
       Clear All
-    </ButtonTextPrimary>
+    </StyledButton>
   );
 };

package/src/components/Filter/components/FilterCountChip/filterCountChip.tsx

@@ -13,6 +13,7 @@ export const FilterCountChip = ({
     <StyledChip
       className={className}
       color={CHIP_PROPS.COLOR.PRIMARY}
+      component="span"
       label={String(count)}
       variant={CHIP_PROPS.VARIANT.FILLED}
       {...props}

package/src/components/Filter/components/Filters/filters.tsx

@@ -12,6 +12,7 @@ import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { Filter } from "../Filter/filter";
 import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -24,7 +25,6 @@ export interface CategoryFilter {
 
 export interface FiltersProps {
   categoryFilters: CategoryFilter[];
-  closeAncestor?: () => void;
   disabled?: boolean; // Global disabling of filters.
   onFilter: OnFilterFn;
   trackFilterOpened?: TrackFilterOpenedFunction;
@@ -74,11 +74,11 @@ function renderFilterTags(
 
 export const Filters = ({
   categoryFilters,
-  closeAncestor,
   disabled = false,
   onFilter,
   trackFilterOpened,
 }: FiltersProps): JSX.Element => {
+  const { onClose } = useDrawer();
   const isFilterDrawer = useBreakpointHelper(
     BREAKPOINT_FN_NAME.DOWN,
     DESKTOP_SM
@@ -107,7 +107,7 @@ export const Filters = ({
               key={categoryView.key}
               categorySection={label}
               categoryView={categoryView}
-              closeAncestor={closeAncestor}
+              closeAncestor={onClose}
               isFilterDrawer={isFilterDrawer}
               onFilter={onFilter}
               trackFilterOpened={trackFilterOpened}

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -21,6 +21,7 @@ import {
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
 import { DEFAULT_SLOT_PROPS, DRAWER_SLOT_PROPS } from "./common/constants";
@@ -32,7 +33,6 @@ import { Autocomplete } from "./searchAllFilters.styles";
 
 export interface SearchAllFiltersProps {
   categoryViews: CategoryView[];
-  drawerOpen?: boolean;
   onFilter: OnFilterFn;
 }
 
@@ -80,9 +80,9 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
 
 export const SearchAllFilters = ({
   categoryViews,
-  drawerOpen = false,
   onFilter,
 }: SearchAllFiltersProps): JSX.Element => {
+  const { open: isDrawerOpen } = useDrawer();
   const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
   const autocompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
@@ -142,11 +142,11 @@ export const SearchAllFilters = ({
 
   // Close search when filter drawer is closed.
   useEffect(() => {
-    if (!drawerOpen) {
+    if (!isDrawerOpen) {
       setSearchTerm("");
       setOpen(false);
     }
-  }, [drawerOpen]);
+  }, [isDrawerOpen]);
 
   return (
     <ListboxContext.Provider

package/src/components/Index/components/EntityView/components/controls/ActionButton/actionButton.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment } from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+
+export const ActionButton = (): JSX.Element | null => {
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { actionButton } = ui || {};
+
+  if (!actionButton) return null;
+
+  return <Fragment>{actionButton}</Fragment>;
+};

package/src/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+
+export const StyledBox = styled(Box)`
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;

package/src/components/Index/components/EntityView/components/controls/ExportButton/exportButton.tsx

@@ -0,0 +1,39 @@
+import { Button, Tooltip } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useDownloadStatus } from "../../../../../../../hooks/useDownloadStatus";
+import { ROUTE } from "../../../../../../../routes/constants";
+import { TEST_IDS } from "../../../../../../../tests/testIds";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { BaseComponentProps } from "../../../../../../types";
+import { StyledBox } from "./exportButton.styles";
+
+export const ExportButton = ({
+  className,
+}: BaseComponentProps): JSX.Element | null => {
+  const { disabled, isLoading, message } = useDownloadStatus();
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { enableExportButton } = ui || {};
+
+  if (!enableExportButton) return null;
+
+  return (
+    <Tooltip arrow title={message}>
+      <StyledBox>
+        <Button
+          {...BUTTON_PROPS.PRIMARY_CONTAINED}
+          className={className}
+          component={Link}
+          data-testid={TEST_IDS.EXPORT_BUTTON}
+          disabled={disabled || isLoading}
+          href={ROUTE.EXPORT}
+          id="button-cohort-export"
+        >
+          Export
+        </Button>
+      </StyledBox>
+    </Tooltip>
+  );
+};

package/src/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+import { mediaDesktopSmallUp } from "../../../../../../../styles/common/mixins/breakpoints";
+
+export const StyledButton = styled(Button)`
+  ${mediaDesktopSmallUp} {
+    display: none;
+  }
+`;

package/src/components/Index/components/EntityView/components/controls/FilterButton/filterButton.tsx

@@ -0,0 +1,39 @@
+import { FilterListRounded } from "@mui/icons-material";
+import { ButtonProps, NoSsr } from "@mui/material";
+import React from "react";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { FilterCountChip } from "../../../../../../Filter/components/FilterCountChip/filterCountChip";
+import { BaseComponentProps } from "../../../../../../types";
+import { StyledButton } from "./filterButton.styles";
+
+export const FilterButton = ({
+  className,
+  ...props
+}: BaseComponentProps & ButtonProps): JSX.Element => {
+  const { onOpen } = useDrawer();
+  const { exploreState } = useExploreState();
+  const { filterCount } = exploreState;
+  return (
+    <NoSsr>
+      <StyledButton
+        {...BUTTON_PROPS.SECONDARY_CONTAINED}
+        className={className}
+        onClick={onOpen}
+        startIcon={
+          <FilterListRounded
+            color={SVG_ICON_PROPS.COLOR.INK_LIGHT}
+            fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL}
+          />
+        }
+        {...props}
+      >
+        Filter
+        {/* NoSsr prevents server/client hydration mismatch with dynamic chip content */}
+        <FilterCountChip count={filterCount} />
+      </StyledButton>
+    </NoSsr>
+  );
+};

package/src/components/Index/components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/hook.ts

@@ -0,0 +1,15 @@
+import { useConfig } from "../../../../../../../../../hooks/useConfig";
+import { useToggleButtonGroup } from "../../../../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
+import { UseViewToggleProps, VIEW_MODE } from "./types";
+
+export const useViewToggle = (): UseViewToggleProps => {
+  const { onChange, value } = useToggleButtonGroup<VIEW_MODE>(VIEW_MODE.TABLE);
+  const { config } = useConfig();
+  const { enableEntitiesView = false } = config;
+  const disabled = !enableEntitiesView;
+  return {
+    onChange,
+    viewMode: value,
+    viewStatus: { disabled },
+  };
+};

package/src/components/Index/components/{EntitiesView/hooks/UseEntitiesView → EntityView/components/controls/ViewToggle/hooks/UseViewToggle}/types.ts

@@ -9,7 +9,7 @@ export interface ViewStatus {
   disabled: boolean;
 }
 
-export interface UseEntitiesViewProps {
+export interface UseViewToggleProps {
   onChange: ToggleButtonGroupProps["onChange"];
   viewMode: VIEW_MODE;
   viewStatus: ViewStatus;

package/src/components/Index/components/EntityView/components/controls/ViewToggle/stories/viewToggle.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ViewToggle } from "../viewToggle";
+
+const meta: Meta<typeof ViewToggle> = {
+  component: ViewToggle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { ToggleButtonGroup } from "@mui/material";
+
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
+  .MuiToggleButton-root {
+    max-height: 32px;
+    text-transform: none;
+  }
+`;

package/src/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.tsx

@@ -0,0 +1,24 @@
+import { ToggleButton } from "@mui/material";
+import React from "react";
+import { TestIdProps } from "../../../../../../types";
+import { useEntityView } from "../../../context/hook";
+import { VIEW_MODE } from "./hooks/UseViewToggle/types";
+import { StyledToggleButtonGroup } from "./viewToggle.styles";
+
+export const ViewToggle = ({ testId }: TestIdProps): JSX.Element | null => {
+  const { onChange, viewMode, viewStatus } = useEntityView();
+
+  if (viewStatus.disabled) return null;
+
+  return (
+    <StyledToggleButtonGroup
+      data-testid={testId}
+      exclusive
+      onChange={onChange}
+      value={viewMode}
+    >
+      <ToggleButton value={VIEW_MODE.TABLE}>Table</ToggleButton>
+      <ToggleButton value={VIEW_MODE.CHART}>Graph</ToggleButton>
+    </StyledToggleButtonGroup>
+  );
+};

package/src/components/Index/components/EntityView/components/layout/Summary/constants.ts

@@ -0,0 +1,7 @@
+import { GridProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  container: true,
+  direction: "row",
+  spacing: 1,
+};

package/src/components/Index/components/EntityView/components/layout/Summary/summary.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { Dot } from "../../../../../../common/Dot/dot";
+
+export const StyledGrid = styled(Grid)`
+  display: grid;
+  gap: 4px;
+  grid-auto-flow: column;
+  max-width: fit-content;
+  padding: 12px 16px;
+
+  ${({ theme }) => theme.breakpoints.down(1024)} {
+    display: none;
+  }
+`;
+
+export const StyledDot = styled(Dot)`
+  margin: 0 4px;
+`;

package/src/components/Index/components/EntityView/components/layout/Summary/summary.tsx

@@ -0,0 +1,34 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { useSummary } from "../../../../../../../hooks/useSummary";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { BaseComponentProps } from "../../../../../../types";
+import { GRID_PROPS } from "./constants";
+import { StyledDot, StyledGrid } from "./summary.styles";
+
+export const Summary = ({
+  className,
+}: BaseComponentProps): JSX.Element | null => {
+  const { summaries } = useSummary() || {};
+
+  if (!summaries) return null;
+
+  return (
+    <StyledGrid {...GRID_PROPS} className={className}>
+      {summaries.map(([count, label], i) => (
+        <Fragment key={i}>
+          {i !== 0 && <StyledDot />}
+          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_500}>
+            {count}
+          </Typography>
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+          >
+            {label}
+          </Typography>
+        </Fragment>
+      ))}
+    </StyledGrid>
+  );
+};

package/src/components/Index/components/EntityView/components/layout/Title/title.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { Title as CommonTitle } from "../../../../../../common/Title/title";
+import { BaseComponentProps } from "../../../../../../types";
+
+export const Title = ({
+  className,
+}: BaseComponentProps): JSX.Element | null => {
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { title } = ui || {};
+
+  if (!title) return null;
+
+  return <CommonTitle className={className}>{title}</CommonTitle>;
+};

package/src/components/Index/components/EntityView/components/navigation/Tabs/common/utils.ts

@@ -0,0 +1,25 @@
+import { EntityConfig } from "../../../../../../../../config/entities";
+import { Tab } from "../../../../../../../common/Tabs/tabs";
+
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
+  return entities.map(
+    ({
+      annotation,
+      label,
+      route,
+      tabIcon: icon,
+      tabIconPosition: iconPosition,
+    }) => ({
+      annotation,
+      icon,
+      iconPosition,
+      label,
+      value: route,
+    })
+  );
+}

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Tabs } from "../../../../../../common/Tabs/tabs";
+
+export const StyledTabs = styled(Tabs)`
+  box-shadow: none;
+  flex: 1;
+
+  .MuiTabs-scroller {
+    padding: 0;
+  }
+
+  .MuiTabs-indicator {
+    z-index: 4; /* required; positions indicator above list view hero box-shadow */
+  }
+
+  .MuiTab-root {
+    line-height: 32px;
+    margin: 0;
+  }
+`;

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.tsx

@@ -0,0 +1,28 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { TabValue } from "../../../../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+import { StyledTabs } from "./tabs.styles";
+
+export const Tabs = (): JSX.Element | null => {
+  const { config, entityConfig } = useConfig();
+  const { exploreState } = useExploreState();
+  const { entities } = config;
+  const { tabValue } = exploreState;
+  const { ui } = entityConfig;
+  const { enableTabs } = ui || {};
+
+  // Builds the tabs.
+  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+
+  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
+    await Router.push(`/${tabValue}`);
+  }, []);
+
+  // Returns null if tabs are disabled.
+  if (!enableTabs) return null;
+
+  return <StyledTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
+};