fix: missing edit time button

Author: joonatank

apps/admin-ui/.eslintrc.cjs

@@ -1,6 +1,10 @@
 module.exports = {
   root: true,
   extends: ["custom/next"],
+  rules: {
+    // interface names break
+    "@typescript-eslint/naming-convention": 0,
+  },
   ignorePatterns: [
     "node_modules/",
     ".next/",

apps/admin-ui/src/spa/reservations/[id]/Calendar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import CommonCalendar, { CalendarEvent } from "common/src/calendar/Calendar";
-import { Toolbar } from "common/src/calendar/Toolbar";
+import { Toolbar, ToolbarBtn } from "common/src/calendar/Toolbar";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import {
@@ -106,9 +106,9 @@ function Calendar({
                 reservation={reservation}
                 permission={UserPermissionChoice.CanManageReservations}
               >
-                <button type="button" onClick={handleEditTimeClick}>
+                <ToolbarBtn onClick={handleEditTimeClick}>
                   {t("Reservation.EditTimeModal.acceptBtn")}
-                </button>
+                </ToolbarBtn>
               </VisibleIfPermission>
             )}
           </Toolbar>

packages/common/src/calendar/Toolbar.tsx

@@ -36,7 +36,7 @@ const Label = styled(NoWrap)`
 `;
 
 /* TODO rewrite this to use inheritable button styles (or HDS buttons) */
-const Btn = styled.button<{
+export const ToolbarBtn = styled.button.attrs({ type: "button" })<{
   $borderless?: boolean;
   $active?: boolean;
 }>`
@@ -80,9 +80,16 @@ type ToolbarProps = {
   onView: (n: View) => void;
   view: string;
   date: Date;
+  children?: React.ReactNode;
 };
 
-export function Toolbar({ onNavigate, onView, view, date }: ToolbarProps) {
+export function Toolbar({
+  onNavigate,
+  onView,
+  view,
+  date,
+  children,
+}: ToolbarProps) {
   const culture = { locale: fi };
   const { t } = useTranslation();
 
@@ -124,59 +131,55 @@ export function Toolbar({ onNavigate, onView, view, date }: ToolbarProps) {
       $wrap="wrap"
       className="rbc-toolbar"
     >
-      <div>
-        <Btn
-          type="button"
+      <Flex $direction="row">
+        <ToolbarBtn
           onClick={() => onNavigate("TODAY")}
           aria-label={t("reservationCalendar:showCurrentDay")}
         >
           {t("common:today")}
-        </Btn>
-      </div>
+        </ToolbarBtn>
+        {children}
+      </Flex>
       <DateNavigationWrapper>
-        <Btn
+        <ToolbarBtn
           $borderless
-          type="button"
           onClick={() => onNavigate("PREV")}
           aria-label={t("reservationCalendar:showPrevious", {
             view: t(`common:${view}`).toLowerCase(),
           })}
         >
           <IconAngleLeft />
-        </Btn>
+        </ToolbarBtn>
         <Label>{title}</Label>
-        <Btn
+        <ToolbarBtn
           $borderless
-          type="button"
           onClick={() => onNavigate("NEXT")}
           aria-label={t("reservationCalendar:showNext", {
             view: t(`common:${view}`).toLowerCase(),
           })}
         >
           <IconAngleRight />
-        </Btn>
+        </ToolbarBtn>
       </DateNavigationWrapper>
       <div>
-        <Btn
+        <ToolbarBtn
           $active={view === "day"}
-          type="button"
           onClick={() => onView("day")}
           aria-label={t("reservationCalendar:showView", {
             view: t("common:day").toLowerCase(),
           })}
         >
           {t("common:day")}
-        </Btn>
-        <Btn
+        </ToolbarBtn>
+        <ToolbarBtn
           $active={view === "week"}
-          type="button"
           onClick={() => onView("week")}
           aria-label={t("reservationCalendar:showView", {
             view: t("common:week").toLowerCase(),
           })}
         >
           {t("common:week")}
-        </Btn>
+        </ToolbarBtn>
       </div>
     </Flex>
   );