Nuke and build

Dockerfile

@@ -3,6 +3,7 @@ FROM node:18-alpine AS base
 FROM base AS deps
 RUN apk add --no-cache libc6-compat
 RUN apk add --no-cache python3 make g++
+RUN npm i -g node-gyp
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager

components/button/index.tsx

@@ -18,7 +18,7 @@ const BUTTONS_MAP = {
   ['text']: TextButton,
 };
 
-export interface IButtonProps extends ButtonProps {
+export interface IButtonProps extends Omit<ButtonProps, 'key'> {
   color: 'primary' | 'secondary' | 'error' | 'info' | 'text';
 }
 

components/card/index.tsx

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 
 import { CardContainer } from './card.styled';
 
-export interface CardProps extends ComponentPropsWithoutRef<'div'> {
+export interface CardProps extends Omit<ComponentPropsWithoutRef<'div'>, 'key'> {
   active?: boolean;
   withHoverEffect?: boolean;
 }

components/checkbox/index.tsx

@@ -5,7 +5,9 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 
 import { QUARTZ, SPUN_PEARL } from '../../constants/colors';
 
-const Checkbox: FunctionComponent<CheckboxProps> = (props) => (
+type ICheckBoxProps = Omit<CheckboxProps, 'key'>;
+
+const Checkbox: FunctionComponent<ICheckBoxProps> = (props) => (
   <CheckboxMUI
     {...props}
     style={{ border: '1px', padding: 0 }}
@@ -19,7 +21,7 @@ const Checkbox: FunctionComponent<CheckboxProps> = (props) => (
   />
 );
 
-const CheckBoxWithRef = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const CheckBoxWithRef = React.forwardRef<HTMLInputElement, ICheckBoxProps>((props, ref) => {
   return <Checkbox inputRef={ref} {...props} />;
 });
 

components/clusterDetails/clusterDetails.styled.ts

@@ -5,7 +5,6 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ColumnComponent from '../column';
 import RowComponent from '../row';
 import Typography from '../typography';
-import NextLink from '../nextLink';
 import {
   CHEFS_HAT,
   DR_WHITE,

components/clusterDetails/index.tsx

@@ -19,7 +19,7 @@ import {
   StatusContainer,
 } from './clusterDetails.styled';
 
-export interface ClusterDetailsProps extends ComponentPropsWithoutRef<'div'> {
+export interface ClusterDetailsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'key'> {
   cluster: Cluster;
   host: ManagementCluster['gitHost'];
   gitOwner: ManagementCluster['gitAuth']['gitOwner'];

components/clusterTable/clusterTable.tsx

@@ -250,7 +250,7 @@ const ClusterTableHead: FunctionComponent<ClusterTableHeadProps> = ({ orderBy, o
   );
 };
 
-interface ClusterTableProps extends ComponentPropsWithRef<'tbody'> {
+interface ClusterTableProps extends Omit<ComponentPropsWithRef<'tbody'>, 'key'> {
   managementCluster: ManagementCluster;
   draftCluster?: DraftCluster;
   onDeleteCluster: () => void;

components/createEnvironmentMenu/index.tsx

@@ -13,7 +13,8 @@ import { ClusterEnvironment } from '../../types/provision';
 
 import { CloseButton, Content, Footer, Header, Root } from './createEnvironmentMenu.styled';
 
-interface CreateEnvironmentMenuProps extends Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit'> {
+interface CreateEnvironmentMenuProps
+  extends Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit' | 'key'> {
   onSubmit: (environment: ClusterEnvironment) => void;
   onClose: () => void;
   previouslyCreatedEnvironments?: ClusterEnvironment[];

components/drawer/index.tsx

@@ -1,7 +1,10 @@
 import React, { FunctionComponent, PropsWithChildren } from 'react';
 import { Drawer as DrawerMui, DrawerProps } from '@mui/material';
 
-const Drawer: FunctionComponent<PropsWithChildren<DrawerProps>> = ({ children, ...rest }) => {
+const Drawer: FunctionComponent<Omit<PropsWithChildren<DrawerProps>, 'key'>> = ({
+  children,
+  ...rest
+}) => {
   return <DrawerMui {...rest}>{children}</DrawerMui>;
 };
 

components/gitProviderButton/index.tsx

@@ -17,7 +17,7 @@ const PROVIDER_OPTIONS: Record<
   [GitProvider.GITLAB]: { logoSrc: gitlabLogo, label: 'GitLab', height: 40, width: 42 },
 };
 
-export interface GitProviderButtonProps extends ComponentPropsWithoutRef<'button'> {
+export interface GitProviderButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'key'> {
   option: GitProvider;
   active?: boolean;
 }

components/headsUpNotification/index.tsx

@@ -14,7 +14,7 @@ import {
   Root,
 } from './headsUpNotification.styled';
 
-interface HeadsUpNotificationProps extends ComponentPropsWithoutRef<'div'> {
+interface HeadsUpNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'key'> {
   onClose: () => void;
 }
 

components/installationCard/index.tsx

@@ -5,7 +5,7 @@ import { CardOptionInfo } from '../../types';
 
 import { Card, CardTitle, CardDescription } from './installationCard.styled';
 
-export interface InstallationCardProps extends ComponentPropsWithoutRef<'div'> {
+export interface InstallationCardProps extends Omit<ComponentPropsWithoutRef<'div'>, 'key'> {
   active: boolean;
   info: CardOptionInfo;
 }

components/numberInput/index.tsx

@@ -10,7 +10,8 @@ import { EXCLUSIVE_PLUM } from '../../constants/colors';
 
 import { Root, NumInput, InputContainer, LabelContainer, Asterisk } from './numberInput.styled';
 
-export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
+export interface NumberInputProps
+  extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange' | 'key'> {
   label?: string;
   inputProps?: InputHTMLAttributes<HTMLInputElement>;
   onChange?: (value: number) => void;

components/select/index.tsx

@@ -123,7 +123,7 @@ const EnvironmentSelect: FunctionComponent<EnvironmentSelectProps> = ({
   );
 };
 
-interface TagSelectProps extends SelectProps<TagColor> {
+interface TagSelectProps extends Omit<SelectProps<TagColor>, 'key'> {
   options: readonly string[];
   helperText?: string;
   error?: boolean;

components/select/select.stories.tsx

@@ -31,7 +31,7 @@ export const Default: StoryObj<typeof SelectComponent> = {
 };
 
 export const TagSelect: StoryObj<typeof TagSelectWithRef> = {
-  render: (args) => <TagSelectWithRef {...args} />,
+  render: ({ key, ...args }) => <TagSelectWithRef {...args} />,
   args: {
     label: 'Cluster environments',
     placeholder: 'Select',
@@ -41,7 +41,7 @@ export const TagSelect: StoryObj<typeof TagSelectWithRef> = {
 };
 
 export const EnvironmentSelect: StoryObj<typeof EnvironmentSelectWithRef> = {
-  render: (args) => <EnvironmentSelectWithRef {...args} />,
+  render: ({ key, ...args }) => <EnvironmentSelectWithRef {...args} />,
   args: {
     label: 'Environment cluster will host',
     required: true,

components/switch/index.tsx

@@ -3,7 +3,7 @@ import { Switch as SwitchMui, SwitchProps, styled } from '@mui/material';
 
 import { PRIMARY } from '../../constants/colors';
 
-const CustomSwitch = styled((props: SwitchProps) => (
+const CustomSwitch = styled((props: Omit<SwitchProps, 'key'>) => (
   <SwitchMui focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
 ))(({ theme }) => ({
   'width': 44,
@@ -51,7 +51,7 @@ const CustomSwitch = styled((props: SwitchProps) => (
   },
 }));
 
-const Switch: FunctionComponent<SwitchProps> = (props) => {
+const Switch: FunctionComponent<Omit<SwitchProps, 'key'>> = (props) => {
   return <CustomSwitch {...props} />;
 };
 

components/typography/index.tsx

@@ -25,7 +25,7 @@ export interface ITypographyProps {
   children: React.ReactNode;
 }
 
-const Typography: FunctionComponent<TypographyProps> = ({ variant, ...props }) => {
+const Typography: FunctionComponent<Omit<TypographyProps, 'key'>> = ({ variant, ...props }) => {
   return <TypographyMUI variant={variant as Variant} {...props} />;
 };
 

containers/clusterForms/clusterCreation/index.tsx

@@ -33,7 +33,9 @@ import { InputContainer } from './advancedOptions/advancedOptions.styled';
 
 const MIN_NODE_COUNT = 1;
 
-const ClusterCreationForm: FunctionComponent<ComponentPropsWithoutRef<'div'>> = (props) => {
+const ClusterCreationForm: FunctionComponent<Omit<ComponentPropsWithoutRef<'div'>, 'key'>> = (
+  props,
+) => {
   const { isOpen, openModal, closeModal } = useModal(false);
 
   const [environments, setEnvironments] = useState<ClusterEnvironment[]>([

containers/clusterManagement/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Tabs } from '@mui/material';
 
 import Button from '../../components/button';

package.json

@@ -120,7 +120,7 @@
     "jackspeak": "2.1.1"
   },
   "volta": {
-    "node": "18.17.1",
+    "node": "18.18.0",
     "yarn": "1.22.19"
   }
 }