Skip to content

Commit

Permalink
Merge pull request #5193 from skdud4659/feature/hook
Browse files Browse the repository at this point in the history
feat: create current-menu-id / page-editable-status hook
  • Loading branch information
skdud4659 authored Dec 10, 2024
2 parents 78cf1e8 + 5f4a91a commit 9593a33
Show file tree
Hide file tree
Showing 50 changed files with 372 additions and 1,081 deletions.
28 changes: 28 additions & 0 deletions apps/web/src/common/composables/current-menu-id/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import type { Ref } from 'vue';
import { computed, reactive, toRef } from 'vue';
import { useRoute } from 'vue-router/composables';

import { clone } from 'lodash';

import { MENU_ID } from '@/lib/menu/config';


interface UseCurrentMenuIdReturnType {
currentMenuId: Ref<string>;
}

export const useCurrentMenuId = (): UseCurrentMenuIdReturnType => {
const route = useRoute();

const state = reactive({
currentMenuId: computed<string>(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
return closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
}),
});

return {
currentMenuId: toRef(state, 'currentMenuId'),
};
};
31 changes: 31 additions & 0 deletions apps/web/src/common/composables/page-editable-status/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import type { Ref } from 'vue';
import { computed, reactive, toRef } from 'vue';

import { useUserStore } from '@/store/user/user-store';

import type { PageAccessMap } from '@/lib/access-control/config';

import { useCurrentMenuId } from '@/common/composables/current-menu-id';

interface UsePageEditableStatusReturnType {
hasReadWriteAccess: Ref<boolean|undefined>;
}

export const usePageEditableStatus = (): UsePageEditableStatusReturnType => {
const userStore = useUserStore();
const userGetters = userStore.getters;

const { currentMenuId } = useCurrentMenuId();

const storeState = reactive({
pageAccessPermissionMap: computed<PageAccessMap>(() => userGetters.pageAccessPermissionMap),
});

const state = reactive({
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[currentMenuId.value]?.write),
});

