feat(dashboard): remove tooltip from root key permission toggle (unke…

…yed#2618) * feat(dashboard): remove tooltip from root key permission toggle * style: apply `pnpm fmt` changes * feat(dashboard): remove tooltip from root key permission manager card
harshsbhat · Oct 30, 2024 · c531755 · c531755
1 parent 7c76890
commit c531755
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 40 deletions.
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx
@@ -1,4 +1,3 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -10,7 +9,6 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Permission } from "@unkey/db";
 import { Check } from "lucide-react";
 import { PermissionToggle } from "./permission_toggle";
@@ -103,20 +101,12 @@ export function PermissionManagerCard(props: PermissionManagerCardProps) {
                   .filter(([_action, { description: _description, permission }]) => {
                     return props.permissions.some((p) => p.name === permission);
                   })
-                  .map(([action, { description, permission }]) => {
+                  .map(([action, { description }]) => {
                     return (
                       <div key={action} className="flex items-center gap-8">
-                        <div className="w-1/3 ">
-                          <Tooltip>
-                            <TooltipTrigger className="flex items-center gap-2">
-                              <Check className="w-4 h-4 text-success" />
-                              <Label className="text-xs text-content">{action}</Label>
-                            </TooltipTrigger>
-                            <TooltipContent className="flex items-center gap-2">
-                              <span className="font-mono text-sm font-medium">{permission}</span>
-                              <CopyButton value={permission} />
-                            </TooltipContent>
-                          </Tooltip>
+                        <div className="w-1/3 flex items-center gap-2">
+                          <Check className="w-4 h-4 text-success" />
+                          <Label className="text-xs text-content">{action}</Label>
                         </div>
 
                         <p className="w-2/3 text-xs text-content-subtle">{description}</p>

diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
@@ -20,7 +20,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { trpc } from "@/lib/trpc/client";
 import { type UnkeyPermission, unkeyPermissionValidation } from "@unkey/rbac";
 import { ChevronRight } from "lucide-react";
@@ -152,7 +151,6 @@ export const Client: React.FC<Props> = ({ apis }) => {
                 <div key={`workspace-${category}`} className="flex flex-col gap-2">
                   <div className="flex flex-col">
                     <PermissionToggle
-                      permissionName={`selectAll-${category}`}
                       label={<span className="text-base font-bold">{category}</span>}
                       description={`Select all permissions for ${category} in this workspace`}
                       checked={isAllSelected}
@@ -168,7 +166,6 @@ export const Client: React.FC<Props> = ({ apis }) => {
                     {Object.entries(allPermissions).map(([action, { description, permission }]) => (
                       <PermissionToggle
                         key={action}
-                        permissionName={permission}
                         label={action}
                         description={description}
                         checked={selectedPermissions.includes(permission)}
@@ -225,7 +222,6 @@ export const Client: React.FC<Props> = ({ apis }) => {
                       <div key={`api-${category}`} className="flex flex-col gap-2">
                         <div className="flex flex-col">
                           <PermissionToggle
-                            permissionName={`selectAll-${category}`}
                             label={
                               <span className="text-base font-bold mt-3.5 sm:mt-0">{category}</span>
                             }
@@ -243,7 +239,6 @@ export const Client: React.FC<Props> = ({ apis }) => {
                           {Object.entries(roles).map(([action, { description, permission }]) => (
                             <PermissionToggle
                               key={action}
-                              permissionName={permission}
                               label={action}
                               description={description}
                               checked={selectedPermissions.includes(permission)}
@@ -325,39 +320,26 @@ export const Client: React.FC<Props> = ({ apis }) => {
 type PermissionToggleProps = {
   checked: boolean;
   setChecked: (checked: boolean) => void;
-  permissionName: string;
   label: string | React.ReactNode;
   description: string;
 };
 
 const PermissionToggle: React.FC<PermissionToggleProps> = ({
   checked,
   setChecked,
-  permissionName,
   label,
   description,
 }) => {
   return (
     <div className="flex flex-col sm:items-center gap-1 mb-2 sm:flex-row sm:gap-0 sm:mb-0">
-      <div className="w-1/3">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={checked}
-                onCheckedChange={() => {
-                  setChecked(!checked);
-                }}
-              />
-
-              <Label className="text-xs text-content">{label}</Label>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent className="flex items-center gap-2">
-            <span className="font-mono text-sm font-medium">{permissionName}</span>
-            <CopyButton value={permissionName} />
-          </TooltipContent>
-        </Tooltip>
+      <div className="w-1/3 flex items-center gap-2">
+        <Checkbox
+          checked={checked}
+          onCheckedChange={() => {
+            setChecked(!checked);
+          }}
+        />
+        <Label className="text-xs text-content">{label}</Label>
       </div>
 
       <p className="w-full md:w-2/3 text-xs text-content-subtle ml-6 md:ml-0">{description}</p>