feat(frontend): admin ui changes (#2716)

* feat(frontend): admin ui changes * refactor: standardize default a link styling (#2719) --------- Co-authored-by: Blair Currey <12960453+BlairCurrey@users.noreply.github.com>
interledger · May 14, 2024 · 604af14 · 604af14
1 parent d9b2442
commit 604af14
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 20 deletions.
diff --git a/packages/frontend/app/components/Sidebar.tsx b/packages/frontend/app/components/Sidebar.tsx
@@ -15,21 +15,21 @@ const navigation = [
     name: 'Home',
     href: '/'
   },
-  {
-    name: 'Peers',
-    href: '/peers'
-  },
   {
     name: 'Assets',
     href: '/assets'
   },
+  {
+    name: 'Peers',
+    href: '/peers'
+  },
   {
     name: 'Wallet Addresses',
     href: '/wallet-addresses'
   },
   {
-    name: 'Webhooks',
-    href: '/webhooks'
+    name: 'Webhook Events',
+    href: '/webhook-events'
   },
   {
     name: 'Payments',

diff --git a/packages/frontend/app/components/ui/Input.tsx b/packages/frontend/app/components/ui/Input.tsx
@@ -8,10 +8,11 @@ type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'className'> & {
   label?: string
   error?: string | string[]
   addOn?: ReactNode
+  description?: ReactNode
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ addOn, label, type, error, id, ...props }, ref) => {
+  ({ description, addOn, label, type, error, id, ...props }, ref) => {
     const internalId = id ?? useId()
 
     return (
@@ -38,6 +39,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             {...props}
           />
         </div>
+        {description ? (
+          <div className='font-medium text-sm'>{description}</div>
+        ) : null}
         <FieldError error={error} />
       </div>
     )

diff --git a/packages/frontend/app/components/ui/PasswordInput.tsx b/packages/frontend/app/components/ui/PasswordInput.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { forwardRef, useId, useState } from 'react'
 import { Eye, EyeSlash } from '../icons'
 import { FieldError } from './FieldError'
@@ -10,10 +10,11 @@ type InputProps = Omit<
 > & {
   label?: string
   error?: string | string[]
+  description?: ReactNode
 }
 
 export const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, error, ...props }, ref) => {
+  ({ label, error, description, ...props }, ref) => {
     const id = useId()
     const [isVisible, setIsVisible] = useState(false)
 
@@ -45,6 +46,9 @@ export const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
             )}
           </button>
         </div>
+        {description ? (
+          <div className='font-medium text-sm'>{description}</div>
+        ) : null}
         <FieldError error={error} />
       </div>
     )

diff --git a/packages/frontend/app/components/ui/Select.tsx b/packages/frontend/app/components/ui/Select.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Fragment, useId, useState } from 'react'
 import { Combobox, Transition } from '@headlessui/react'
 import { Input } from './Input'
