improved organization folder organization hierarchy UI

Author: JonathanTreffler

lib/Controller/OrganizationFolderController.php

@@ -9,7 +9,7 @@
 use OCP\AppFramework\Http\Attribute\NoAdminRequired;
 
 use OCA\OrganizationFolders\Model\OrganizationFolder;
-use OCA\OrganizationFolders\Model\PrincipalFactory;
+use OCA\OrganizationFolders\OrganizationProvider\OrganizationProviderManager;
 use OCA\OrganizationFolders\Service\ResourceService;
 use OCA\OrganizationFolders\Service\OrganizationFolderMemberService;
 use OCA\OrganizationFolders\Service\OrganizationFolderService;
@@ -28,7 +28,7 @@ public function __construct(
 		private OrganizationFolderService $service,
 		private OrganizationFolderMemberService $memberService,
 		private ResourceService $resourceService,
-		private PrincipalFactory $principalFactory,
+		private OrganizationProviderManager $organizationProviderManager,
 		private string $userId,
 	) {
 		parent::__construct();
@@ -52,10 +52,22 @@ private function getApiObjectFromEntity(OrganizationFolder $organizationFolder,
 				$result = $organizationFolder->jsonSerialize();
 			}
 
-			$result["organizationPrincipal"] = $this->principalFactory->buildOrganizationMemberPrincipal(
-				organizationProviderId: $organizationFolder->getOrganizationProvider(),
-				organizationId: $organizationFolder->getOrganizationId(),
-			);
+			try {
+				$organizationProvider = $this->organizationProviderManager->getOrganizationProvider($organizationFolder->getOrganizationProvider());
+				$organization = $organizationProvider->getOrganization($organizationFolder->getOrganizationId());
+
+				$organizationFullHierarchyNames = [$organization->getFriendlyName()];
+
+				while($organization?->getParentOrganizationId() && $organization = $organizationProvider->getOrganization($organization->getParentOrganizationId())) {
+					$organizationFullHierarchyNames[] = $organization->getFriendlyName();
+				}
+
+				$organizationFullHierarchyNames[] = $organizationProvider->getFriendlyName();
+
+				$result["organizationFullHierarchyNames"] = array_reverse($organizationFullHierarchyNames);
+			} catch (\Throwable $e) {
+				$result["organizationFullHierarchyNames"] = ["Invalid organization"];
+			}
 		}
 
 		if ($this->shouldInclude(self::PERMISSIONS_INCLUDE, $includes)) {

src/components/Hierarchy.vue

@@ -0,0 +1,48 @@
+<script setup>
+import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+
+const props = defineProps({
+  hierarchyNames: {
+    type: Array,
+    required: true,
+  },
+});
+
+</script>
+
+<template>
+	<div class="hierarchyNameParts">
+		<div v-for="(hierarchyNamePart, index) of props.hierarchyNames" :key="hierarchyNamePart">
+			<p v-tooltip="hierarchyNamePart">
+				{{ hierarchyNamePart }}
+			</p>
+			<ChevronRight v-if="index !== props.hierarchyNames.length - 1" :size="20" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.hierarchyNameParts {
+	display: inline-flex;
+	max-width: 100%;
+	overflow-x: clip;
+
+	> div {
+		display: inline-flex;
+		min-width: 20px;
+
+		&:last-child  {
+			flex-shrink: 0;
+		}
+
+		> p {
+			white-space: nowrap;
+			overflow: hidden;
+
+			&:not(:last-child)  {
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}
+</style>

src/components/Principal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+import Hierarchy from "./Hierarchy.vue";
 
 const props = defineProps({
   principal: {
@@ -11,38 +11,5 @@ const props = defineProps({
 </script>
 
 <template>
-	<div class="fullHierarchyNameParts">
-		<div v-for="(fullHierarchyNamePart, index) of props.principal.fullHierarchyNames" :key="fullHierarchyNamePart">
-			<p v-tooltip="fullHierarchyNamePart">
-				{{ fullHierarchyNamePart }}
-			</p>
-			<ChevronRight v-if="index !== props.principal.fullHierarchyNames.length - 1" :size="20" />
-		</div>
-	</div>
+	<Hierarchy :hierarchy-names="props.principal.fullHierarchyNames" />
 </template>
-
-<style lang="scss" scoped>
-.fullHierarchyNameParts {
-	display: inline-flex;
-	max-width: 100%;
-	overflow-x: clip;
-
-	> div {
-		display: inline-flex;
-		min-width: 20px;
-
-		&:last-child  {
-			flex-shrink: 0;
-		}
-
-		> p {
-			white-space: nowrap;
-			overflow: hidden;
-
-			&:not(:last-child)  {
-				text-overflow: ellipsis;
-			}
-		}
-	}
-}
-</style>

src/views/OrganizationFolderSettings.vue

@@ -13,7 +13,7 @@ import Pencil from "vue-material-design-icons/Pencil.vue";
 import Section from "../components/Section.vue";
 import SectionHeader from "../components/SectionHeader.vue";
 import HeaderButtonGroup from "../components/SectionHeaderButtonGroup.vue";
-import Principal from "../components/Principal.vue";
+import Hierarchy from "../components/Hierarchy.vue";
 import ResourceList from "../components/ResourceList.vue";
 import CreateResourceButton from "../components/CreateResourceButton.vue";
 import MembersList from "../components/MemberList/MembersList.vue";
@@ -141,8 +141,6 @@ const openOrganizationPicker = () => {
 const permissionLevelExplanation = t(
 	"organization_folders",
 	"Managers have access to the settings of top-level resources with manager inheritance enabled. Admins have access to the settings of all resources, regardless of their inheritance setting.",
-	{},
-	{ escape: false }
 );
 
 </script>
@@ -178,7 +176,7 @@ const permissionLevelExplanation = t(
 				<SectionHeader :text="t('organization_folders', 'Organization')"></SectionHeader>
 			</template>
 			<div style="display: flex; flex-direction: row; align-items: center;">
-				<Principal :principal="organizationFolder?.organizationPrincipal" />
+				<Hierarchy :hierarchy-names="organizationFolder?.organizationFullHierarchyNames" />
 				<NcActions>
 					<NcActionButton @click="openOrganizationPicker">
 						<template #icon>