fix: passing unknown props to DOM

City-of-Helsinki · Jan 15, 2025 · 92332a9 · 92332a9
1 parent 0d880cb
commit 92332a9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 32 deletions.
diff --git a/apps/ui/components/common/PageWrapper.tsx b/apps/ui/components/common/PageWrapper.tsx
@@ -35,10 +35,7 @@ function PageWrapper({
         <meta name="version" content={version} />
       </Head>
       <Navigation apiBaseUrl={apiBaseUrl} profileLink={profileLink} />
-      <BannerNotificationsList
-        centered
-        target={BannerNotificationTarget.User}
-      />
+      <BannerNotificationsList target={BannerNotificationTarget.User} />
       <InProgressReservationNotification />
       <Main id="main">{children}</Main>
       <Footer feedbackUrl={feedbackUrl} />

diff --git a/packages/common/src/components/BannerNotificationsList.tsx b/packages/common/src/components/BannerNotificationsList.tsx
@@ -17,14 +17,12 @@ import { filterNonNullable } from "../helpers";
 type BannerNotificationListProps = {
   target: BannerNotificationTarget;
   displayAmount?: number;
-  centered?: boolean;
 };
 
-type BannerNotificationItemProps = {
+type NotificationsListItemProps = {
   notification: BannerNotificationCommonFragment;
   closeFn: React.Dispatch<React.SetStateAction<string[] | undefined>>;
   closedArray: string[];
-  centered?: boolean;
 };
 
 const PositionWrapper = styled.div`
@@ -63,8 +61,7 @@ function NotificationsListItem({
   notification,
   closeFn,
   closedArray,
-  centered,
-}: BannerNotificationItemProps) {
+}: NotificationsListItemProps) {
   let notificationType: NotificationType;
   switch (notification.level) {
     case "EXCEPTION":
@@ -80,7 +77,6 @@ function NotificationsListItem({
     <BannerNotificationBackground>
       <NotificationWrapper
         type={notificationType}
-        centered={centered}
         dismissible
         closeButtonLabelText={t("common:close")}
         data-testid="BannerNotificationList__Notitification"
@@ -115,7 +111,6 @@ function NotificationsListItem({
 const BannerNotificationsList = ({
   target,
   displayAmount = 2,
-  centered,
 }: BannerNotificationListProps) => {
   // no-cache is required because admin is caching bannerNotifications query and
   // there is no key setup for this so this query returns garbage from the admin cache.
@@ -174,7 +169,6 @@ const BannerNotificationsList = ({
             notification={notification}
             closedArray={closedNotificationsList ?? []}
             closeFn={setClosedNotificationsList}
-            centered={centered}
           />
         ))}
     </PositionWrapper>

diff --git a/packages/common/src/components/NotificationWrapper.tsx b/packages/common/src/components/NotificationWrapper.tsx
@@ -1,41 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { Notification, NotificationProps } from "hds-react";
-import { breakpoints } from "../common/style";
 
 type NotificationPropsWithCentering = NotificationProps & {
   centered?: boolean;
-  "data-testid"?: string;
 };
 
-const Wrapper = styled.div<{ $centerContent?: boolean }>`
-  > section > div {
-    max-width: calc(${breakpoints.xl} - (2 * var(--spacing-m)));
-    margin: 0 ${(props) => (props.$centerContent ? "auto" : "0")} !important;
+const StyledNotification = styled(Notification)<{ $centerContent?: boolean }>`
+  > div {
+    max-width: var(--tilavaraus-page-max-width);
+    margin: 0 ${(props) => (props.$centerContent ? "auto" : "0")};
   }
 `;
 
 function NotificationWrapper(
   props: NotificationPropsWithCentering
 ): JSX.Element | null {
-  const [isVisible, setIsVisible] = React.useState(true);
+  const [isVisible, setIsVisible] = useState(true);
 
-  // data-testid passed to the HDS component is not passed to the DOM
-  // pass it to the div wrapper instead
-  const testId = props["data-testid"];
   if (!isVisible) {
     return null;
   }
   return (
-    <Wrapper $centerContent={props.centered} data-testid={testId}>
-      <Notification
-        {...props}
-        onClose={() => {
-          setIsVisible(false);
-          props.onClose?.();
-        }}
-      />
-    </Wrapper>
+    <StyledNotification
+      {...props}
+      $centerContent
+      onClose={() => {
+        setIsVisible(false);
+        props.onClose?.();
+      }}
+    />
   );
 }