Sync packages 20241007130005

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/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/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

@@ -24,6 +24,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

frontend/packages/ui/core/page-shell/PageShell.stories.tsx

@@ -1,9 +1,9 @@
-import { ProjectNavigationDrawer } from '@console/routing/layout';
-import { ConsoleAppShell, ErrorBoundary } from '@console/ui/common';
+import { ErrorBoundary } from '@console/ui/common';
 import { Container, Skeleton } from '@mantine/core';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { hasMessageProperty } from '@/utils/js-utils';
+import { MockAppShell } from '../../storybook/MockAppShell';
 import { GenericError } from '../generic-error';
 import { PageShellTab } from './components/TabBar';
 import { PageShell } from './PageShell';
@@ -38,27 +38,6 @@ const mockTabs: PageShellTab[] = [
   },
 ];
 
-function StoryLayout({
-  children,
-  headerText,
-}: {
-  children: React.ReactNode;
-  headerText?: string;
-}) {
-  return (
-    <ConsoleAppShell
-      navbar={<ProjectNavigationDrawer />}
-      header={
-        <div>
-          {headerText ??
-            'Navigation does not work. Disregard the sidebar data.'}
-        </div>
-      }
-    >
-      {children}
-    </ConsoleAppShell>
-  );
-}
 function SomeContent() {
   return (
     <Container fluid m="xs">
@@ -74,7 +53,7 @@ function SomeContent() {
 export const Basic: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell>
           <PageShell.Sidebar>
             <SomeContent />
@@ -86,15 +65,15 @@ export const Basic: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 
 export const WithTabBar: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell tabs={mockTabs}>
           <PageShell.Sidebar>
             <SomeContent />
@@ -106,15 +85,15 @@ export const WithTabBar: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 
 export const NoHeader: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell>
           <PageShell.Sidebar>
             <SomeContent />
@@ -125,14 +104,14 @@ export const NoHeader: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 export const NoHeaderWithTabs: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell tabs={mockTabs}>
           <PageShell.Sidebar>
             <SomeContent />
@@ -143,14 +122,14 @@ export const NoHeaderWithTabs: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 export const NoSidebar: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell>
           <PageShell.Main>
             <PageShell.Header>Header</PageShell.Header>
@@ -159,15 +138,15 @@ export const NoSidebar: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 
 export const ScrollAreaProps: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell>
           <PageShell.Sidebar>
             <SomeContent />
@@ -181,14 +160,14 @@ export const ScrollAreaProps: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 export const LargerHeader: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell headerHeight={120}>
           <PageShell.Sidebar>
             <SomeContent />
@@ -200,14 +179,14 @@ export const LargerHeader: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 export const ScrollClamp: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell scrollClamp>
           <PageShell.Sidebar>
             <SomeContent />
@@ -224,14 +203,14 @@ export const ScrollClamp: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
 export const BackgroundColors: StoryObj<typeof PageShell> = {
   render: () => {
     return (
-      <StoryLayout>
+      <MockAppShell>
         <PageShell sideBarHeaderBg={'var(--mantine-color-indigo-light)'}>
           <PageShell.Sidebar>
             <SomeContent />
@@ -243,7 +222,7 @@ export const BackgroundColors: StoryObj<typeof PageShell> = {
             </PageShell.Content>
           </PageShell.Main>
         </PageShell>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
@@ -252,7 +231,7 @@ export const PageShellHierarchyError: StoryObj<typeof PageShell> = {
   name: '<PageShell /> hierarchy error',
   render: () => {
     return (
-      <StoryLayout headerText="Inner PageShell components should only be used within <PageShell />. If they are used incorrectly, an error will be thrown.">
+      <MockAppShell headerText="Inner PageShell components should only be used within <PageShell />. If they are used incorrectly, an error will be thrown.">
         <ErrorBoundary
           errorHandler={e => (
             <GenericError
@@ -262,7 +241,7 @@ export const PageShellHierarchyError: StoryObj<typeof PageShell> = {
         >
           <PageShell.Main>foo</PageShell.Main>
         </ErrorBoundary>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };
@@ -271,7 +250,7 @@ export const PageShellMainHierarchyError: StoryObj<typeof PageShell> = {
   name: '<PageShell.Main /> hierarchy error',
   render: () => {
     return (
-      <StoryLayout headerText="PageShell.Content and PageShell.Header should only be used within <PageShell.Main />. If they are used incorrectly, an error will be thrown.">
+      <MockAppShell headerText="PageShell.Content and PageShell.Header should only be used within <PageShell.Main />. If they are used incorrectly, an error will be thrown.">
         <ErrorBoundary
           errorHandler={e => (
             <GenericError
@@ -281,7 +260,7 @@ export const PageShellMainHierarchyError: StoryObj<typeof PageShell> = {
         >
           <PageShell.Content>foo</PageShell.Content>
         </ErrorBoundary>
-      </StoryLayout>
+      </MockAppShell>
     );
   },
 };