return {
hasReadWriteAccess: toRef(state, 'hasReadWriteAccess'),
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from 'vue';
import { useRoute, useRouter } from 'vue-router/composables';
import { clone, isEmpty } from 'lodash';
import { isEmpty } from 'lodash';
import {
PI, screens, PButton, PTextButton, PTooltip,
Expand All @@ -24,6 +24,7 @@ import { MENU_ID } from '@/lib/menu/config';
import BetaMark from '@/common/components/marks/BetaMark.vue';
import NewMark from '@/common/components/marks/NewMark.vue';
import UpdateMark from '@/common/components/marks/UpdateMark.vue';
import { useCurrentMenuId } from '@/common/composables/current-menu-id';
import { useProperRouteLocation } from '@/common/composables/proper-route-location';
import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
Expand All @@ -48,6 +49,8 @@ const route = useRoute();
const router = useRouter();
const { width } = useWindowSize();
const { currentMenuId } = useCurrentMenuId();
const storeState = reactive({
isHideNavRail: computed(() => gnbGetters.isHideNavRail),
isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
Expand Down Expand Up @@ -88,14 +91,11 @@ const state = reactive({
});
return result;
}),
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: string = closestRoute?.name || closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
selectedMenuId: computed<string>(() => {
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
return currentMenuId.value;
}),
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
import type { Location } from 'vue-router';
import { useRouter } from 'vue-router/composables';
import { clone, sortBy } from 'lodash';
import { sortBy } from 'lodash';
import {
PSelectDropdown, PTooltip, PI, PButton, PTextHighlighting, PEmpty,
Expand All @@ -21,10 +21,9 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
import type { ReferenceData } from '@/lib/helper/config-data-helper';
import { convertWorkspaceConfigToReferenceData } from '@/lib/helper/config-data-helper';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
import { useCurrentMenuId } from '@/common/composables/current-menu-id';
import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
Expand Down Expand Up @@ -54,6 +53,8 @@ const favoriteStore = useFavoriteStore();
const favoriteGetters = favoriteStore.getters;
const recentStore = useRecentStore();
const { currentMenuId } = useCurrentMenuId();
const router = useRouter();
const selectDropdownRef = ref<PSelectDropdown|null>(null);
Expand All @@ -80,11 +81,8 @@ const selectWorkspace = (name: string): void => {
if (!workspaceId || workspaceId === storeState.currentWorkspaceId) return;
appContextStore.setGlobalGrantLoading(true);
const reversedMatched = clone(router.currentRoute.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
userWorkspaceStore.setCurrentWorkspace(workspaceId);
router.push({ name: MENU_INFO_MAP[targetMenuId].routeName, params: { workspaceId } }).catch(() => {});
router.push({ name: MENU_INFO_MAP[currentMenuId.value].routeName, params: { workspaceId } }).catch(() => {});
};
const formatMenuItems = (menuItems: WorkspaceModel[] = []): MenuItem[] => {
const result = menuItems.length > 0 ? [
Expand Down
2 changes: 0 additions & 2 deletions apps/web/src/lib/access-control/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export const WORKSPACE_OWNER_DEFAULT_PERMISSIONS: MenuId[] = [
MENU_ID.SERVICE_ACCOUNT,
MENU_ID.COST_EXPLORER,
MENU_ID.COST_ANALYSIS,
// MENU_ID.ANOMALY_DETECTION,
MENU_ID.BUDGET,
MENU_ID.COST_REPORT,
MENU_ID.ALERT_MANAGER_DASHBOARD,
Expand Down Expand Up @@ -59,7 +58,6 @@ export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
MENU_ID.SERVICE_ACCOUNT,
MENU_ID.COST_EXPLORER,
MENU_ID.COST_ANALYSIS,
// MENU_ID.ANOMALY_DETECTION,
MENU_ID.BUDGET,
MENU_ID.ALERT_MANAGER_DASHBOARD,
MENU_ID.ALERT_MANAGER,
Expand Down
22 changes: 0 additions & 22 deletions apps/web/src/lib/helper/config-data-helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,6 @@ export interface ReferenceData extends Omit<FavoriteItem, 'itemType'> {

export const convertMenuConfigToReferenceData = (config: ConfigData[]|null, menuList: DisplayMenu[]): ReferenceData[] => {
const convertMenuList = cloneDeep(menuList);
// const costIdx = convertMenuList.findIndex((i) => i.id === MENU_ID.COST_EXPLORER);

// NOTE: will be applied after the cost explorer menu is updated
// if (convertMenuList[costIdx].subMenuList?.length === 4) {
// convertMenuList[costIdx].subMenuList?.push(
// {
// id: MENU_ID.ANOMALY_DETECTION_CONFIGURATION,
// to: { name: COST_EXPLORER_ROUTE.ANOMALY_DETECTION.CONFIGURATION._NAME },
// label: i18n.t('BILLING.COST_MANAGEMENT.ANOMALY_DETECTION.CONFIG.TITLE'),
// },
// {
// id: MENU_ID.ANOMALY_DETECTION_POLICY,
// to: { name: COST_EXPLORER_ROUTE.ANOMALY_DETECTION.POLICY._NAME },
// label: i18n.t('BILLING.COST_MANAGEMENT.ANOMALY_DETECTION.POLICY.TITLE'),
// },
// {
// id: MENU_ID.ANOMALY_DETECTION_HISTORY,
// to: { name: COST_EXPLORER_ROUTE.ANOMALY_DETECTION.HISTORY._NAME },
// label: i18n.t('BILLING.COST_MANAGEMENT.ANOMALY_DETECTION.HISTORY.TITLE'),
// },
// );
// }

const allMenuList = getAllSuggestionMenuList(convertMenuList);
const results: ReferenceData[] = [];
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/lib/menu/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const MENU_ID = Object.freeze({
COST_EXPLORER: 'cost_explorer',
COST_ANALYSIS: 'cost_analysis',
COST_ADVANCED_SETTINGS: 'cost_advanced_settings',
ANOMALY_DETECTION: 'anomaly_detection',
BUDGET: 'budget',
COST_REPORT: 'cost_report',
DATA_SOURCES: 'data_sources',
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/lib/menu/menu-architecture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export const MENU_LIST: Menu[] = [
needPermissionByRole: true,
subMenuList: [
{ id: MENU_ID.COST_ANALYSIS, needPermissionByRole: true },
{ id: MENU_ID.ANOMALY_DETECTION, needPermissionByRole: true },
{ id: MENU_ID.BUDGET, needPermissionByRole: true },
{ id: MENU_ID.COST_REPORT, needPermissionByRole: true },
],
Expand Down
7 changes: 0 additions & 7 deletions apps/web/src/lib/menu/menu-info.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,6 @@ export const MENU_INFO_MAP: Record<MenuId, MenuInfo> = Object.freeze({
translationId: 'MENU.COST_EXPLORER_COST_ANALYSIS',
icon: 'ic_service_cost-analysis',
},
[MENU_ID.ANOMALY_DETECTION]: {
menuId: MENU_ID.ANOMALY_DETECTION,
routeName: COST_EXPLORER_ROUTE.ANOMALY_DETECTION._NAME,
translationId: 'MENU.COST_EXPLORER_ANOMALY_DETECTION',
highlightTag: 'new',
icon: 'ic_anomaly_detection',
},
[MENU_ID.BUDGET]: {
menuId: MENU_ID.BUDGET,
routeName: COST_EXPLORER_ROUTE.BUDGET._NAME,
Expand Down
21 changes: 5 additions & 16 deletions apps/web/src/services/advanced/AdvancedLSB.vue
Original file line number Diff line number Diff line change
@@ -1,28 +1,17 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { useRoute } from 'vue-router/composables';
import { clone } from 'lodash';
import { MENU_ID } from '@/lib/menu/config.js';
import { useCurrentMenuId } from '@/common/composables/current-menu-id';
import BookmarkLSB from '@/services/advanced/components/BookmarkLSB.vue';
import DomainSettingsLSB from '@/services/advanced/components/PreferencesLSB.vue';
const route = useRoute();
const state = reactive({
menuId: computed<string>(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
return closestRoute?.meta?.menuId;
}),
});
const { currentMenuId } = useCurrentMenuId();
</script>

<template>
<fragment>
<bookmark-l-s-b v-if="state.menuId === MENU_ID.BOOKMARK" />
<domain-settings-l-s-b v-if="state.menuId === MENU_ID.PREFERENCES" />
<bookmark-l-s-b v-if="currentMenuId === MENU_ID.BOOKMARK" />
<domain-settings-l-s-b v-if="currentMenuId === MENU_ID.PREFERENCES" />
</fragment>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
import type { TranslateResult } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router/composables';
import { at, clone } from 'lodash';
import { at } from 'lodash';
import {
PHeading, PButton, PContextMenu, PI, PIconButton, PStatus, PHeadingLayout,
Expand All @@ -18,15 +18,10 @@ import { i18n } from '@/translations';
import { makeAdminRouteName } from '@/router/helpers/route-helper';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
import type { BookmarkModalType, BookmarkItem } from '@/common/components/bookmark/type/type';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
import { gray } from '@/styles/colors';
Expand All @@ -35,17 +30,16 @@ import { getWorkspaceInfo, workspaceStateFormatter } from '@/services/advanced/c
import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
const userStore = useUserStore();
const bookmarkStore = useBookmarkStore();
const bookmarkState = bookmarkStore.state;
const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const route = useRoute();
const router = useRouter();
Expand All @@ -56,7 +50,6 @@ const storeState = reactive({
selectedIndices: computed<number[]>(() => bookmarkPageState.selectedIndices),
bookmarkFolderList: computed<BookmarkItem[]>(() => bookmarkPageState.bookmarkFolderList),
bookmarkList: computed<BookmarkItem[]>(() => bookmarkPageGetters.bookmarkList),
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
visibleMenu: false,
Expand All @@ -83,16 +76,6 @@ const state = reactive({
return state.workspaceInfo?.name || '';
}),
workspaceInfo: computed<WorkspaceModel|undefined>(() => getWorkspaceInfo(state.group, storeState.workspaceList)),
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
});
const hideMenu = () => {
Expand Down Expand Up @@ -204,7 +187,7 @@ onUnmounted(() => {
v-bind="workspaceStateFormatter( WORKSPACE_STATE.DORMANT)"
class="capitalize state"
/>
<template v-if="state.folder && state.group === 'global'">
<template v-if="hasReadWriteAccess && state.folder && state.group === 'global'">
<div class="title-right-extra-wrapper">
<p-icon-button name="ic_edit-text"
style-type="transparent"
Expand All @@ -219,7 +202,7 @@ onUnmounted(() => {
</template>
</p-heading>
</template>
<template v-if="state.hasReadWriteAccess"
<template v-if="hasReadWriteAccess"
#extra
>
<template v-if="state.group === 'global'">
Expand Down
Loading

0 comments on commit 9593a33

Please sign in to comment.