From 987ae4240e40b3a469fe6d302b6b29d8a0aad2fe Mon Sep 17 00:00:00 2001
From: Marcus Forsberg <marcus@winter.ax>
Date: Mon, 22 Apr 2024 10:33:54 +0200
Subject: [PATCH] fix: ensure Studio navbar remains fixed when scrolling a long
 list of webhook attempts

---
 src/components/Webhooks.tsx | 202 ++++++++++++++++++------------------
 1 file changed, 100 insertions(+), 102 deletions(-)

diff --git a/src/components/Webhooks.tsx b/src/components/Webhooks.tsx
index cd2ed6a..a405710 100644
--- a/src/components/Webhooks.tsx
+++ b/src/components/Webhooks.tsx
@@ -1,4 +1,4 @@
-import {Badge, Card, Flex, Heading, Inline, Spinner, Stack, Text} from '@sanity/ui'
+import {Badge, Box, Card, Flex, Heading, Inline, Spinner, Stack, Text} from '@sanity/ui'
 import {FC, useEffect, useState} from 'react'
 import {useClient, useDataset, useProjectId} from 'sanity'
 import {Link, useRouter} from 'sanity/router'
@@ -10,19 +10,34 @@ import {WebhookBodyComponentProps} from '../types/WebhookBodyComponentProps'
 import {BadgeRow} from './BadgeRow'
 import {Webhook} from './Webhook'
 
+const ToolWrapper = styled(Box)`
+  @media (min-width: 1000px) {
+    height: 100%;
+    overflow: hidden;
+  }
+`
+
 const LayoutWrapper = styled(Flex)`
   flex-direction: column;
 
   @media (min-width: 1000px) {
     flex-direction: row;
+    height: 100%;
   }
 `
 
