feat: Improve source editing UX (#944)

Restored https://github.com/hyperdxio/hyperdx/pull/805 which should be merged it into main

Co-authored-by: Ernest Iliiasov <20255948+ernestii@users.noreply.github.com>

.changeset/lovely-seals-build.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Improve source editing UX

packages/app/src/DBSearchPage.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import router from 'next/router';
 import {
   parseAsBoolean,
@@ -42,6 +43,7 @@ import {
   Flex,
   Grid,
   Group,
+  Menu,
   Modal,
   Paper,
   Stack,
@@ -767,7 +769,7 @@ function DBSearchPage() {
     [setRowId, setIsLive],
   );
 
-  const [modelFormExpanded, setModelFormExpanded] = useState(false);
+  const [modelFormExpanded, setModelFormExpanded] = useState(false); // Used in local mode
   const [saveSearchModalState, setSaveSearchModalState] = useState<
     'create' | 'update' | undefined
   >(undefined);
@@ -1087,17 +1089,45 @@ function DBSearchPage() {
               name="source"
               onCreate={openNewSourceModal}
             />
-            <ActionIcon
-              variant="subtle"
-              color="dark.2"
-              size="sm"
-              onClick={() => setModelFormExpanded(v => !v)}
-              title="Edit Source"
-            >
-              <Text size="xs">
-                <i className="bi bi-gear" />
-              </Text>
-            </ActionIcon>
+            <Menu withArrow position="bottom-start">
+              <Menu.Target>
+                <ActionIcon
+                  variant="subtle"
+                  color="dark.2"
+                  size="sm"
+                  title="Edit Source"
+                >
+                  <Text size="xs">
+                    <i className="bi bi-gear" />
+                  </Text>
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Label>Sources</Menu.Label>
+                <Menu.Item
+                  leftSection={<i className="bi bi-plus-circle" />}
+                  onClick={() => setNewSourceModalOpened(true)}
+                >
+                  Create New Source
+                </Menu.Item>
+                {IS_LOCAL_MODE ? (
+                  <Menu.Item
+                    leftSection={<i className="bi bi-gear" />}
+                    onClick={() => setModelFormExpanded(v => !v)}
+                  >
+                    Edit Source
+                  </Menu.Item>
+                ) : (
+                  <Menu.Item
+                    leftSection={<i className="bi bi-gear" />}
+                    component={Link}
+                    href="/team"
+                  >
+                    Edit Sources
+                  </Menu.Item>
+                )}
+              </Menu.Dropdown>
+            </Menu>
           </Group>
           <Box style={{ minWidth: 100, flexGrow: 1 }}>
             <SQLInlineEditorControlled

packages/app/src/TeamPage.tsx

@@ -1,17 +1,12 @@
 import { Fragment, useCallback, useMemo, useState } from 'react';
 import Head from 'next/head';
 import { HTTPError } from 'ky';
-import {
-  Button as BSButton,
-  Form,
-  Modal as BSModal,
-  Spinner,
-} from 'react-bootstrap';
+import { Button as BSButton, Modal as BSModal } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
-import { EditorView, ViewUpdate } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
 import { SourceKind, WebhookService } from '@hyperdx/common-utils/dist/types';
 import {
   Alert,
@@ -19,10 +14,12 @@ import {
   Box,
   Button,
   Card,
+  Center,
   Container,
   Divider,
   Flex,
   Group,
+  Loader,
   Modal as MModal,
   Radio,
   Stack,
@@ -46,8 +43,6 @@ import { useSources } from './source';
 import { useConfirm } from './useConfirm';
 import { capitalizeFirstLetter } from './utils';
 
-import styles from '../styles/TeamPage.module.scss';
-
 const DEFAULT_GENERIC_WEBHOOK_BODY = ['{{title}}', '{{body}}', '{{link}}'];
 const DEFAULT_GENERIC_WEBHOOK_BODY_TEMPLATE =
   DEFAULT_GENERIC_WEBHOOK_BODY.join(' | ');
@@ -1223,9 +1218,9 @@ export default function TeamPage() {
       <div>
         <Container>
           {isLoading && (
-            <Spinner animation="border" role="status">
-              <span className="visually-hidden">Loading...</span>
-            </Spinner>
+            <Center mt="xl">
+              <Loader color="dimmed" />
+            </Center>
           )}
           {!isLoading && team != null && (
             <Stack my={20} gap="xl">

packages/app/src/components/ConfirmDeleteMenu.tsx

@@ -6,7 +6,7 @@ export default function ConfirmDeleteMenu({
   onDelete: () => void;
 }) {
   return (
-    <Menu>
+    <Menu withArrow>
       <Menu.Target>
         <Button variant="outline" color="gray.4" size="xs">
           Delete

packages/app/styles/TeamPage.module.scss

@@ -1,9 +0,0 @@
-@import './variables';
-
-.sectionHeader {
-  border-bottom: 1px solid $slate-950;
-  margin-top: 20px;
-  padding-bottom: 10px;
-  font-size: 14px;
-  color: $slate-400;
-}