feat: added empty states for when there are no webhooks or webhook at…

…tempts (#1)

* refactor: adjust some linting rules and fix some lint issues

* feat: added empty states for when there are no webhooks or webhook attempts

.eslintrc

@@ -11,5 +11,10 @@
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
     "plugin:react/jsx-runtime"
-  ]
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "no-nested-ternary": "off"
+  }
 }

src/components/Webhook.tsx

@@ -1,4 +1,5 @@
-import { Flex, Spinner, Stack } from '@sanity/ui';
+import { Card, Flex, Spinner, Stack } from '@sanity/ui';
+import { FC } from 'react';
 import { useClient, useProjectId } from 'sanity';
 import useSWR, { type SWRResponse } from 'swr';
 import type { SanityWebhookAttempt } from '../types/SanityWebhookAttempt';
@@ -7,8 +8,8 @@ import { WebhookAttempt } from './WebhookAttempt';
 
 export interface WebhookProps {
   webhookId: string;
-  refreshInterval?: number;
-  webhookBodyComponent?: React.FC<WebhookBodyComponentProps>;
+  refreshInterval: number | undefined;
+  webhookBodyComponent: FC<WebhookBodyComponentProps>;
 }
 
 export function Webhook({
@@ -59,6 +60,12 @@ export function Webhook({
         </Flex>
       )}
 
+      {data && data.length === 0 && (
+        <Card padding={[1, 2]} radius={3} tone="caution">
+          Found no events.
+        </Card>
+      )}
+
       {data?.map((row) => (
         <WebhookAttempt
           key={row.id}

src/components/WebhookAttempt.tsx

@@ -17,20 +17,19 @@ import {
   formatDuration,
   intervalToDuration
 } from 'date-fns';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { SanityWebhookAttempt } from '../types/SanityWebhookAttempt';
 import { WebhookBodyComponentProps } from '../types/WebhookBodyComponentProps';
 import { BadgeRow } from './BadgeRow';
-import { DefaultWebhookBody } from './DefaultWebhookBody';
 
 export interface WebhookAttemptProps {
   attempt: SanityWebhookAttempt;
-  webhookBodyComponent?: React.FC<WebhookBodyComponentProps>;
+  webhookBodyComponent: FC<WebhookBodyComponentProps>;
 }
 
 export function WebhookAttempt({
   attempt,
-  webhookBodyComponent
+  webhookBodyComponent: WebhookBody
 }: WebhookAttemptProps) {
   const [showResponse, setShowResponse] = useState(false);
   const formatDistanceLocale: { [s: string]: string } = {
@@ -39,9 +38,6 @@ export function WebhookAttempt({
     xHours: '{{count}}h'
   };
 
-  // Injectable components
-  const WebhookBody = webhookBodyComponent || DefaultWebhookBody;
-
   return (
     <Card key={attempt.id} padding={[3, 3, 3, 4]} radius={2} shadow={1}>
       <Stack space={[3, 3, 3, 4]}>

src/components/Webhooks.tsx

@@ -1,5 +1,5 @@
 import { Badge, Card, Flex, Heading, Inline, Stack, Text } from '@sanity/ui';
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useClient, useDataset, useProjectId } from 'sanity';
 import { Link, useRouter } from 'sanity/router';
 import styled from 'styled-components';
@@ -24,8 +24,8 @@ const WebhooksList = styled.div`
 `;
 
 export interface WebhooksProps {
-  refreshInterval?: number;
-  webhookBodyComponent?: React.FC<WebhookBodyComponentProps>;
+  refreshInterval: number | undefined;
+  webhookBodyComponent: FC<WebhookBodyComponentProps>;
 }
 
 export function Webhooks({
@@ -47,12 +47,13 @@ export function Webhooks({
       })
   );
 
-  const webhooks = webhooksResponse?.data?.filter(
-    (webhook) =>
-      webhook.dataset === '*' ||
-      (Array.isArray(webhook.dataset) && webhook.dataset.includes(dataset)) ||
-      webhook.dataset === dataset
-  );
+  const webhooks =
+    webhooksResponse?.data?.filter(
+      (webhook) =>
+        webhook.dataset === '*' ||
+        (Array.isArray(webhook.dataset) && webhook.dataset.includes(dataset)) ||
+        webhook.dataset === dataset
+    ) || [];
 
   useEffect(() => {
     if (router.state) {
@@ -73,6 +74,12 @@ export function Webhooks({
                 </Heading>
               </Inline>
 
+              {webhooks.length === 0 && (
+                <Card padding={[1, 2]} radius={3} tone="caution">
+                  No webhooks are configured for the current dataset.
+                </Card>
+              )}
+
               {webhooks?.map((webhook) => (
                 <Link
                   key={webhook.id}

src/webhooks.tsx

@@ -1,14 +1,16 @@
 import { PlugIcon } from '@sanity/icons';
+import { FC } from 'react';
 import { definePlugin } from 'sanity';
 import { route } from 'sanity/router';
+import { DefaultWebhookBody } from './components/DefaultWebhookBody';
 import { Webhooks } from './components/Webhooks';
 import { type WebhookBodyComponentProps } from './types/WebhookBodyComponentProps';
 
 export interface WebhooksPluginConfig {
   /**  Refresh interval for webhook events in milliseconds; set to 0 to disable live reload */
   refreshInterval?: number;
   /** Component that displays the webhook request result */
-  webhookBodyComponent?: React.FC<WebhookBodyComponentProps>;
+  webhookBodyComponent?: FC<WebhookBodyComponentProps>;
 }
 
 /**
@@ -49,7 +51,9 @@ export const webhooks = definePlugin<WebhooksPluginConfig | void>(
                 ? undefined
                 : config?.refreshInterval || 10000
             }
-            webhookBodyComponent={config?.webhookBodyComponent}
+            webhookBodyComponent={
+              config?.webhookBodyComponent || DefaultWebhookBody
+            }
           />
         )
       }