More webhooks tweaks

public/assets/styles/utility/text.scss

@@ -20,11 +20,16 @@ pre:last-child {
   font-weight: get("font.weight.semibold");
 }
 
-.text-title {
+.text-header {
   font-size: get("font.size.xl");
   font-weight: get("font.weight.medium");
 }
 
+.text-title {
+  font-size: get("font.size.lg");
+  font-weight: get("font.weight.medium");
+}
+
 .text-body {
   font-size: get("font.size.base");
 }
@@ -49,6 +54,12 @@ pre:last-child {
   color: get("colors.blue.600");
 }
 
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .text-link:hover {
   color: get("colors.blue.800");
   text-decoration: underline;

public/components/Header.tsx

@@ -23,7 +23,7 @@ export const Header = () => {
           <HStack justify="between">
             <a href="/" className="flex flex-x flex-items-center flex--spacing-2 h-8">
               <TenantLogo size={100} />
-              <h1 className="text-title">{fider.session.tenant.name}</h1>
+              <h1 className="text-header">{fider.session.tenant.name}</h1>
             </a>
             {fider.session.isAuthenticated && (
               <HStack spacing={2}>

public/components/common/form/Form.scss

@@ -11,10 +11,10 @@
   }
 
   &:last-child {
-    margin-bottom: 0;
+    // margin-bottom: 0;
 
     .flex-x > & {
-      margin-bottom: spacing(2);
+      // margin-bottom: spacing(2);
     }
   }
 }

public/pages/Administration/components/webhook/WebhookForm.tsx

@@ -152,7 +152,7 @@ export const WebhookForm = (props: WebhookFormProps) => {
           This webhook has failed
         </Message>
       )}
-      <h2 className="text-title mb-2">{title}</h2>
+      <h2 className="text-title mb-4">{title}</h2>
       <Form className="c-webhook-form" error={error}>
         <Input field="name" label="Name" value={name} onChange={setName} placeholder="My awesome webhook" />
         <Select
@@ -167,7 +167,7 @@ export const WebhookForm = (props: WebhookFormProps) => {
           ]}
           onChange={setType}
         />
-        <Field label="Status">
+        <Field label="Enabled">
           <Toggle active={status === WebhookStatus.ENABLED} onToggle={setStatus} />
           {status === WebhookStatus.FAILED && <p className="text-muted mt-1">This webhook was disabled due to a trigger failure</p>}
         </Field>
@@ -190,7 +190,7 @@ export const WebhookForm = (props: WebhookFormProps) => {
         />
         <Input field="http_method" label="HTTP Method" value={httpMethod} onChange={setHttpMethod} placeholder="POST" />
         <Field label="HTTP Headers" afterLabel={<HoverInfo text="Those headers are sent in the request when the webhook is triggered" />}>
-          <VStack spacing={2}>
+          <VStack spacing={0}>
             {Object.entries(httpHeaders).map(([header, value]) => (
               <HttpHeader key={header} header={header} value={value} onEdit={setHttpHeader} onRemove={removeHttpHeader} />
             ))}

public/pages/Administration/components/webhook/WebhookListItem.tsx

@@ -1,7 +1,7 @@
 import "./WebhookListItem.scss"
 
 import React, { useState } from "react"
-import { Webhook, WebhookStatus, WebhookTriggerResult } from "@fider/models"
+import { Webhook, WebhookStatus, WebhookTriggerResult, WebhookType } from "@fider/models"
 import { Button, Icon } from "@fider/components"
 import { actions, notify } from "@fider/services"
 
@@ -63,6 +63,19 @@ export const WebhookListItem = (props: WebhookListItemProps) => {
     }
   }
 
+  const getWebhookType = (type: WebhookType) => {
+    switch (type) {
+      case WebhookType.CHANGE_STATUS:
+        return "Change Status"
+      case WebhookType.NEW_COMMENT:
+        return "New Comment"
+      case WebhookType.DELETE_POST:
+        return "Delete Post"
+      case WebhookType.NEW_POST:
+        return "New Post"
+    }
+  }
+
   const testWebhook = async () => {
     const result = await actions.testWebhook(props.webhook.id)
     setTriggerResult(result.data)
@@ -100,8 +113,9 @@ export const WebhookListItem = (props: WebhookListItemProps) => {
       <HStack justify="between">
         <HStack>
           <WebhookIcon status={props.webhook.status} />
-          <h3 className="text-title">
-            <span className="text-muted">#{props.webhook.id}</span> {props.webhook.name}
+          <h3 className="text-body nowrap">
+            <span className="text-muted">#{props.webhook.id}</span>
+            <span className="text-bold px-2">{getWebhookType(props.webhook.type)}</span> - {props.webhook.name}
           </h3>
           {triggerResult?.success === false && (
             <WebhookFailInfo result={triggerResult} isModalOpen={isFailInfoModalOpen} onModalOpen={showFailInfoModal} onModalClose={hideFailInfoModal} />

public/pages/Administration/pages/ManageWebhooks.page.tsx

@@ -30,10 +30,9 @@ interface WebhooksListProps {
 const WebhooksList = (props: WebhooksListProps) => {
   return (
     <div>
-      <h2 className="text-display">{props.title}</h2>
-      <p className="text-muted">These webhooks are triggered every time {props.description}.</p>
+      <h2 className="text-display mb-4">Existing Webhooks</h2>
       <VStack spacing={4} divide>
-        {props.list.length === 0 ? <p className="text-muted">There aren’t any &quot;{props.title.toLowerCase()}&quot; webhook yet.</p> : props.list}
+        {props.list.length === 0 ? <p className="text-muted">There aren’t any webhooks yet.</p> : props.list}
       </VStack>
     </div>
   )
@@ -98,8 +97,8 @@ const ManageWebhooksPage = (props: ManageWebhooksPageProps) => {
     sortWebhooks()
   }
 
-  const getWebhookList = (filter: (webhook: Webhook) => boolean) => {
-    return allWebhooks.filter(filter).map((w) => {
+  const getWebhookItems = () => {
+    return allWebhooks.map((w) => {
       return (
         <WebhookListItem
           key={w.id}
@@ -126,11 +125,6 @@ const ManageWebhooksPage = (props: ManageWebhooksPageProps) => {
     return render(<WebhookForm onSave={handleWebhookEdited} onCancel={cancelEdit} webhook={editing} />)
   }
 
-  const newPostList = getWebhookList((w) => w.type === WebhookType.NEW_POST)
-  const newCommentList = getWebhookList((w) => w.type === WebhookType.NEW_COMMENT)
-  const changeStatusList = getWebhookList((w) => w.type === WebhookType.CHANGE_STATUS)
-  const deletePostList = getWebhookList((w) => w.type === WebhookType.DELETE_POST)
-
   return render(
     <VStack spacing={8}>
       <p>
@@ -140,13 +134,10 @@ const ManageWebhooksPage = (props: ManageWebhooksPageProps) => {
         </a>
         .
       </p>
-      <WebhooksList title="New Post" description="a new post is created on this site" list={newPostList} />
-      <WebhooksList title="New Comment" description="a new comment is created on any post" list={newCommentList} />
-      <WebhooksList title="Change Status" description="the status of a post is changed" list={changeStatusList} />
-      <WebhooksList title="Delete Post" description="a post is deleted on this site" list={deletePostList} />
+      <WebhooksList title="New Post" description="a new post is created on this site" list={getWebhookItems()} />
       <div>
         <Button variant="secondary" onClick={addNew}>
-          Add new
+          Add new webhook
         </Button>
       </div>
     </VStack>