add label prop to ResourceDetails, modify implementations (#7339)

Author: jonathanawesome

packages/web/app/src/components/ui/resource-details.tsx

@@ -4,11 +4,11 @@ import { InputCopy } from './input-copy';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 /** Renders readonly properties for resources. Used on settings pages. */
-export function ResourceDetails(props: { id: string }): ReactElement {
+export function ResourceDetails(props: { id: string; label: string }): ReactElement {
   return (
     <div className="flex items-center">
       <div className="border-input text-muted-foreground h-10 whitespace-nowrap rounded-md rounded-r-none border-y border-l bg-gray-900 px-3 py-2 text-sm">
-        Resource ID
+        {props.label}
       </div>
       <InputCopy value={props.id} className="rounded-l-none" />
       <TooltipProvider delayDuration={0}>

packages/web/app/src/pages/organization-settings.tsx

@@ -266,7 +266,7 @@ const OrganizationSettingsContent = (props: {
 
   return (
     <div className="space-y-12">
-      <ResourceDetails id={organization.id} />
+      <ResourceDetails id={organization.id} label="Organization ID" />
       {organization.viewerCanModifySlug && (
         <Form {...slugForm}>
           <form onSubmit={slugForm.handleSubmit(onSlugFormSubmit)}>

packages/web/app/src/pages/project-settings.tsx

@@ -614,7 +614,7 @@ function ProjectSettingsContent(props: {
         <div className="space-y-12">
           {resolvedPage.key === 'general' ? (
             <>
-              <ResourceDetails id={project.id} />
+              <ResourceDetails id={project.id} label="Project ID" />
               <ProjectSettingsPage_SlugForm
                 organizationSlug={props.organizationSlug}
                 projectSlug={props.projectSlug}

packages/web/app/src/pages/target-settings.tsx

@@ -1287,7 +1287,7 @@ const TargetSettingsPageQuery = graphql(`
 function TargetInfo(props: { targetId: string }) {
   return (
     <div>
-      <ResourceDetails id={props.targetId} />
+      <ResourceDetails id={props.targetId} label="Target ID" />
     </div>
   );
 }