Remove tab container from the schema page

mathesar_ui/src/pages/schema/SchemaPage.svelte

@@ -7,77 +7,34 @@
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
-  import {
-    getSchemaPageExplorationsSectionUrl,
-    getSchemaPageTablesSectionUrl,
-    getSchemaPageUrl,
-  } from '@mathesar/routes/urls';
   import { modal } from '@mathesar/stores/modal';
   import { queries } from '@mathesar/stores/queries';
   import { currentTablesData as tablesStore } from '@mathesar/stores/tables';
   import AddEditSchemaModal from '@mathesar/systems/schemas/AddEditSchemaModal.svelte';
   import { logEvent } from '@mathesar/utils/telemetry';
-  import { Button, Icon, TabContainer } from '@mathesar-component-library';
+  import { Button, Icon } from '@mathesar-component-library';
 
   import AddTableModal from './AddTableModal.svelte';
-  import ExplorationSkeleton from './ExplorationSkeleton.svelte';
-  import SchemaExplorations from './SchemaExplorations.svelte';
   import SchemaOverview from './SchemaOverview.svelte';
   import SchemaPermissionsModal from './SchemaPermissionsModal.svelte';
-  import SchemaTables from './SchemaTables.svelte';
-  import TableSkeleton from './TableSkeleton.svelte';
 
   export let database: Database;
   export let schema: Schema;
-  export let section: string;
 
   const editSchemaModal = modal.spawnModalController();
   const addTableModal = modal.spawnModalController();
   const permissionsModal = modal.spawnModalController();
 
-  // NOTE: This has to be same as the name key in the paths prop of Route component
-  type TabsKey = 'overview' | 'tables' | 'explorations';
-  type TabItem = {
-    label: string;
-    id: TabsKey;
-    count?: number;
-    href: string;
-  };
-
   $: tablesMap = $tablesStore.tablesMap;
   $: explorationsMap = $queries.data;
   $: tablesRequestStatus = $tablesStore.requestStatus;
   $: explorationsRequestStatus = $queries.requestStatus;
 
-  $: tabs = [
-    {
-      label: $_('overview'),
-      id: 'overview',
-      href: getSchemaPageUrl(database.id, schema.oid),
-    },
-    {
-      label: $_('tables'),
-      id: 'tables',
-      showCount: tablesRequestStatus.state === 'success',
-      count: tablesMap.size,
-      href: getSchemaPageTablesSectionUrl(database.id, schema.oid),
-    },
-    {
-      label: $_('explorations'),
-      id: 'explorations',
-      showCount: explorationsRequestStatus.state === 'success',
-      count: explorationsMap.size,
-      href: getSchemaPageExplorationsSectionUrl(database.id, schema.oid),
-    },
-  ] as TabItem[];
-
-  $: activeTab = tabs.find((tab) => tab.id === section) || tabs[0];
-
   function handleEditSchema() {
     editSchemaModal.open();
   }
 
-  $: ({ name, description, tableCount, currentAccess } = schema);
+  $: ({ name, description, currentAccess } = schema);
   $: ({ currentRoleOwns } = currentAccess);
 
   logEvent('opened_schema', {
@@ -127,80 +84,17 @@
       {/if}
     </svelte:fragment>
   </AppSecondaryHeader>
-
-  <TabContainer {activeTab} {tabs} uniformTabWidth={false}>
-    <div slot="tab" let:tab class="tab-header-container">
-      <span>{tab.label}</span>
-      {#if tab.count !== undefined && tab.showCount}
-        <span class="count">{tab.count}</span>
-      {/if}
-    </div>
-    {#if activeTab?.id === 'overview'}
-      <div class="tab-container">
-        <SchemaOverview
-          {tablesRequestStatus}
-          {tablesMap}
-          {explorationsMap}
-          {database}
-          {schema}
-          {explorationsRequestStatus}
-          onCreateEmptyTable={() => addTableModal.open()}
-        />
-      </div>
-    {:else if activeTab?.id === 'tables'}
-      <div class="tab-container">
-        {#if tablesRequestStatus.state === 'processing'}
-          <TableSkeleton numTables={$tableCount} />
-        {:else}
-          <SchemaTables
-            {tablesMap}
-            {database}
-            {schema}
-            onCreateEmptyTable={() => addTableModal.open()}
-          />
-        {/if}
-      </div>
-    {:else if activeTab?.id === 'explorations'}
-      <div class="tab-container">
-        {#if explorationsRequestStatus.state === 'processing'}
-          <ExplorationSkeleton />
-        {:else}
-          <SchemaExplorations
-            hasTablesToExplore={!!tablesMap.size}
-            {explorationsMap}
-            {database}
-            {schema}
-          />
-        {/if}
-      </div>
-    {/if}
-  </TabContainer>
+  <SchemaOverview
+    {tablesRequestStatus}
+    {tablesMap}
+    {explorationsMap}
+    {database}
+    {schema}
+    {explorationsRequestStatus}
+    onCreateEmptyTable={() => addTableModal.open()}
+  />
 </LayoutWithHeader>
 
 <AddEditSchemaModal controller={editSchemaModal} {database} {schema} />
 <AddTableModal controller={addTableModal} {schema} {tablesMap} />
 <SchemaPermissionsModal controller={permissionsModal} {schema} />
-
-<style lang="scss">
-  .tab-container {
-    padding: var(--size-xx-large) 0;
-  }
-
-  .tab-header-container {
-    display: flex;
-    align-items: center;
-
-    > :global(* + *) {
-      margin-left: 0.25rem;
-    }
-
-    .count {
-      border-radius: var(--border-radius-l);
-      background: var(--slate-200);
-      font-size: var(--text-size-small);
-      text-align: center;
-      padding: 0.071rem 0.5rem;
-      margin-left: 0.5rem;
-    }
-  }
-</style>

mathesar_ui/src/routes/SchemaRoute.svelte

@@ -68,16 +68,9 @@
     />
   </MultiPathRoute>
 
-  <MultiPathRoute
-    paths={[
-      { name: 'tables', path: '/tables/' },
-      { name: 'explorations', path: '/explorations/' },
-      { name: 'overview', path: '/' },
-    ]}
-    let:path
-  >
-    <SchemaPage {database} {schema} section={path} />
-  </MultiPathRoute>
+  <Route path="/">
+    <SchemaPage {database} {schema} />
+  </Route>
 {:else}
   <ErrorPage>{$_('schema_not_found')}</ErrorPage>
 {/if}