chore: tweak feature matrix

frontend/web/src/components/FeatureBadge.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from "@mui/joy";
-import { FeatureType, checkFeatureAvailable } from "@/helpers/feature";
 import { useWorkspaceStore } from "@/stores";
+import { FeatureType } from "@/stores/workspace";
 import Icon from "./Icon";
 
 interface Props {
@@ -10,7 +10,7 @@ interface Props {
 
 const FeatureBadge = ({ feature, className }: Props) => {
   const workspaceStore = useWorkspaceStore();
-  const isFeatureEnabled = checkFeatureAvailable(feature, workspaceStore.profile.plan);
+  const isFeatureEnabled = workspaceStore.checkFeatureAvailable(feature);
 
   if (isFeatureEnabled) {
     return null;

frontend/web/src/components/setting/SSOSection.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { workspaceServiceClient } from "@/grpcweb";
-import { checkFeatureAvailable, FeatureType } from "@/helpers/feature";
 import { useWorkspaceStore } from "@/stores";
+import { FeatureType } from "@/stores/workspace";
 import { IdentityProvider } from "@/types/proto/api/v1/workspace_service";
 import CreateIdentityProviderDrawer from "../CreateIdentityProviderDrawer";
 import FeatureBadge from "../FeatureBadge";
@@ -21,7 +21,7 @@ const SSOSection = () => {
   const workspaceStore = useWorkspaceStore();
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
   const [editState, setEditState] = useState<EditState>({ open: false, identityProvider: undefined });
-  const isSSOFeatureEnabled = checkFeatureAvailable(FeatureType.SSO, workspaceStore.profile.plan);
+  const isSSOFeatureEnabled = workspaceStore.checkFeatureAvailable(FeatureType.SSO);
 
   useEffect(() => {
     fetchIdentityProviderList();

frontend/web/src/components/setting/WorkspaceSection.tsx

@@ -4,8 +4,8 @@ import { useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { workspaceServiceClient } from "@/grpcweb";
-import { FeatureType } from "@/helpers/feature";
 import { useWorkspaceStore } from "@/stores";
+import { FeatureType } from "@/stores/workspace";
 import { Visibility } from "@/types/proto/api/v1/common";
 import { PlanType } from "@/types/proto/api/v1/subscription_service";
 import { WorkspaceSetting } from "@/types/proto/api/v1/workspace_service";

frontend/web/src/helpers/feature.ts

@@ -1,51 +0,0 @@
-// const (
-// 	// Enterprise features.
-import { PlanType } from "@/types/proto/api/v1/subscription_service";
-
-// 	// FeatureTypeSSO allows the user to use SSO.
-// 	FeatureTypeSSO FeatureType = "ysh.slash.sso"
-// 	// FeatureTypeAdvancedAnalytics allows the user to use advanced analytics.
-// 	FeatureTypeAdvancedAnalytics FeatureType = "ysh.slash.advanced-analytics"
-
-// 	// Usages.
-
-// 	// FeatureTypeUnlimitedAccounts allows the user to create unlimited accounts.
-// 	FeatureTypeUnlimitedAccounts FeatureType = "ysh.slash.unlimited-accounts"
-// 	// FeatureTypeUnlimitedAccounts allows the user to create unlimited collections.
-// 	FeatureTypeUnlimitedCollections FeatureType = "ysh.slash.unlimited-collections"
-
-// 	// Customization.
-
-// 	// FeatureTypeCustomeBranding allows the user to customize the branding.
-// 	FeatureTypeCustomeBranding FeatureType = "ysh.slash.custom-branding"
-// )
-
-export enum FeatureType {
-  SSO = "ysh.slash.sso",
-  AdvancedAnalytics = "ysh.slash.advanced-analytics",
-  UnlimitedAccounts = "ysh.slash.unlimited-accounts",
-  UnlimitedCollections = "ysh.slash.unlimited-collections",
-  CustomeBranding = "ysh.slash.custom-branding",
-}
-
-const FeatureMatrix: Record<FeatureType, [boolean, boolean, boolean]> = {
-  [FeatureType.SSO]: [false, false, true],
-  [FeatureType.AdvancedAnalytics]: [false, false, true],
-  [FeatureType.UnlimitedAccounts]: [false, true, false],
-  [FeatureType.UnlimitedCollections]: [false, true, true],
-  [FeatureType.CustomeBranding]: [false, true, true],
-};
-
-export const checkFeatureAvailable = (feature: FeatureType, plan: PlanType): boolean => {
-  const [isFree, isPro, isEnterprise] = FeatureMatrix[feature];
-  switch (plan) {
-    case PlanType.FREE:
-      return isFree;
-    case PlanType.PRO:
-      return isPro;
-    case PlanType.ENTERPRISE:
-      return isEnterprise;
-    default:
-      return false;
-  }
-};

frontend/web/src/stores/workspace.ts

@@ -2,6 +2,14 @@ import { create } from "zustand";
 import { workspaceServiceClient } from "@/grpcweb";
 import { WorkspaceProfile, WorkspaceSetting } from "@/types/proto/api/v1/workspace_service";
 
+export enum FeatureType {
+  SSO = "ysh.slash.sso",
+  AdvancedAnalytics = "ysh.slash.advanced-analytics",
+  UnlimitedAccounts = "ysh.slash.unlimited-accounts",
+  UnlimitedCollections = "ysh.slash.unlimited-collections",
+  CustomeBranding = "ysh.slash.custom-branding",
+}
+
 interface WorkspaceState {
   profile: WorkspaceProfile;
   setting: WorkspaceSetting;
@@ -9,6 +17,7 @@ interface WorkspaceState {
   // Workspace related actions.
   fetchWorkspaceProfile: () => Promise<WorkspaceProfile>;
   fetchWorkspaceSetting: () => Promise<WorkspaceSetting>;
+  checkFeatureAvailable: (feature: FeatureType) => boolean;
 }
 
 const useWorkspaceStore = create<WorkspaceState>()((set, get) => ({
@@ -17,6 +26,7 @@ const useWorkspaceStore = create<WorkspaceState>()((set, get) => ({
   fetchWorkspaceProfile: async () => {
     const workspaceProfile = (await workspaceServiceClient.getWorkspaceProfile({})).profile as WorkspaceProfile;
     set({ ...get(), profile: workspaceProfile });
+    console.log("workspaceProfile", workspaceProfile);
     return workspaceProfile;
   },
   fetchWorkspaceSetting: async () => {
@@ -24,6 +34,9 @@ const useWorkspaceStore = create<WorkspaceState>()((set, get) => ({
     set({ ...get(), setting: workspaceSetting });
     return workspaceSetting;
   },
+  checkFeatureAvailable: (feature: FeatureType): boolean => {
+    return get().profile.features.includes(feature);
+  },
 }));
 
 export default useWorkspaceStore;