Merge pull request #1426 from AppQuality/fixes

fixes

Author: d-beezee

src/common/components/Table/index.tsx

@@ -37,11 +37,11 @@ type TableProps<T extends TableData, K extends keyof T> = {
   emptyState?: JSX.Element;
 };
 
-const TableWrapper = styled.div<{ maxHeight?: string }>`
+const TableWrapper = styled.div<{ $maxHeight?: string }>`
   width: 100%;
   padding-bottom: ${({ theme }) => theme.space.sm};
-  ${({ maxHeight }) =>
-    maxHeight && `max-height: ${maxHeight}; overflow-y: auto;`}
+  ${({ $maxHeight }) =>
+    $maxHeight && `max-height: ${$maxHeight}; overflow-y: auto;`}
 `;
 
 const StyledHead = styled(Head)<{ isSticky?: boolean }>`
@@ -65,7 +65,7 @@ const Table = <T extends TableData, K extends keyof T>({
     return emptyState || null;
   }
   return (
-    <TableWrapper maxHeight={maxHeight} style={style}>
+    <TableWrapper $maxHeight={maxHeight} style={style}>
       <ZendeskTable>
         <StyledHead isSticky={isSticky}>
           <HeaderRow>

src/pages/JoinPage/Steps/Step2.tsx

@@ -29,6 +29,7 @@ export const Step2 = () => {
   const { data: dataCompanySizes, isLoading: isLoadingCompanySizes } =
     useGetCompaniesSizesQuery();
   const selectRef = useRef<HTMLDivElement>(null);
+  const roleSelectRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     sendGTMevent({
@@ -148,7 +149,7 @@ export const Step2 = () => {
         {({ field, meta }: FieldProps) => {
           const hasError = meta.touched && Boolean(meta.error);
           return (
-            <div ref={selectRef}>
+            <div ref={roleSelectRef}>
               <Select
                 placeholder={t('SIGNUP_FORM_ROLE_PLACEHOLDER')}
                 data-qa="roleId-select"
@@ -169,7 +170,7 @@ export const Step2 = () => {
                 onSelect={(roleId) => {
                   setFieldValue('roleId', Number(roleId));
                   (
-                    selectRef.current?.querySelector(
+                    roleSelectRef.current?.querySelector(
                       '[role="combobox"]'
                     ) as HTMLElement | null
                   )?.blur();

src/pages/Plan/index.tsx

@@ -25,7 +25,11 @@ import PlanPageHeader from './navigation/header/Header';
 import { PlanBody } from './PlanBody';
 import { formatModuleDate } from './utils/formatModuleDate';
 
-const PlanPage = ({ plan }: { plan: GetPlansByPidApiResponse | undefined }) => {
+const PlanPageContent = ({
+  plan,
+}: {
+  plan: GetPlansByPidApiResponse | undefined;
+}) => {
   const { t } = useTranslation();
   const { activeTab, setActiveTab } = usePlanContext();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -58,17 +62,10 @@ const PlanPage = ({ plan }: { plan: GetPlansByPidApiResponse | undefined }) => {
   }, []);
 
   return (
-    <Page
-      title={t('__PLAN_PAGE_TITLE')}
-      className="plan-page"
-      route="plan"
-      isMinimal
-      excludeMarginTop
-      excludeMarginBottom
-    >
+    <>
       <PlanPageHeader />
       <PlanBody />
-    </Page>
+    </>
   );
 };
 
@@ -95,6 +92,7 @@ const Plan = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { planId } = useParams();
+  const { t } = useTranslation();
   const { isError, data: plan } = useGetPlansByPidQuery(
     {
       pid: Number(planId).toString(),
@@ -145,11 +143,20 @@ const Plan = () => {
   }
 
   return (
-    <FormProvider initialValues={initialValues}>
-      <PlanProvider>
-        <PlanPage plan={plan} />
-      </PlanProvider>
-    </FormProvider>
+    <Page
+      title={t('__PLAN_PAGE_TITLE')}
+      className="plan-page"
+      route="plan"
+      isMinimal
+      excludeMarginTop
+      excludeMarginBottom
+    >
+      <FormProvider initialValues={initialValues}>
+        <PlanProvider>
+          <PlanPageContent plan={plan} />
+        </PlanProvider>
+      </FormProvider>
+    </Page>
   );
 };
 

tests/fixtures/app.ts

@@ -5,19 +5,6 @@ import en from '../../src/locales/en/translation.json';
 import itLinks from '../../src/locales/it/links.json';
 import it from '../../src/locales/it/translation.json';
 
-// const suppressedWarnings = ['Warning: React does not recognize the'];
-
-// const originalWarn = console.warn;
-// console.warn = function (...args) {
-//   if (
-//     typeof args[0] === 'string' &&
-//     suppressedWarnings.some((entry) => args[0].includes(entry))
-//   ) {
-//     return;
-//   }
-//   originalWarn.apply(console, args);
-// };
-
 const resources = {
   en: { translation: en, links: enLinks },
   it: { translation: it, links: itLinks },