aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-04 04:23:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update license service

Browse Source
This commit is contained in:
Steven
2024-08-12 21:17:27 +08:00
parent 768af5b096
commit 00e2a6fd96
13 changed files with 297 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/web/src/components/FeatureBadge.tsx
View File

@ -1,11 +1,20 @@
import { Tooltip } from "@mui/joy";
import { FeatureType, checkFeatureAvailable } from "@/helpers/feature";
import { useWorkspaceStore } from "@/stores";
import Icon from "./Icon";
interface Props {
feature: FeatureType;
className?: string;
}
const FeatureBadge = ({ className }: Props) => {
const FeatureBadge = ({ feature, className }: Props) => {
const workspaceStore = useWorkspaceStore();
const isFeatureEnabled = checkFeatureAvailable(feature, workspaceStore.profile.plan);
if (isFeatureEnabled) {
return null;
}
return (
<Tooltip title="This feature is not available on your plan." className={className} placement="top" arrow>
<Icon.Sparkles />

18
frontend/web/src/components/setting/MemberSection.tsx
View File

@ -67,20 +67,20 @@ const MemberSection = () => {
</div>
<div className="mt-2 flow-root">
<div className="overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle">
<div className="inline-block border rounded-lg border-gray-300 dark:border-zinc-700 min-w-full align-middle">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-700">
<thead>
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
<th scope="col" className="py-3 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
{t("user.nickname")}
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
<th scope="col" className="px-3 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
{t("user.email")}
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
<th scope="col" className="px-3 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
{t("user.role")}
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4">
<th scope="col" className="relative py-3 pl-3 pr-4">
<span className="sr-only">{t("common.edit")}</span>
</th>
</tr>
@ -88,10 +88,10 @@ const MemberSection = () => {
<tbody className="divide-y divide-gray-200 dark:divide-zinc-800">
{userList.map((user) => (
<tr key={user.email}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-500">{user.nickname}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.email}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{convertRoleFromPb(user.role)}</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
<td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-500">{user.nickname}</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500">{user.email}</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500">{convertRoleFromPb(user.role)}</td>
<td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
<IconButton
size="sm"
variant="plain"

19
frontend/web/src/components/setting/SSOSection.tsx
View File

@ -3,9 +3,11 @@ 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 { IdentityProvider } from "@/types/proto/api/v1/workspace_service";
import CreateIdentityProviderDrawer from "../CreateIdentityProviderDrawer";
import FeatureBadge from "../FeatureBadge";
import Icon from "../Icon";
interface EditState {
@ -19,6 +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);
useEffect(() => {
fetchIdentityProviderList();
@ -53,10 +56,12 @@ const SSOSection = () => {
<div className="w-full flex flex-row justify-between items-center gap-1">
<div className="flex flex-row items-center gap-1">
<span className="font-medium dark:text-gray-400">SSO</span>
<FeatureBadge className="w-5 h-auto ml-1 text-blue-600" feature={FeatureType.SSO} />
</div>
<Button
variant="outlined"
color="neutral"
disabled={!isSSOFeatureEnabled}
onClick={() =>
setEditState({
open: true,
@ -70,17 +75,17 @@ const SSOSection = () => {
{identityProviderList.length > 0 && (
<div className="mt-2 flow-root">
<div className="overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle">
<div className="inline-block border rounded-lg border-gray-300 dark:border-zinc-700 min-w-full align-middle">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-700">
<thead>
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
<th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
ID
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-500">
Title
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4">
<th scope="col" className="relative py-2 pl-3 pr-4">
<span className="sr-only">{t("common.edit")}</span>
</th>
</tr>
@ -88,11 +93,11 @@ const SSOSection = () => {
<tbody className="divide-y divide-gray-200 dark:divide-zinc-800">
{identityProviderList.map((identityProvider) => (
<tr key={identityProvider.name}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-500">
<td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-500">
{identityProvider.name}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{identityProvider.title}</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500">{identityProvider.title}</td>
<td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
<IconButton
size="sm"
variant="plain"

3
frontend/web/src/components/setting/WorkspaceSection.tsx
View File

@ -4,6 +4,7 @@ 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 { Visibility } from "@/types/proto/api/v1/common";
import { PlanType } from "@/types/proto/api/v1/subscription_service";
@ -102,7 +103,7 @@ const WorkspaceSection = () => {
<div className="w-full flex flex-col justify-start items-start">
<p className="flex flex-row justify-start items-center">
<span className="font-medium dark:text-gray-400">Custom branding</span>
<FeatureBadge className="w-5 h-auto ml-1 text-blue-600" />
<FeatureBadge className="w-5 h-auto ml-1 text-blue-600" feature={FeatureType.CustomeBranding} />
</p>
<p className="text-sm text-gray-500 leading-tight">Recommand logo ratio: 1:1</p>
</div>

51
frontend/web/src/helpers/feature.ts Normal file
View File

@ -0,0 +1,51 @@
// 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;
}
};