Delete CodeKey component (#1310)

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/sync-new/ManualSync.tsx

@@ -12,10 +12,10 @@ import { useMutation } from 'urql';
 
 import type { CodedError } from '@/codedError';
 import Input from '@/components/Forms/Input';
+import { Secret } from '@/components/Secret';
 import { SyncFailure } from '@/components/SyncFailure';
 import { graphql } from '@/gql';
 import { pathCreator } from '@/utils/urls';
-import DeploySigningKey from '../../deploys/DeploySigningKey';
 import { useEnvironment } from '../../environment-context';
 
 const SyncNewAppDocument = graphql(`
@@ -136,7 +136,9 @@ export default function ManualSync({ appsURL }: Props) {
           . Verify that you assigned the signing key below to the <Code>INNGEST_SIGNING_KEY</Code>{' '}
           environment variable:
         </p>
-        <DeploySigningKey className="py-6" />
+
+        <Secret className="my-6" kind="event-key" secret={env.webhookSigningKey} />
+
         <div className="border-t border-slate-200">
           <label htmlFor="url" className="my-2 block text-slate-500">
             App URL

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/EventListNotFound.tsx

@@ -4,13 +4,15 @@ import type { Route } from 'next';
 import { useRouter } from 'next/navigation';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
-import { CodeKey } from '@inngest/components/CodeKey';
+import { Card } from '@inngest/components/Card';
 import { useQuery } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
+import { Secret } from '@/components/Secret';
 import { graphql } from '@/gql';
 import VercelLogomark from '@/logos/vercel-logomark.svg';
 import { pathCreator } from '@/utils/urls';
+import { InlineCode } from '../manage/signing-key/InlineCode';
 
 const GetEventKeysForBlankSlateDocument = graphql(`
   query GetEventKeysForBlankSlate($environmentID: ID!) {
@@ -60,87 +62,86 @@ export default function EventListNotFound() {
             </span>
           </h3>
         </div>
-        <div className="bg-slate-910 rounded-lg px-8 pt-8">
-          <div className="bg-slate-910/20 -mt-8 pt-6 backdrop-blur-sm">
-            <h3 className="flex items-center text-xl font-medium text-white">
-              <span className="mr-2 inline-flex h-6 w-6  items-center justify-center rounded-full bg-slate-700 text-center text-sm text-white">
-                1
-              </span>
-              Send your events
-            </h3>
-            <p className="mt-2 text-sm tracking-wide text-slate-300">
-              After syncing your app, you can start sending events to this environment. To send
-              events, your application needs to have an Event Key.
-            </p>
-            <h4 className="mt-4 text-base font-semibold text-white">Event Key</h4>
-            <p className="mt-2 text-sm tracking-wide text-slate-300">
-              An Event Key let&apos;s your application send events to Inngest with{' '}
-              <code className="inline-flex rounded bg-slate-700 px-1 font-mono text-xs tracking-tight text-white">
-                inngest.send(...)
-              </code>
-              .
-            </p>
-            <p className="mt-2 text-sm tracking-wide text-slate-300">
-              We recommend adding your event key as the{' '}
-              <code className="inline-flex rounded bg-slate-700 px-1 font-mono text-xs tracking-tight text-white">
-                INNGEST_EVENT_KEY
-              </code>{' '}
-              environment variable in your application. Your platform may support setting this in an{' '}
-              <code className="inline-flex rounded bg-slate-700 px-1 font-mono text-xs tracking-tight text-white">
-                .env
-              </code>{' '}
-              file or you may need to set it manually on your platform.
-            </p>
-            <span className="dark mt-4">
-              <CodeKey fullKey={key || '...'} maskedKey={`${key?.substring(0, 6)}`} />
-            </span>
-          </div>
 
-          <div className="mt-6 flex items-center gap-2 border-t border-slate-800/50 py-4">
-            <Button
-              kind="primary"
-              href={pathCreator.apps({ envSlug: environment.slug })}
-              label="Sync Your App"
-            />
-            <div className="flex gap-2 border-l border-slate-800/50 pl-2">
+        <Card>
+          <Card.Content>
+            <div>
+              <h3 className="mb-2 flex items-center text-xl font-medium">
+                <span className="mr-2 inline-flex h-6 w-6  items-center justify-center rounded-full bg-slate-700 text-center text-sm text-white">
+                  1
+                </span>
+                Send your events
+              </h3>
+              <p className="mb-4 text-sm tracking-wide">
+                After syncing your app, you can start sending events to this environment. To send
+                events, your application needs to have an Event Key.
+              </p>
+
+              <h4 className="mb-2 text-base font-semibold">Event Key</h4>
+              <p className="mb-2 text-sm tracking-wide">
+                An Event Key let&apos;s your application send events to Inngest with{' '}
+                <InlineCode value="inngest.send(...)" />.
+              </p>
+              <p className="mb-4 text-sm tracking-wide">
+                We recommend adding your event key as the <InlineCode value="INNGEST_EVENT_KEY" />.
+                environment variable in your application. Your platform may support setting this in
+                an <InlineCode value=".env" />. file or you may need to set it manually on your
+                platform.
+              </p>
+
+              {key && <Secret kind="event-key" secret={key} />}
+            </div>
+
+            <div className="mt-6 flex items-center gap-2">
               <Button
-                href={
-                  'https://www.inngest.com/docs/deploy/vercel?ref=app-onboarding-events' as Route
-                }
-                target="_blank"
-                rel="noreferrer"
-                icon={<VercelLogomark className="-ml-0.5" />}
-                label="Vercel Integration"
+                kind="primary"
+                href={pathCreator.apps({ envSlug: environment.slug })}
+                label="Sync Your App"
               />
+              <div className="flex gap-2 pl-2">
+                <Button
+                  appearance="outlined"
+                  href={
+                    'https://www.inngest.com/docs/deploy/vercel?ref=app-onboarding-events' as Route
+                  }
+                  target="_blank"
+                  rel="noreferrer"
+                  icon={<VercelLogomark className="-ml-0.5" />}
+                  label="Vercel Integration"
+                />
+                <Button
+                  appearance="outlined"
+                  target="_blank"
+                  href={'https://www.inngest.com/docs/events?ref=app-onboarding-events' as Route}
+                  label="Read The Docs"
+                />
+              </div>
+            </div>
+          </Card.Content>
+        </Card>
+
+        <Card>
+          <Card.Content>
+            <h3 className="flex items-center text-xl font-semibold text-slate-800">
+              <span className="mr-2 inline-flex h-6 w-6  items-center justify-center rounded-full bg-slate-800 text-center text-sm text-white">
+                2
+              </span>
+              Trigger Functions With Events
+            </h3>
+            <p className="mt-2 text-sm font-medium text-slate-500">
+              After registering your functions, you can trigger them with events sent to this
+              environment. Your events will show up on this page when they are received.
+            </p>
+            <div className="mt-6 flex items-center gap-2">
               <Button
+                appearance="outlined"
                 target="_blank"
-                href={'https://www.inngest.com/docs/events?ref=app-onboarding-events' as Route}
-                label="Read The Docs"
+                btnAction={() => router.refresh()}
+                label="Refresh page to check for events"
               />
             </div>
-          </div>
-        </div>
-
-        <div className="rounded-lg border border-slate-300 px-8 pt-8">
-          <h3 className="flex items-center text-xl font-semibold text-slate-800">
-            <span className="mr-2 inline-flex h-6 w-6  items-center justify-center rounded-full bg-slate-800 text-center text-sm text-white">
-              2
-            </span>
-            Trigger Functions With Events
-          </h3>
-          <p className="mt-2 text-sm font-medium text-slate-500">
-            After registering your functions, you can trigger them with events sent to this
-            environment. Your events will show up on this page when they are received.
-          </p>
-          <div className="mt-6 flex items-center gap-2 border-t border-slate-100 py-4">
-            <Button
-              appearance="outlined"
-              target="_blank"
-              btnAction={() => router.refresh()}
-              label="Refresh page to check for events"
-            />
-          </div>
-        </div>
+          </Card.Content>
+        </Card>
       </div>
     </div>
   );

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/manage/[ingestKeys]/[keyID]/page.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { notFound } from 'next/navigation';
 import { PencilIcon, TrashIcon } from '@heroicons/react/20/solid';
-import { CodeKey } from '@inngest/components/CodeKey';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,6 +12,8 @@ import {
 import { RiMore2Line } from '@remixicon/react';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
+import { Secret } from '@/components/Secret';
+import type { SecretKind } from '@/components/Secret/Secret';
 import { graphql } from '@/gql';
 import { useGraphQLQuery } from '@/utils/useGraphQLQuery';
 import { Provider } from './Context';
@@ -84,18 +85,14 @@ export default function Keys({ params: { ingestKeys, keyID } }: KeyDetailsProps)
   // Integration created keys cannot be deleted or renamed
   const isIntegration = key.source === SOURCE_INTEGRATION;
 
-  let value = '',
-    maskedValue = '',
-    keyLabel = 'Key';
+  let secretKind: SecretKind;
+  let value;
   if (ingestKeys === 'webhooks') {
+    secretKind = 'webhook-path';
     value = key.url || '';
-    // Leave the base url + the beginning of the key
-    maskedValue = value.replace(/(.{0,}\/e\/)(\w{0,8}).+/, '$1$2');
-    keyLabel = 'Webhook URL';
   } else {
+    secretKind = 'event-key';
     value = key.presharedKey;
-    maskedValue = value.substring(0, 8);
-    keyLabel = 'Event Key';
   }
 
   return (
@@ -140,7 +137,7 @@ export default function Keys({ params: { ingestKeys, keyID } }: KeyDetailsProps)
             )}
           </div>
           <div className="w-3/5">
-            <CodeKey fullKey={value} maskedKey={maskedValue} label={keyLabel} />
+            <Secret kind={secretKind} secret={value} />
           </div>
         </div>
         <TransformEvent keyID={keyID} metadata={key.metadata} keyName={key.name} />

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/manage/signing-key/SigningKey.tsx

@@ -1,9 +1,9 @@
 import { Badge } from '@inngest/components/Badge';
 import { Card } from '@inngest/components/Card';
+import { Time } from '@inngest/components/Time';
 import { RiStarFill } from '@remixicon/react';
 
 import { Secret } from '@/components/Secret';
-import { Time } from '@/components/Time';
 import { DeleteSigningKeyButton } from './DeleteSigningKeyButton';
 
 type Props = {

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/manage/signing-key/page-old.tsx

@@ -4,8 +4,8 @@
  */
 
 import { Alert } from '@inngest/components/Alert';
-import { CodeKey } from '@inngest/components/CodeKey';
 
+import { Secret } from '@/components/Secret';
 import { graphql } from '@/gql';
 import graphqlAPI from '@/queries/graphqlAPI';
 import { getEnvironment } from '@/queries/server-only/getEnvironment';
@@ -32,21 +32,12 @@ export default async function Page({ environmentSlug }: Props) {
     environmentID: environment.id,
   });
 
-  const maskedSigningKey = res.environment.webhookSigningKey.replace(
-    /signkey-(prod|test)-.+/,
-    'signkey-$1'
-  );
-
   return (
     <div className="flex place-content-center">
       <div className="mt-8 max-w-3xl rounded-md border border-slate-200 px-8 pb-8 pt-6">
         <h2 className="mb-6 text-lg font-semibold text-slate-800">Inngest Signing Key</h2>
 
-        <CodeKey
-          fullKey={res.environment.webhookSigningKey}
-          maskedKey={maskedSigningKey}
-          label="Signing key"
-        />
+        <Secret kind="signing-key" secret={res.environment.webhookSigningKey} />
 
         <p className="mt-8 text-sm leading-relaxed text-slate-700">
           Use this <span className="font-bold text-slate-800">secret signing key</span> with the

ui/apps/dashboard/src/components/Secret/CopyButton.tsx

@@ -20,10 +20,10 @@ export function CopyButton({ value }: Props) {
 
   return (
     <Tooltip>
-      <TooltipTrigger className="rounded-r-md bg-white">
+      <TooltipTrigger asChild>
         <button
           aria-label={label}
-          className="flex w-8 items-center justify-center"
+          className="flex items-center justify-center bg-white px-2"
           onClick={() => handleCopyClick(value)}
         >
           <Icon className="h-6" />

ui/apps/dashboard/src/components/Secret/RevealButton.tsx

@@ -1,12 +1,14 @@
 import { Tooltip, TooltipContent, TooltipTrigger } from '@inngest/components/Tooltip';
+import { cn } from '@inngest/components/utils/classNames';
 import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
 
 type Props = {
+  className?: string;
   isRevealed: boolean;
   onClick: () => void;
 };
 
-export function RevealButton({ isRevealed, onClick }: Props) {
+export function RevealButton({ className, isRevealed, onClick }: Props) {
   let Icon = RiEyeLine;
   let label = 'Reveal';
   if (isRevealed) {
@@ -16,8 +18,12 @@ export function RevealButton({ isRevealed, onClick }: Props) {
 
   return (
     <Tooltip>
-      <TooltipTrigger className="align-center flex">
-        <button area-label={label} onClick={onClick}>
+      <TooltipTrigger asChild>
+        <button
+          aria-label={label}
+          className={cn('flex items-center justify-center px-2', className)}
+          onClick={onClick}
+        >
           <Icon className="h-6" />
         </button>
       </TooltipTrigger>