Sync packages 20241011161556

frontend/packages/ui/constants.ts

@@ -1,11 +1,11 @@
 import { MantineRadius, MantineSpacing } from '@mantine/core';
 
-export const APP_SHELL_HEADER_HEIGHT = 0;
+export const APP_SHELL_HEADER_HEIGHT = 54;
 export const PAGE_SHELL_TAB_BAR_HEIGHT = 46;
-export const PROJECT_APP_SHELL_NAVBAR_WIDTH = 64;
+export const PROJECT_APP_SHELL_NAVBAR_WIDTH = 60;
 export const HASURA_BLUE = '#3970FD';
 export const APP_SHELL_ID = 'hasura-app-shell';
-export const FONT_SIZE = 14;
+
 export const MAX_CONTENT_WIDTH = 1280;
 export const CONTENT_PADDING: MantineSpacing = 'md';
 export const CONTENT_MARGIN: MantineSpacing = 'md';

frontend/packages/ui/core/acceptable-list/AcceptableList.stories.tsx

@@ -38,9 +38,7 @@ const args: StoryObj<typeof AcceptableList<MockItem>>['args'] = {
   decliningIds: [],
   // @ts-ignore
   getItemId: item => item.id,
-  acceptAllButton: {
-    onClick: action('acceptAll'),
-  },
+  onAcceptAll: action('onAcceptAll'),
   // @ts-ignore
   renderItemDetail: item => {
     return <div>{item.label}</div>;

frontend/packages/ui/core/acceptable-list/AcceptableList.tsx

@@ -19,6 +19,7 @@ export function AcceptableList<ItemType = unknown>({
   items,
   onAccept,
   onDecline,
+  onAcceptAll,
   acceptingAll,
   acceptAllButton,
   acceptingIds,
@@ -30,20 +31,21 @@ export function AcceptableList<ItemType = unknown>({
 }: AcceptableListProps<ItemType>) {
   return (
     <Paper className="!rounded-t-none">
-      {acceptAllButton && (
+      {onAcceptAll && (
         <>
           <Group justify="flex-end" py={8} px={'sm'}>
             <Button
               rightSection={<Icons.CheckAll />}
               variant="subtle"
               {...acceptAllButton}
+              onClick={onAcceptAll}
               // these are not allowed to be customized
               loaderProps={{ type: 'dots' }}
               loading={acceptingAll}
-              disabled={items.length === 0 || acceptAllButton.disabled}
+              disabled={items.length === 0 || acceptAllButton?.disabled}
               data-testid="accept-all-invitations"
             >
-              {acceptAllButton.label ?? 'Accept All'}
+              {acceptAllButton?.label ?? 'Accept All'}
             </Button>
           </Group>
           <Divider />

frontend/packages/ui/core/acceptable-list/types.ts

@@ -19,9 +19,9 @@ export type AcceptableListProps<ItemType = unknown> = {
   acceptingAll: boolean;
   // do not allow loader customization, but otherwise allow customization
   acceptAllButton?: Omit<ButtonProps, 'loading' | 'loaderProps'> & {
-    onClick: () => void;
     label?: string;
   };
+  onAcceptAll: () => void;
   acceptingIds: string[];
   decliningIds: string[];
   getItemId: (item: ItemType) => string;

frontend/packages/ui/core/animated-border-box/AnimatedBorderBox.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import { Paper, PaperProps } from '@mantine/core';
+
+import { ExtendedCustomColors } from '@/types';
+
+export type AnimatedBorderProps = {
+  primaryColor?: ExtendedCustomColors;
+  secondaryColor?: ExtendedCustomColors;
+  shade?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+};
+
+const css = (props?: AnimatedBorderProps): TrustedHTML => {
+  const {
+    primaryColor = 'indigo',
+    secondaryColor = 'pink',
+    shade = 3,
+  } = props ?? {};
+
+  const css = `
+  /*test */
+.animated-border-box {
+  --border-angle: 0turn; 
+  --main-bg: conic-gradient(
+    from var(--border-angle),
+    var(--mantine-color-background-1),
+    var(--mantine-color-background-1) 5%,
+    var(--mantine-color-background-2) 60%,
+    var(--mantine-color-background-3) 95%
+  );
+
+  --gradient-border: conic-gradient(
+    from var(--border-angle),
+    transparent 25%,
+    light-dark(var(--mantine-color-${primaryColor}-${shade}), var(--mantine-color-${primaryColor}-${shade})),
+    light-dark(var(--mantine-color-${secondaryColor}-${shade - 1}), var(--mantine-color-${secondaryColor}-${shade - 1})) 99%,
+    transparent
+  );
+
+  background:
+    var(--main-bg) padding-box,
+    var(--gradient-border) border-box,
+    var(--main-bg) border-box;
+
+  background-position: center center;
+
+  animation: bg-spin 4s linear infinite;
+}
+
+@keyframes bg-spin {
+  to {
+    --border-angle: 1turn;
+  }
+}
+
+.animated-border-box:hover {
+  animation-play-state: paused;
+}
+
+@property --border-angle {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0turn;
+}
+`;
+
+  return css;
+};
+
+export const AnimatedBorderBox = ({
+  children,
+  animationProps,
+  ...props
+}: {
+  children: React.ReactNode;
+  animationProps?: AnimatedBorderProps;
+} & PaperProps) => {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: css(animationProps) }} />
+      <Paper
+        p={0}
+        {...props}
+        bd={'solid 3px transparent'}
+        style={{ overflow: 'hidden' }}
+        className="animated-border-box"
+      >
+        {children}
+      </Paper>
+    </>
+  );
+};

frontend/packages/ui/core/animated-border-box/index.ts

@@ -0,0 +1 @@
+export * from './AnimatedBorderBox';

frontend/packages/ui/core/copy-button/CopyButton.tsx

@@ -43,6 +43,7 @@ export function CopyButton(props: CopyButtonProps) {
           clipboard.copy(toCopy);
         }}
         data-testid={testId}
+        aria-label="copy code snippet"
       >
         {children ?? toCopy}
       </Button>

frontend/packages/ui/core/generic-error/GenericError.tsx

@@ -8,7 +8,9 @@ import {
   Stack,
   StackProps,
 } from '@mantine/core';
+import { ClientError } from 'graphql-request/build/entrypoints/main';
 
+import { getGraphQLErrorMessage } from '@/control-plane-client';
 import { Icons } from '@/ui/icons';
 import { hasMessageProperty } from '@/utils/js-utils';
 import hasuraErrorLogo from './confused_hasura.png';
@@ -80,3 +82,13 @@ export const GenericError = ({
     </Stack>
   );
 };
+
+GenericError.GraphQLError = ({
+  graphQLError,
+}: {
+  graphQLError: ClientError;
+}) => {
+  return (
+    <GenericError message={getGraphQLErrorMessage(graphQLError).message} />
+  );
+};

frontend/packages/ui/core/headers-editor/HeadersEditor.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Grid, Paper } from '@mantine/core';
 import { produce } from 'immer';
+import { uniqueId } from 'lodash';
 
 import { useSchemeColors } from '@/ui/hooks';
 import { Table } from '../table/';
@@ -42,9 +43,7 @@ export const HeadersEditor = ({
   );
 
   const [unmaskedHeaders, setUnmaskedHeaders] = React.useState<string[]>([]);
-  const [draftId, setDraftId] = React.useState<string>(() =>
-    crypto.randomUUID()
-  );
+  const [draftId, setDraftId] = React.useState<string>(() => uniqueId());
 
   const { bg } = useSchemeColors();
 
@@ -142,7 +141,7 @@ export const HeadersEditor = ({
                   // we need to wait for the mount because the "isDraft" flag is used
                   // to transfer focus to the newly added row
                   // but after mount and focus transfer we need to reset the draft id
-                  setDraftId(crypto.randomUUID());
+                  setDraftId(uniqueId());
                 }}
               />
             ))}

frontend/packages/ui/core/hover-wrappers/HoverWrappers.tsx

@@ -0,0 +1,54 @@
+import {
+  Box,
+  BoxProps,
+  Group,
+  GroupProps,
+  Stack,
+  StackProps,
+} from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+
+export function HoverBox({
+  children,
+  ...props
+}: {
+  children: (hovered: boolean) => React.ReactNode;
+} & Omit<BoxProps, 'children'>) {
+  const { ref, hovered } = useHover();
+
+  return (
+    <Box ref={ref} {...props}>
+      {children(hovered)}
+    </Box>
+  );
+}
+
+export function HoverStack({
+  children,
+  ...props
+}: {
+  children: (hovered: boolean) => React.ReactNode;
+} & Omit<StackProps, 'children'>) {
+  const { ref, hovered } = useHover();
+
+  return (
+    <Stack ref={ref} {...props}>
+      {children(hovered)}
+    </Stack>
+  );
+}
+
+export function HoverGroup({
+  children,
+  ...props
+}: {
+  children: (hovered: boolean) => React.ReactNode;
+} & Omit<GroupProps, 'children'>) {
+  const { ref, hovered } = useHover();
+
+  return (
+    <Group ref={ref} {...props}>
+      {children(hovered)}
+    </Group>
+  );
+}

frontend/packages/ui/core/hover-wrappers/index.ts

@@ -0,0 +1 @@
+export { HoverBox, HoverStack, HoverGroup } from './HoverWrappers';

frontend/packages/ui/core/index.ts

@@ -13,6 +13,7 @@ export * from './generic-error';
 export * from './selectable-list';
 export * from './collapsible-alert-card';
 export * from './content-container';
+export * from './animated-border-box';
 
 export { Table } from './table';
 
@@ -24,6 +25,7 @@ export * from './page-shell';
 export * from './lazy-loader';
 export * from './hybrid-menu';
 export * from './acceptable-list';
+export * from './hover-wrappers';
 export * from './withProps';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports