feat: renamed old frontend and fixed some minor bugs

This commit is contained in:
=
2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
@@ -1,16 +1,37 @@
import { FunctionComponent, ReactNode } from "react";
import { BoundCanProps, Can } from "@casl/react";
import { faLock } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
import { Tooltip } from "../v2";
export const OrgPermissionGuardBanner = () => {
return (
<div className="container mx-auto flex h-full items-center justify-center">
<div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
<div>
<FontAwesomeIcon icon={faLock} size="6x" />
</div>
<div>
<div className="mb-2 text-4xl font-medium">Access Restricted</div>
<div className="text-sm">
Your role has limited permissions, please <br /> contact your admin to gain access
</div>
</div>
</div>
</div>
);
};
type Props = {
label?: ReactNode;
// this prop is used when there exist already a tooltip as helper text for users
// so when permission is allowed same tooltip will be reused to show helpertext
renderTooltip?: boolean;
allowedLabel?: string;
renderGuardBanner?: boolean;
} & BoundCanProps<TOrgPermission>;
export const OrgPermissionCan: FunctionComponent<Props> = ({
@@ -19,6 +40,7 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
passThrough = true,
renderTooltip,
allowedLabel,
renderGuardBanner,
...props
}) => {
const { permission } = useOrgPermission();
@@ -36,10 +58,14 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
return <Tooltip content={label}>{finalChild}</Tooltip>;
}
if (isAllowed && renderTooltip) {
if (isAllowed && renderTooltip && allowedLabel) {
return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
}
if (!isAllowed && renderGuardBanner) {
return <OrgPermissionGuardBanner />;
}
if (!isAllowed) return null;
return finalChild;
@@ -1,11 +1,31 @@
import { FunctionComponent, ReactNode } from "react";
import { AbilityTuple, MongoAbility } from "@casl/ability";
import { Can } from "@casl/react";
import { faLock } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
import { Tooltip } from "../v2/Tooltip";
export const ProjectPermissionGuardBanner = () => {
return (
<div className="container mx-auto flex h-full items-center justify-center">
<div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
<div>
<FontAwesomeIcon icon={faLock} size="6x" />
</div>
<div>
<div className="mb-2 text-4xl font-medium">Access Restricted</div>
<div className="text-sm">
Your role has limited permissions, please <br /> contact your admin to gain access
</div>
</div>
</div>
</div>
);
};
type Props<T extends AbilityTuple> = {
label?: ReactNode;
// this prop is used when there exist already a tooltip as helper text for users
@@ -17,6 +37,7 @@ type Props<T extends AbilityTuple> = {
I: T[0];
a: T[1];
ability?: MongoAbility<T>;
renderGuardBanner?: boolean;
};
export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>> = ({
@@ -25,6 +46,7 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
passThrough = true,
renderTooltip,
allowedLabel,
renderGuardBanner,
...props
}) => {
const { permission } = useProjectPermission();
@@ -39,10 +61,14 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
return <Tooltip content={label}>{finalChild}</Tooltip>;
}
if (isAllowed && renderTooltip) {
if (isAllowed && renderTooltip && allowedLabel) {
return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
}
if (!isAllowed && renderGuardBanner) {
return <ProjectPermissionGuardBanner />;
}
if (!isAllowed) return null;
return finalChild;