161024db9d
This pull request includes multiple changes to the sidebar and route metas to configure visibility of features on the dashboard. Here's a summary of the changes 1. Added `installationTypes`, field to routes `meta`, this works along side `permissions` and `featureFlags` This allows us to decide weather a particular feature is accessible on a particular type. For instance, the Billing pages should only be available on Cloud 2. Updated `usePolicy` and `policy.vue` to use the new `installationTypes` config 3. Updated Sidebar related components to remove `showOnlyOnCloud` to use the new policy updates. Testing the PR Here's the matrix of cases: https://docs.google.com/spreadsheets/d/15AAJntJZoyudaby77BOnRcC4435FGuT7PXbUXoTyU50/edit?usp=sharing --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<script setup>
|
|
import { isVNode, computed } from 'vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
import Policy from 'dashboard/components/policy.vue';
|
|
import { useSidebarContext } from './provider';
|
|
|
|
const props = defineProps({
|
|
label: { type: String, required: true },
|
|
to: { type: [String, Object], required: true },
|
|
icon: { type: [String, Object], default: null },
|
|
active: { type: Boolean, default: false },
|
|
component: { type: Function, default: null },
|
|
});
|
|
|
|
const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
|
|
|
|
const shouldRenderComponent = computed(() => {
|
|
return typeof props.component === 'function' || isVNode(props.component);
|
|
});
|
|
</script>
|
|
|
|
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
|
<template>
|
|
<Policy
|
|
:permissions="resolvePermissions(to)"
|
|
:feature-flag="resolveFeatureFlag(to)"
|
|
as="li"
|
|
class="py-0.5 ltr:pl-3 rtl:pr-3 rtl:mr-3 ltr:ml-3 relative text-n-slate-11 child-item before:bg-n-slate-4 after:bg-transparent after:border-n-slate-4 before:left-0 rtl:before:right-0"
|
|
>
|
|
<component
|
|
:is="to ? 'router-link' : 'div'"
|
|
:to="to"
|
|
:title="label"
|
|
class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
|
|
:class="{
|
|
'n-blue-text bg-n-alpha-2 active': active,
|
|
}"
|
|
>
|
|
<component
|
|
:is="component"
|
|
v-if="shouldRenderComponent"
|
|
:label
|
|
:icon
|
|
:active
|
|
/>
|
|
<template v-else>
|
|
<Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
|
|
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
|
</template>
|
|
</component>
|
|
</Policy>
|
|
</template>
|