UBER-691 (#3564)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/tracker-resources/src/components/components/ComponentBrowser.svelte

@@ -16,14 +16,14 @@
   import { DocumentQuery, WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { Component } from '@hcengineering/tracker'
-  import { Button, IconAdd, Label, SearchEdit, TabList, resolvedLocationStore, showPopup } from '@hcengineering/ui'
+  import { Button, IconAdd, Label, SearchEdit, resolvedLocationStore, showPopup } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import {
     FilterBar,
     FilterButton,
+    ViewletSelector,
     ViewletSettingButton,
-    makeViewletKey,
-    updateActiveViewlet
+    makeViewletKey
   } from '@hcengineering/view-resources'
   import { onDestroy } from 'svelte'
   import tracker from '../../plugin'
@@ -86,15 +86,7 @@
   </div>
 
   <div class="ac-header-full medium-gap mb-1">
-    {#if viewlets && viewlets.length > 1}
-      <TabList
-        items={views}
-        selected={viewlet?._id}
-        kind="normal"
-        on:select={({ detail }) =>
-          (viewlet = viewlets && detail?.id ? updateActiveViewlet(viewlets, detail.id) : viewlet)}
-      />
-    {/if}
+    <ViewletSelector bind:viewlet bind:viewlets viewletQuery={{ attachTo: tracker.class.Component }} />
     <Button icon={IconAdd} label={tracker.string.Component} kind="accented" on:click={showCreateDialog} />
   </div>
 </div>
@@ -106,12 +98,7 @@
     <FilterButton _class={tracker.class.Component} {space} />
   </div>
   <div class="ac-header-full medium-gap">
-    <ViewletSettingButton
-      bind:viewOptions
-      viewletQuery={{ attachTo: tracker.class.Component }}
-      bind:viewlet
-      bind:viewlets
-    />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
     <!-- <ActionIcon icon={IconMoreH} size="small" /> -->
   </div>
 </div>

plugins/tracker-resources/src/components/issues/IssuesView.svelte

@@ -16,7 +16,7 @@
   export let modeSelectorProps: IModeSelector | undefined = undefined
 
   let viewlet: WithLookup<Viewlet> | undefined = undefined
-  let viewlets: WithLookup<Viewlet>[] | undefined = undefined
+  const viewlets: WithLookup<Viewlet>[] | undefined = undefined
   let viewOptions: ViewOptions | undefined
 
   let search = ''
@@ -51,6 +51,7 @@
   bind:viewlet
   bind:search
   showLabelSelector={$$slots.label_selector}
+  viewletQuery={{ attachTo: tracker.class.Issue, variant: { $ne: 'subissue' } }}
   {viewlets}
   {label}
   {space}
@@ -60,12 +61,7 @@
     <slot name="label_selector" />
   </svelte:fragment>
   <svelte:fragment slot="extra">
-    <ViewletSettingButton
-      bind:viewOptions
-      viewletQuery={{ attachTo: tracker.class.Issue, variant: { $ne: 'subissue' } }}
-      bind:viewlet
-      bind:viewlets
-    />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
     {#if asideFloat && $$slots.aside}
       <div class="buttons-divider" />
       <Button

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -29,7 +29,7 @@
     showPopup
   } from '@hcengineering/ui'
   import view, { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { ViewletSettingButton, createFilter, setFilters } from '@hcengineering/view-resources'
+  import { ViewletsSettingButton, createFilter, setFilters } from '@hcengineering/view-resources'
   import { afterUpdate } from 'svelte'
   import tracker from '../../../plugin'
   import CreateIssue from '../../CreateIssue.svelte'
@@ -147,7 +147,7 @@
   {/if}
   <div class="flex-row-center gap-2">
     {#if hasSubIssues}
-      <ViewletSettingButton
+      <ViewletsSettingButton
         bind:viewOptions
         viewletQuery={{ _id: tracker.viewlet.SubIssues }}
         kind={'ghost'}

plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte

@@ -5,7 +5,7 @@
   import { Issue, trackerId } from '@hcengineering/tracker'
   import { Button, Component, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
-  import { ViewletSettingButton, getAdditionalHeader } from '@hcengineering/view-resources'
+  import { ViewletsSettingButton, getAdditionalHeader } from '@hcengineering/view-resources'
   import viewplg from '@hcengineering/view-resources/src/plugin'
   import { fade } from 'svelte/transition'
   import tracker from '../../../plugin'
@@ -56,7 +56,7 @@
         <span class="flex-grow" />
       {/if}
       <div class="flex-row-center gap-2">
-        <ViewletSettingButton
+        <ViewletsSettingButton
           bind:viewOptions
           viewletQuery={{ _id: tracker.viewlet.SubIssues }}
           kind={'ghost'}

plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte

@@ -18,7 +18,7 @@
   import { Milestone } from '@hcengineering/tracker'
   import { Button, IconAdd, Label, SearchEdit, TabItem, TabList, showPopup } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
-  import { FilterBar, FilterButton, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { FilterBar, FilterButton, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
   import { MilestoneViewMode, getIncludedMilestoneStatuses, milestoneTitleMap } from '../../utils'
   import MilestoneContent from './MilestoneContent.svelte'
@@ -99,7 +99,8 @@
     <FilterButton _class={tracker.class.Milestone} {space} />
   </div>
   <div class="ac-header-full medium-gap">
-    <ViewletSettingButton bind:viewOptions viewletQuery={{ attachTo: tracker.class.Milestone }} bind:viewlet />
+    <ViewletSelector viewletQuery={{ attachTo: tracker.class.Milestone }} bind:viewlet />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
     <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>

plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte

@@ -80,12 +80,7 @@
       />
       <div class="buttons-divider" />
     {/if}
-    <ViewletSettingButton
-      bind:viewOptions
-      viewletQuery={{ attachTo: tracker.class.IssueTemplate }}
-      bind:viewlet
-      bind:viewlets
-    />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
   </svelte:fragment>
 </SpaceHeader>
 <slot name="afterHeader" />