Add reusable tabs

[jpggvilaca]

📝 Description

• Add new UI for tabs with action menu
• Replace previous tabs on workspaces/users/datasets
• Tests coming on the next PR
• If you have any other suggestions for the name let me know :D

✨ Type of Change

Select the type of change your PR introduces:

• 🐞 Bug fix – Non-breaking change which fixes an issue
• 🚀 New feature – Non-breaking change which adds functionality
• 🔨 Refactor – Non-breaking change which refactors the code base
• 💥 Breaking change – Changes that break existing functionality
• 📚 Documentation update
• 🔒 Security update
• 🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

• ✅ Tested manually
• 🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

• 🔍 PR title is clear and meaningful
• ✍️ PR description clearly explains the changes and their reason
• 📝 I have linked the PR to the corresponding GitHub Issues, if any
• 💬 I have commented my code, especially in hard-to-understand areas
• 📄 I have made corresponding changes to the documentation
• ✅ I have added tests that prove my fix is effective or my feature works

[Copilot]

Pull Request Overview

This PR introduces a new reusable ManagedTabs component to standardize tab interfaces across the application, replacing previous implementations in workspaces, users, and datasets pages. The new component provides consistent tab layout, overflow handling, and action button integration.

Key changes:

• Created a new ManagedTabs component with overflow management and action button support
• Refactored workspace and dataset tab implementations to use the new component
• Consolidated tab styling from multiple files into the new component

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
managed-tabs.module.scss	New stylesheet defining tab layout, selection indicators, and overflow behavior for the reusable tabs component
managed-tabs.component.tsx	New component implementing reusable tab functionality with configurable overflow, action buttons, and custom rendering
custom-tab-item.module.scss	Removed duplicated tab styling that's now centralized in managed-tabs
workspace-users-toolbar.component.tsx	Refactored to use ManagedTabs instead of custom Tabs implementation
project-dataset.component.tsx	Replaced custom tab list with ManagedTabs, integrating overflow and export functionality
dataset-tab-list.component.tsx	Removed file as functionality is now provided by ManagedTabs
workspaces-tabs.component.tsx	Refactored to use ManagedTabs, extracting WorkspaceItem as separate component
landing-page.module.scss	Removed unused styles now handled by ManagedTabs

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[MarkRedeman]

As a general feedback, I think it would be nicer if we could have a component interface that looked more like Spectrum's tabs but with decorated behaviour, something like this,

<Tabs aria-label="History of Ancient Rome">
  <ManagedTabList>
    <ManagedTabItem key="FoR">Founding of Rome</ManagedTabItem>
    <ManagedTabItem key="MaR">Monarchy and Republic</ManagedTabItem>
    <ManagedTabItem key="Emp">Empire</ManagedTabItem>
  </ManagedTabList>
  <TabPanels>
    <Item key="FoR">
      Arma virumque cano, Troiae qui primus ab oris.
    </Item>
    <Item key="MaR">
      Senatus Populusque Romanus.
    </Item>
    <Item key="Emp">
      Alea jacta est.
    </Item>
  </TabPanels>
</Tabs>

A good example of this is also the customizing layout from the spectrum docs where they show you can add extra behaviour on the tabs by extending it, not modifying (e.g. open closed principle applies here)

I'd prefer rendering the TabPanels and their contents to be the responsibility of the consumer of this component, as otherwise you might end up with needing to update ManagedTabs every time we have a design that slightly differs from its current behaviour.

[MarkRedeman]

Minor: I'd rename this to WorkspaceTabItem, just to emphasize it will render a tab item.

[jpggvilaca]

Updated

[MarkRedeman]

Could this be a send as a ReactNode, instead of giving ManagedTabs knowledge about an "add button". Perhaps we could provide this as a suffix prop?

[jpggvilaca]

Updated, still calling it addButton though. Because i guess we always want to add an item, with suffix i think it's unclear of what we're "suffixing"

[MarkRedeman]

Could we rename this to children, so that you'd do:
<ManagedTabs ...><Workspace /></ManagedTabs/>

[jpggvilaca]

Done