[UBER-155] Replace "Back" button with "Breadcrumbs" (#3239)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@icloud.com>

plugins/view-resources/src/components/EditDoc.svelte

@@ -32,7 +32,7 @@
   import { AnyComponent, Button, Component, IconMixin, IconMoreH, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
-  import { ContextMenu } from '..'
+  import { ContextMenu, ParentsNavigator } from '..'
   import { categorizeFields, getCollectionCounter, getFiltredKeys } from '../utils'
   import ActionContext from './ActionContext.svelte'
   import DocAttributeBar from './DocAttributeBar.svelte'
@@ -302,6 +302,7 @@
     <svelte:fragment slot="navigator">
       {#if !embedded}
         <UpDownNavigator element={object} />
+        <ParentsNavigator element={object} />
       {/if}
     </svelte:fragment>
 

plugins/view-resources/src/components/ParentsNavigator.svelte

@@ -0,0 +1,76 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { AttachedDoc, Doc } from '@hcengineering/core'
+  import { Breadcrumbs, BreadcrumbsModel, getClient } from '@hcengineering/presentation'
+  import { getObjectPresenter, isAttachedDoc } from '../utils'
+  import { AttributeModel } from '@hcengineering/view'
+
+  export let element: Doc | AttachedDoc
+
+  const client = getClient()
+
+  async function getParents (doc: AttachedDoc): Promise<readonly Doc[]> {
+    const parents: Doc[] = []
+
+    let currentDoc: Doc | undefined = doc
+
+    while (currentDoc && isAttachedDoc(currentDoc)) {
+      const parent: Doc | undefined = await client.findOne(currentDoc.attachedToClass, { _id: currentDoc.attachedTo })
+
+      if (parent) {
+        currentDoc = parent
+        parents.push(parent)
+      } else {
+        currentDoc = undefined
+      }
+    }
+
+    return parents.reverse()
+  }
+
+  async function getBreadcrumbsModels (doc: typeof element): Promise<readonly BreadcrumbsModel[]> {
+    if (!isAttachedDoc(doc)) {
+      return []
+    }
+
+    const parents = await getParents(doc)
+    if (parents.length === 0) {
+      return []
+    }
+
+    const models: BreadcrumbsModel[] = []
+    for (const parent of parents) {
+      const attributeModel: AttributeModel | undefined = await getObjectPresenter(client, parent._class, { key: '' })
+
+      if (attributeModel) {
+        const breadcrumbsModel: BreadcrumbsModel = {
+          component: attributeModel.presenter,
+          props: { inline: true, ...(attributeModel.props ?? {}), value: parent }
+        }
+
+        models.push(breadcrumbsModel)
+      }
+    }
+
+    return models
+  }
+</script>
+
+{#await getBreadcrumbsModels(element) then models}
+  {#if models.length > 0}
+    <Breadcrumbs {models} gap="none" />
+  {/if}
+{/await}

plugins/view-resources/src/index.ts

@@ -123,6 +123,7 @@ export { default as StatusRefPresenter } from './components/status/StatusRefPres
 export { default as TableBrowser } from './components/TableBrowser.svelte'
 export { default as ValueSelector } from './components/ValueSelector.svelte'
 export { default as FilterRemovedNotification } from './components/filter/FilterRemovedNotification.svelte'
+export { default as ParentsNavigator } from './components/ParentsNavigator.svelte'
 export * from './context'
 export * from './filter'
 export * from './selection'

plugins/view-resources/src/utils.ts

@@ -949,3 +949,7 @@ export async function statusSort (
     )
   })
 }
+
+export function isAttachedDoc (doc: Doc | AttachedDoc): doc is AttachedDoc {
+  return 'attachedTo' in doc
+}