Merge branch 'main' of github.com:blenderskool/diode into partial-query

components/ApiMethodTag.tsx

@@ -0,0 +1,29 @@
+import { Tag, TagProps } from '@chakra-ui/react';
+import { ApiMethod } from '@prisma/client';
+
+type Props = TagProps & {
+  method: ApiMethod;
+};
+
+const config: Record<ApiMethod, TagProps> = {
+  GET: {
+    children: "GET",
+    colorScheme: "green",
+  },
+  POST: {
+    children: "POST",
+    colorScheme: "yellow",
+  },
+  PUT: {
+    children: "PUT",
+    colorScheme: "blue",
+  },
+  DELETE: {
+    children: "DEL",
+    colorScheme: "red",
+  },
+};
+
+export default function ApiMethodTag({ method, ...props }: Props) {
+  return <Tag flexShrink={0} {...config[method]} {...props} />;
+}

components/BackLink.tsx

@@ -1,13 +1,13 @@
 import { Button } from '@chakra-ui/react';
-import { ArrowBackIcon } from '@chakra-ui/icons';
+import { ChevronLeftIcon } from '@heroicons/react/outline';
 import { useRouter } from 'next/router';
 
 export default function BackLink(props) {
   const router = useRouter();
 
   return (
     <div>
-      <Button variant="link" leftIcon={<ArrowBackIcon />} onClick={router.back} {...props} />
+      <Button variant="link" leftIcon={<ChevronLeftIcon width="16" />} onClick={router.back} {...props} />
     </div>
   )
 }

components/ConfirmDialog.tsx

@@ -0,0 +1,109 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  ChakraProvider
+} from '@chakra-ui/react';
+import { useRef } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import theme from '@/lib/chakra-theme';
+
+type ConfirmDialogOptions = {
+  title: string;
+  description: string;
+  btnConfirmTxt: string;
+};
+
+type AlertComponentProps = ConfirmDialogOptions & {
+  onCancel: () => any;
+  onConfirm: () => any;
+};
+
+function AlertComponent({
+  title,
+  description,
+  btnConfirmTxt,
+  onCancel,
+  onConfirm
+}: AlertComponentProps) {
+  const cancelRef = useRef();
+
+  return (
+    <ChakraProvider theme={theme}>
+      <AlertDialog isOpen leastDestructiveRef={cancelRef} onClose={onCancel}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontFamily="heading" fontWeight="700" fontSize="2xl">
+              {title}
+            </AlertDialogHeader>
+
+            <AlertDialogBody color="gray.500" fontSize="sm">
+              {description}
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onCancel}>
+                Cancel
+              </Button>
+              <Button colorScheme="red" onClick={onConfirm} ml="4">
+                {btnConfirmTxt}
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </ChakraProvider>
+  );
+}
+
+/**
+ * Helper function to show confirm dialog
+ * @param param0 Options for confirm dialog shown
+ * @returns Promise which resolves to a boolean indicating whether user confirmed the action
+ */
+function confirmDialog({
+  title = 'Are you sure?',
+  description = 'This action is irreversible.',
+  btnConfirmTxt = 'Confirm',
+}: Partial<ConfirmDialogOptions>) {
+  let container = document.getElementById('alert-dialog');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'alert-dialog';
+    document.body.appendChild(container);
+  }
+
+  return new Promise<boolean>((resolve) => {
+    const close = () => {
+      unmountComponentAtNode(container);
+      container.remove();
+    };
+
+    const handleCancel = () => {
+      close();
+      resolve(false);
+    };
+    const handleConfirm = () => {
+      close();
+      resolve(true);
+    };
+
+    render(
+      <AlertComponent
+        title={title}
+        description={description}
+        btnConfirmTxt={btnConfirmTxt}
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />,
+      container
+    );
+  });
+}
+
+export default confirmDialog;

components/QueryParamInput.tsx

@@ -1,5 +1,5 @@
 import { Flex, Input, IconButton, InputProps } from '@chakra-ui/react';
-import { DeleteIcon } from '@chakra-ui/icons';
+import { XIcon } from '@heroicons/react/outline';
 import { MouseEventHandler } from 'react';
 import SecretInput, { SecretInputProps } from './SecretInput';
 
@@ -15,9 +15,8 @@ export default function QueryParamInput({ keyProps, valueProps, onRemove }: Prop
       alignItems="center"
       justifyContent="space-between"
       border="1px"
-      borderColor="gray.200"
-      py="3"
-      px="6"
+      borderColor="gray.100"
+      p="3"
       bg="white"
       _first={{ roundedTop: "md" }}
       _notFirst={{ mt: -1 }}
@@ -26,18 +25,22 @@ export default function QueryParamInput({ keyProps, valueProps, onRemove }: Prop
       <Input
         placeholder="Field name"
         required
+        borderColor="gray.200"
+        borderRightRadius="none"
+        borderRightWidth="0"
         {...keyProps}
       />
       <SecretInput
-        containerProps={{ mx: "4" }}
+        containerProps={{ borderColor: "gray.200", borderLeftRadius: "none", mr: "3" }}
         inputProps={{ placeholder: "Field value"  }}
         {...valueProps}
       />
       <IconButton
-        icon={<DeleteIcon w={3} h={3} />}
+        icon={<XIcon width="16" />}
+        variant="ghost"
         aria-label="Remove"
         size="sm"
-        colorScheme="gray"
+        color="gray.500"
         onClick={onRemove}
       />
     </Flex>

components/index.ts

@@ -1,3 +1,4 @@
+export { default as ApiMethodTag } from './ApiMethodTag';
 export { default as ApiStats } from './ApiStats';
 export { default as BackLink } from './BackLink';
 export { default as Footer } from './Footer';
@@ -6,3 +7,4 @@ export { default as MockDeploymentBanner } from './MockDeploymentBanner';
 export { default as QueryParamInput } from './QueryParamInput';
 export { default as SecretInput } from './SecretInput';
 export { default as SectionHeading } from './SectionHeading';
+export { default as confirmDialog } from './ConfirmDialog';

lib/chakra-theme.ts

@@ -0,0 +1,15 @@
+import { extendTheme, ThemeConfig } from '@chakra-ui/react';
+
+const theme = extendTheme({
+  config: {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+  },
+  fonts: {
+    heading: "Raleway",
+    body: "Inter",
+  },
+} as ThemeConfig);
+
+
+export default theme;