-const WebhooksList = styled.div`
+const WebhooksList = styled(Stack)`
   @media (min-width: 1000px) {
     flex: 0 0 500px;
+    overflow-y: auto;
+    height: 100%;
   }
 `
+const AttemptsList = styled(Stack)`
+  flex-grow: 1;
+  overflow-y: auto;
+  height: 100%;
+`
 
 export interface WebhooksProps {
   refreshInterval: number | undefined
@@ -61,108 +76,91 @@ export function Webhooks({refreshInterval, webhookBodyComponent}: WebhooksProps)
   }, [router.state])
 
   return (
-    <>
-      <Card padding={[3, 3, 3, 4]} paddingTop={0}>
-        <LayoutWrapper gap={[3, 3, 3, 4]}>
-          <WebhooksList>
-            <Stack space={[3, 3, 3, 4]}>
-              <Inline paddingRight={[3, 3, 3, 4]} paddingTop={[3, 3, 3, 0]}>
-                <Heading as="h2" size={2}>
-                  Webhooks
-                </Heading>
-              </Inline>
+    <ToolWrapper padding={[3, 3, 3, 0]} paddingTop={0}>
+      <LayoutWrapper gap={[3, 3, 3, 0]}>
+        <WebhooksList padding={[1, 1, 1, 4]} space={[3, 3, 3, 4]}>
+          <Heading as="h2" size={2}>
+            Webhooks
+          </Heading>
 
-              {isLoading && (
-                <Flex align="center" justify="center">
-                  <Spinner muted />
-                </Flex>
-              )}
+          {isLoading && (
+            <Flex align="center" justify="center">
+              <Spinner muted />
+            </Flex>
+          )}
 
-              {!isLoading && webhooks.length === 0 && (
-                <Card padding={[1, 2]} radius={3} tone="caution">
-                  No webhooks are configured for the current dataset.
-                </Card>
-              )}
-
-              {!isLoading &&
-                webhooks?.map((webhook) => (
-                  <Link
-                    key={webhook.id}
-                    href={`${
-                      router.resolvePathFromState(router.state).split('/webhooks')[0]
-                    }/webhooks/${webhook.id}`}
-                  >
-                    <Card
-                      padding={[3, 3, 3, 4]}
-                      radius={2}
-                      shadow={1}
-                      tone={webhookId && webhookId === webhook.id ? 'primary' : undefined}
-                    >
-                      <Flex justify="space-between" align="center">
-                        <Stack space={4}>
-                          <Text size={[2, 3]}>
-                            <Flex wrap="wrap" gap={[3]} style={{rowGap: 2}} align="center">
-                              {webhook.name}
-                              <Inline>
-                                <Badge tone={webhook.isDisabled ? 'critical' : 'positive'}>
-                                  {webhook.isDisabled ? 'Disabled' : 'Enabled'}
-                                </Badge>
-                              </Inline>
-                            </Flex>
-                          </Text>
-
-                          <Stack space={2}>
-                            <BadgeRow
-                              heading="Dataset"
-                              badges={[webhook.dataset]}
-                              tone="default"
-                              wrap="nowrap"
-                            />
-                            <BadgeRow
-                              heading="ID"
-                              badges={[webhook.id]}
-                              tone="default"
-                              wrap="nowrap"
-                            />
-                            <BadgeRow
-                              heading="URL"
-                              badges={[webhook.url]}
-                              tone="default"
-                              wrap="nowrap"
-                            />
-                          </Stack>
-                        </Stack>
-                      </Flex>
-                    </Card>
-                  </Link>
-                ))}
-            </Stack>
-          </WebhooksList>
-
-          <Stack space={[3, 3, 3, 4]} style={{flexGrow: '1'}}>
-            {webhookId && (
-              <div>
-                <Inline
-                  paddingRight={[3, 3, 3, 4]}
-                  paddingBottom={[3, 3, 3, 4]}
-                  paddingTop={[3, 3, 3, 0]}
+          {!isLoading && webhooks.length === 0 && (
+            <Card padding={[1, 2]} radius={3} tone="caution">
+              No webhooks are configured for the current dataset.
+            </Card>
+          )}
+
+          {!isLoading &&
+            webhooks?.map((webhook) => (
+              <Link
+                key={webhook.id}
+                href={`${
+                  router.resolvePathFromState(router.state).split('/webhooks')[0]
+                }/webhooks/${webhook.id}`}
+              >
+                <Card
+                  padding={[3, 3, 3, 4]}
+                  radius={2}
+                  shadow={1}
+                  tone={webhookId && webhookId === webhook.id ? 'primary' : undefined}
                 >
-                  <Heading as="h2" size={2}>
-                    Events for {webhooks?.find((webhook) => webhook.id === webhookId)?.name}
-                  </Heading>
-                </Inline>
-                <Stack space={[3, 3, 3, 4]}>
-                  <Webhook
-                    webhookId={webhookId}
-                    refreshInterval={refreshInterval}
-                    webhookBodyComponent={webhookBodyComponent}
-                  />
-                </Stack>
-              </div>
-            )}
-          </Stack>
-        </LayoutWrapper>
-      </Card>
-    </>
+                  <Flex justify="space-between" align="center">
+                    <Stack space={4}>
+                      <Text size={[2, 3]}>
+                        <Flex wrap="wrap" gap={[3]} style={{rowGap: 2}} align="center">
+                          {webhook.name}
+                          <Inline>
+                            <Badge tone={webhook.isDisabled ? 'critical' : 'positive'}>
+                              {webhook.isDisabled ? 'Disabled' : 'Enabled'}
+                            </Badge>
+                          </Inline>
+                        </Flex>
+                      </Text>
+
+                      <Stack space={2}>
+                        <BadgeRow
+                          heading="Dataset"
+                          badges={[webhook.dataset]}
+                          tone="default"
+                          wrap="nowrap"
+                        />
+                        <BadgeRow heading="ID" badges={[webhook.id]} tone="default" wrap="nowrap" />
+                        <BadgeRow
+                          heading="URL"
+                          badges={[webhook.url]}
+                          tone="default"
+                          wrap="nowrap"
+                        />
+                      </Stack>
+                    </Stack>
+                  </Flex>
+                </Card>
+              </Link>
+            ))}
+        </WebhooksList>
+
+        <AttemptsList padding={[1, 1, 1, 4]} paddingLeft={[1, 1, 1, 1]} space={[3, 3, 3, 4]}>
+          {webhookId && (
+            <>
+              <Inline paddingBottom={[2, 2, 2, 0]}>
+                <Heading as="h2" size={2}>
+                  Events for {webhooks?.find((webhook) => webhook.id === webhookId)?.name}
+                </Heading>
+              </Inline>
+              <Webhook
+                webhookId={webhookId}
+                refreshInterval={refreshInterval}
+                webhookBodyComponent={webhookBodyComponent}
+              />
+            </>
+          )}
+        </AttemptsList>
+      </LayoutWrapper>
+    </ToolWrapper>
   )
 }