@@ -19,6 +20,7 @@ type SelectProps = {
   required?: boolean
   error?: string | string[]
   defaultValue?: SelectOption
+  description?: ReactNode
 }
 
 export const Select = ({
@@ -32,7 +34,8 @@ export const Select = ({
   defaultValue = {
     label: '',
     value: ''
-  }
+  },
+  description
 }: SelectProps) => {
   const id = useId()
   const [internalValue, setInternalValue] = useState<SelectOption>(defaultValue)
@@ -82,6 +85,9 @@ export const Select = ({
             )}
           </Combobox.Button>
         </div>
+        {description ? (
+          <div className='font-medium text-sm'>{description}</div>
+        ) : null}
         {error ? <FieldError error={error} /> : null}
         <Transition
           as={Fragment}

diff --git a/packages/frontend/app/routes/payments.incoming.$incomingPaymentId.tsx b/packages/frontend/app/routes/payments.incoming.$incomingPaymentId.tsx
@@ -83,7 +83,7 @@ export default function ViewIncomingPaymentPage() {
                 <p className='font-medium'>Wallet Address ID </p>
                 <Link
                   to={`/wallet-addresses/${incomingPayment.walletAddressId}`}
-                  className='mt-1 underline text-blue-600 hover:text-blue-800 visited:text-purple-600'
+                  className='default-link'
                 >
                   {incomingPayment.walletAddressId}
                 </Link>

diff --git a/packages/frontend/app/routes/payments.outgoing.$outgoingPaymentId.tsx b/packages/frontend/app/routes/payments.outgoing.$outgoingPaymentId.tsx
@@ -86,7 +86,7 @@ export default function ViewOutgoingPaymentPage() {
                 <p className='font-medium'>Wallet Address ID </p>
                 <Link
                   to={`/wallet-addresses/${outgoingPayment.walletAddressId}`}
-                  className='mt-1 underline text-blue-600 hover:text-blue-800 visited:text-purple-600'
+                  className='default-link'
                 >
                   {outgoingPayment.walletAddressId}
                 </Link>
@@ -99,10 +99,7 @@ export default function ViewOutgoingPaymentPage() {
               </div>
               <div>
                 <p className='font-medium'>Receiver</p>
-                <Link
-                  className='underline text-blue-600 hover:text-blue-800 visited:text-purple-600'
-                  to={outgoingPayment.receiver}
-                >
+                <Link className='default-link' to={outgoingPayment.receiver}>
                   {outgoingPayment.receiver}
                 </Link>
               </div>

diff --git a/packages/frontend/app/routes/peers.$peerId.tsx b/packages/frontend/app/routes/peers.$peerId.tsx
@@ -121,6 +121,18 @@ export default function ViewPeerPage() {
                     defaultValue={peer.name ?? ''}
                     placeholder='Peer name'
                     error={response?.errors.general.fieldErrors.name}
+                    description={
+                      <>
+                        The name of the{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/peering/'
+                        >
+                          peer
+                        </a>
+                        .
+                      </>
+                    }
                   />
                   <Input
                     name='staticIlpAddress'
@@ -131,6 +143,17 @@ export default function ViewPeerPage() {
                     error={
                       response?.errors.general.fieldErrors.staticIlpAddress
                     }
+                    description={
+                      <>
+                        {"The peer's "}
+                        <a
+                          className='default-link'
+                          href='https://interledger.org/developers/rfcs/ilp-addresses/'
+                        >
+                          address on the Interledger network.
+                        </a>
+                      </>
+                    }
                   />
                   <Input
                     type='number'
@@ -141,6 +164,18 @@ export default function ViewPeerPage() {
                     label='Max Packet Amount'
                     placeholder='Max Packet Amount'
                     error={response?.errors.general.fieldErrors.maxPacketAmount}
+                    description={
+                      <>
+                        The maximum amount of value that can be sent in a single{' '}
+                        <a
+                          className='default-link'
+                          href='https://interledger.org/developers/rfcs/stream-protocol/#35-packets-and-frames'
+                        >
+                          Interledger STREAM Packet
+                        </a>
+                        .
+                      </>
+                    }
                   />
                 </div>
                 <div className='flex justify-end p-4'>
@@ -174,6 +209,17 @@ export default function ViewPeerPage() {
                     label='Incoming Auth Tokens'
                     placeholder='Accepts a comma separated list of tokens'
                     error={response?.errors.http.fieldErrors.incomingAuthTokens}
+                    description={
+                      <>
+                        List of valid tokens to accept when receiving{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#incoming-http'
+                        >
+                          incoming ILP packets from the peer.
+                        </a>
+                      </>
+                    }
                   />
                   <PasswordInput
                     name='outgoingAuthToken'
@@ -182,6 +228,17 @@ export default function ViewPeerPage() {
                     required
                     defaultValue={peer.http.outgoing.authToken}
                     error={response?.errors.http.fieldErrors.outgoingAuthToken}
+                    description={
+                      <>
+                        List of valid tokens to present when sending{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#outgoing-http'
+                        >
+                          outgoing ILP packets to the peer.
+                        </a>
+                      </>
+                    }
                   />
                   <Input
                     name='outgoingEndpoint'
@@ -190,6 +247,18 @@ export default function ViewPeerPage() {
                     required
                     defaultValue={peer.http.outgoing.endpoint}
                     error={response?.errors.http.fieldErrors.outgoingEndpoint}
+                    description={
+                      <>
+                        Endpoint on the peer to which{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#outgoing-http'
+                        >
+                          outgoing ILP packets
+                        </a>{' '}
+                        will be sent.
+                      </>
+                    }
                   />
                 </div>
                 <div className='flex justify-end p-4'>

diff --git a/packages/frontend/app/routes/peers.create.tsx b/packages/frontend/app/routes/peers.create.tsx
@@ -59,19 +59,54 @@ export default function CreatePeerPage() {
                     label='Name'
                     placeholder='Peer name'
                     error={response?.errors?.fieldErrors.name}
+                    description={
+                      <>
+                        The name of the{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/peering/'
+                        >
+                          peer
+                        </a>{' '}
+                        to be added.
+                      </>
+                    }
                   />
                   <Input
                     name='staticIlpAddress'
                     label='Static ILP Address'
                     placeholder='ILP Address'
                     required
                     error={response?.errors?.fieldErrors?.staticIlpAddress}
+                    description={
+                      <>
+                        {"The peer's "}
+                        <a
+                          className='default-link'
+                          href='https://interledger.org/developers/rfcs/ilp-addresses/'
+                        >
+                          address on the Interledger network.
+                        </a>
+                      </>
+                    }
                   />
                   <Input
                     name='maxPacketAmount'
                     label='Max Packet Amount'
                     placeholder='Max Packet Amount'
                     error={response?.errors?.fieldErrors?.maxPacketAmount}
+                    description={
+                      <>
+                        The maximum amount of value that can be sent in a single{' '}
+                        <a
+                          className='default-link'
+                          href='https://interledger.org/developers/rfcs/stream-protocol/#35-packets-and-frames'
+                        >
+                          Interledger STREAM Packet
+                        </a>
+                        .
+                      </>
+                    }
                   />
                 </div>
               </div>
@@ -89,20 +124,54 @@ export default function CreatePeerPage() {
                     label='Incoming Auth Tokens'
                     placeholder='Accepts a comma separated list of tokens'
                     error={response?.errors?.fieldErrors?.incomingAuthTokens}
+                    description={
+                      <>
+                        List of valid tokens to accept when receiving{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#incoming-http'
+                        >
+                          incoming ILP packets from the peer.
+                        </a>
+                      </>
+                    }
                   />
                   <Input
                     name='outgoingAuthToken'
                     label='Outgoing Auth Token'
                     placeholder='Outgoing HTTP Auth Token'
                     required
                     error={response?.errors?.fieldErrors?.outgoingAuthToken}
+                    description={
+                      <>
+                        List of valid tokens to present when sending{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#outgoing-http'
+                        >
+                          outgoing ILP packets to the peer.
+                        </a>
+                      </>
+                    }
                   />
                   <Input
                     name='outgoingEndpoint'
                     label='Outgoing Endpoint'
                     placeholder='Outgoing HTTP Endpoint'
                     required
                     error={response?.errors?.fieldErrors?.outgoingEndpoint}
+                    description={
+                      <>
+                        Endpoint on the peer to which{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/interledger-protocol/connector/#outgoing-http'
+                        >
+                          outgoing ILP packets
+                        </a>{' '}
+                        will be sent.
+                      </>
+                    }
                   />
                 </div>
               </div>
@@ -124,6 +193,18 @@ export default function CreatePeerPage() {
                     name='asset'
                     placeholder='Select asset...'
                     label='Asset'
+                    description={
+                      <>
+                        The type of{' '}
+                        <a
+                          className='default-link'
+                          href='https://rafiki.dev/concepts/asset/'
+                        >
+                          asset
+                        </a>{' '}
+                        that is sent to & received from the peer.
+                      </>
+                    }
                     required
                   />
                 </div>

diff --git a/...ges/frontend/app/routes/webhooks.data.tsx → ...ontend/app/routes/webhook-events.data.tsx b/...ges/frontend/app/routes/webhooks.data.tsx → ...ontend/app/routes/webhook-events.data.tsx
@@ -18,7 +18,7 @@ export default function WebhookEventData() {
   const [searchParams] = useSearchParams()
   const state = location.state as { data: string }
   const dismiss = () =>
-    navigate(`/webhooks${searchParams ? `?${searchParams}` : null}`, {
+    navigate(`/webhook-events${searchParams ? `?${searchParams}` : null}`, {
       preventScrollReset: true
     })