Fix admin link inconsistency

apps/admin-ui/src/common/urls.ts

@@ -13,16 +13,18 @@ export const allReservationsUrl = "/reservations/all";
 export const myUnitsUrl = "/my-units";
 
 export function getApplicationRoundUrl(
-  applicationRoundId: Maybe<number> | undefined,
-  includePrefix = false
+  applicationRoundId: Maybe<number> | undefined
 ): string {
   if (applicationRoundId == null || !(applicationRoundId > 0)) {
     return "";
   }
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  return `${prefix}${applicationRoundsUrl}/${applicationRoundId}`;
+  return `${applicationRoundsUrl}/${applicationRoundId}`;
 }
 
+/// @param pk is the primary key of the reservation
+/// @param includePrefix is for anchor or vanilla js route manipulation
+/// @returns the url for the reservation
+/// Generally never enable includePrefix use react-router-dom link / router instead.
 export function getReservationUrl(
   pk: Maybe<number> | undefined,
   includePrefix = false
@@ -36,14 +38,12 @@ export function getReservationUrl(
 
 export function getApplicationUrl(
   pk: Maybe<number> | undefined,
-  sectionPk?: Maybe<number> | undefined,
-  includePrefix = false
+  sectionPk?: Maybe<number> | undefined
 ): string {
   if (pk == null || !(pk > 0)) {
     return "";
   }
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  const baseUrl = `${prefix}${applicationsUrl}/${pk}`;
+  const baseUrl = `${applicationsUrl}/${pk}`;
   if (sectionPk == null || !(sectionPk > 0)) {
     return baseUrl;
   }
@@ -52,14 +52,21 @@ export function getApplicationUrl(
 
 export function getReservationUnitUrl(
   reservationUnitPk: Maybe<number> | undefined,
-  unitPk: Maybe<number> | undefined,
-  includePrefix = false
+  unitPk: Maybe<number> | undefined
 ): string {
   if (unitPk == null) {
     return "";
   }
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  return `${prefix}/unit/${unitPk}/reservationUnit/${reservationUnitPk ?? ""}`;
+  return `/unit/${unitPk}/reservationUnit/${reservationUnitPk ?? ""}`;
+}
+
+export function getSpacesResourcesUrl(
+  unitPk: Maybe<number> | undefined
+): string {
+  if (unitPk == null) {
+    return "";
+  }
+  return `/unit/${unitPk}/spacesResources`;
 }
 
 export function getSpaceUrl(
@@ -82,30 +89,19 @@ export function getResourceUrl(
   return `/unit/${unitPk}/resource/${resourcePk}`;
 }
 
-export function getUnitUrl(
-  unitPk: Maybe<number> | undefined,
-  includePrefix = false
-): string {
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  return `${prefix}/unit/${unitPk}`;
+export function getUnitUrl(unitPk: Maybe<number> | undefined): string {
+  return `/unit/${unitPk}`;
 }
 
-export function getMyUnitUrl(
-  unitPk: Maybe<number> | undefined,
-  includePrefix = false
-): string {
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  return `${prefix}/my-units/${unitPk}`;
+export function getMyUnitUrl(unitPk: Maybe<number> | undefined): string {
+  return `/my-units/${unitPk}`;
 }
 
-// TODO PUBLIC_URL is problematic, it needs to be added when not using react-router or something else?
 export function getRecurringReservationUrl(
-  pk: Maybe<string | number> | undefined,
-  includePrefix = false
+  pk: Maybe<string | number> | undefined
 ): string {
   if (pk == null || !(Number(pk) > 0)) {
     return "";
   }
-  const prefix = includePrefix ? PUBLIC_URL : "";
-  return `${prefix}/my-units/${pk}/recurring`;
+  return `/my-units/${pk}/recurring`;
 }

apps/admin-ui/src/component/ExternalLink.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { IconLinkExternal } from "hds-react";
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 
 type Props = {
   to: string | null;
@@ -34,11 +35,11 @@ export function ExternalLink({
     return null;
   }
   return (
-    <a href={to} target="_blank" rel="noopener noreferrer">
+    <Link to={to} target="_blank" rel="noopener noreferrer">
       <Container>
         <Name>{children}</Name>
         <IconLinkExternal size={size} aria-hidden />
       </Container>
-    </a>
+    </Link>
   );
 }

apps/admin-ui/src/component/Table.tsx

@@ -1,6 +1,5 @@
 import { get } from "lodash";
 import React from "react";
-import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { Table, TableProps } from "hds-react";
 import { fontBold } from "common";
@@ -95,26 +94,3 @@ function replacer(_key: string, value: unknown) {
   }
   return value;
 }
-
-const A = styled(Link)`
-  color: black;
-`;
-
-// NOTE not using IconButton because of hover effect
-export const ExternalTableLink = styled.a`
-  color: var(--color-black);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3-xs);
-  & > svg {
-    margin-top: var(--spacing-3-xs);
-  }
-`;
-
-export const TableLink = ({
-  href,
-  children,
-}: {
-  href: string;
-  children: React.ReactNode;
-}): JSX.Element => <A to={href}>{children}</A>;

apps/admin-ui/src/spa/application-rounds/[id]/allocation/ApplicationEventCard.tsx

@@ -1,4 +1,9 @@
-import { IconAngleDown, IconAngleUp, Link, RadioButton } from "hds-react";
+import {
+  IconAngleDown,
+  IconAngleUp,
+  IconLinkExternal,
+  RadioButton,
+} from "hds-react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
@@ -25,6 +30,7 @@ import { errorToast } from "common/src/common/toast";
 import { getApplicantName } from "@/helpers";
 import { MAX_ALLOCATION_CARD_UNIT_NAME_LENGTH } from "@/common/const";
 import { formatAgeGroup } from "@/common/util";
+import { Link } from "react-router-dom";
 
 export type AllocationApplicationSectionCardType =
   | "unallocated"
@@ -207,15 +213,15 @@ export function ApplicationSectionCard({
           refetch={refetch}
         />
         <StyledLink
-          href={getApplicationUrl(application.pk, applicationSection.pk, true)}
-          external
-          openInNewTab
-          openInExternalDomainAriaLabel={t("common.openToNewTab")}
+          to={getApplicationUrl(application.pk, applicationSection.pk)}
+          rel="noopener noreferrer"
+          target="_blank"
         >
           {t("Allocation.openApplication")}{" "}
           <b>
             {applicationSection.application.pk}-{applicationSection.pk}
           </b>
+          <IconLinkExternal size="xs" aria-hidden />
         </StyledLink>
         <div>
           {t("Allocation.ageGroup")}:{" "}

apps/admin-ui/src/spa/application-rounds/[id]/review/AllocatedEventsTable.tsx

@@ -7,7 +7,8 @@ import type { AllocatedTimeSlotsQuery } from "@gql/gql-types";
 import { convertWeekday } from "common/src/conversion";
 import { getApplicantName, truncate } from "@/helpers";
 import { getApplicationUrl, getReservationUrl } from "@/common/urls";
-import { CustomTable, ExternalTableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
+import { ExternalTableLink, TableLink } from "@/styles/util";
 
 const unitsTruncateLen = 23;
 const applicantTruncateLen = 20;
@@ -87,11 +88,7 @@ const COLS = [
       applicationPk,
       pk,
     }: ApplicationScheduleView) => (
-      <ExternalTableLink
-        href={getApplicationUrl(applicationPk, pk, true)}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
         {truncate(applicantName ?? "-", applicantTruncateLen)}
         <IconLinkExternal size="xs" aria-hidden />
       </ExternalTableLink>
@@ -131,7 +128,7 @@ const COLS = [
     key: "allocated_time_of_week",
     transform: ({ time, link }: ApplicationScheduleView) => {
       if (link !== "") {
-        return <ExternalTableLink href={link}>{time}</ExternalTableLink>;
+        return <TableLink to={link}>{time}</TableLink>;
       }
       return <span>{time}</span>;
     },

apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationEventsTable.tsx

@@ -7,12 +7,13 @@ import type { ApplicationSectionsQuery } from "@gql/gql-types";
 import { MAX_APPLICATION_ROUND_NAME_LENGTH } from "@/common/const";
 import { getApplicantName, truncate } from "@/helpers";
 import { getApplicationUrl } from "@/common/urls";
-import { CustomTable, ExternalTableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
 import { ApplicationSectionStatusCell } from "./StatusCell";
 import {
   calculateAppliedReservationTime,
   formatAppliedReservationTime,
 } from "./utils";
+import { ExternalTableLink } from "@/styles/util";
 
 const unitsTruncateLen = 23;
 const applicantTruncateLen = 20;
@@ -84,11 +85,7 @@ const COLS = [
     isSortable: true,
     key: "applicant",
     transform: ({ applicantName, applicationPk, pk }: ApplicationEventView) => (
-      <ExternalTableLink
-        href={getApplicationUrl(applicationPk, pk, true)}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
         {truncate(applicantName ?? "-", applicantTruncateLen)}
         <IconLinkExternal size="xs" aria-hidden />
       </ExternalTableLink>

apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationsTable.tsx

@@ -9,13 +9,14 @@ import type {
 } from "@gql/gql-types";
 import { filterNonNullable } from "common/src/helpers";
 import { getApplicantName, truncate } from "@/helpers";
-import { CustomTable, ExternalTableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
 import { ApplicationStatusCell } from "./StatusCell";
 import {
   calculateAppliedReservationTime,
   formatAppliedReservationTime,
 } from "./utils";
 import { getApplicationUrl } from "@/common/urls";
+import { ExternalTableLink } from "@/styles/util";
 
 const unitsTruncateLen = 23;
 const applicantTruncateLen = 20;
@@ -52,19 +53,12 @@ const COLS = [
     headerTKey: "Application.headings.customer",
     isSortable: true,
     key: "applicant",
-    transform: ({ applicantName, pk }: ApplicationView) =>
-      pk ? (
-        <ExternalTableLink
-          href={getApplicationUrl(pk, undefined, true)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {truncate(applicantName ?? "-", applicantTruncateLen)}
-          <IconLinkExternal size="xs" aria-hidden />
-        </ExternalTableLink>
-      ) : (
-        <span>{truncate(applicantName ?? "-", applicantTruncateLen)}</span>
-      ),
+    transform: ({ applicantName, pk }: ApplicationView) => (
+      <ExternalTableLink to={getApplicationUrl(pk)}>
+        {truncate(applicantName ?? "-", applicantTruncateLen)}
+        <IconLinkExternal size="xs" aria-hidden />
+      </ExternalTableLink>
+    ),
   },
   {
     headerTKey: "Application.applicantType",

apps/admin-ui/src/spa/application-rounds/[id]/review/RejectedOccurrencesTable.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CustomTable, ExternalTableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
 import { getApplicationUrl, getReservationUrl } from "@/common/urls";
 import type { RejectedOccurrencesQuery } from "@gql/gql-types";
 import { truncate } from "common/src/helpers";
@@ -10,6 +10,7 @@ import type { TFunction } from "i18next";
 import { getApplicantName } from "@/helpers";
 import { toUIDate } from "common/src/common/util";
 import { formatTime } from "@/common/util";
+import { ExternalTableLink } from "@/styles/util";
 
 const unitsTruncateLen = 23;
 const applicantTruncateLen = 20;
@@ -94,11 +95,7 @@ const COLS = [
       applicationPk,
       pk,
     }: RejectedOccurrencesView) => (
-      <ExternalTableLink
-        href={getApplicationUrl(applicationPk, pk, true)}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
         {truncate(applicantName ?? "-", applicantTruncateLen)}
         <IconLinkExternal size="xs" aria-hidden />
       </ExternalTableLink>
@@ -138,7 +135,7 @@ const COLS = [
     key: "time_of_occurrence",
     transform: ({ time, link }: RejectedOccurrencesView) => {
       if (link !== "") {
-        return <ExternalTableLink href={link}>{time}</ExternalTableLink>;
+        return <ExternalTableLink to={link}>{time}</ExternalTableLink>;
       }
       return <span>{time}</span>;
     },

apps/admin-ui/src/spa/application-rounds/index.tsx

@@ -19,8 +19,8 @@ import { Container } from "@/styles/layout";
 import { truncate } from "@/helpers";
 import Loader from "@/component/Loader";
 import { ApplicationRoundCard } from "./ApplicationRoundCard";
-import { TableLink } from "@/component/Table";
 import { StyledHDSTable } from "./CustomTable";
+import { TableLink } from "@/styles/util";
 
 const AccordionContainer = styled.div`
   display: flex;
@@ -180,7 +180,7 @@ function AllApplicationRounds(): JSX.Element | null {
               isSortable: true,
               headerName: t("ApplicationRound.headings.name"),
               transform: (applicationRound: ApplicationRoundNode) => (
-                <TableLink href={getApplicationRoundUrl(applicationRound.pk)}>
+                <TableLink to={getApplicationRoundUrl(applicationRound.pk)}>
                   <span title={applicationRound.nameFi ?? ""}>
                     {truncate(applicationRound.nameFi ?? "", 50)}
                   </span>

apps/admin-ui/src/spa/notifications/index.tsx

@@ -14,9 +14,10 @@ import Loader from "@/component/Loader";
 import { ButtonLikeLink } from "@/component/ButtonLikeLink";
 import { valueForDateInput, valueForTimeInput } from "@/helpers";
 import { GQL_MAX_RESULTS_PER_QUERY } from "@/common/const";
-import { CustomTable, TableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
 import { filterNonNullable } from "common/src/helpers";
 import { More } from "@/component/More";
+import { TableLink } from "@/styles/util";
 
 const notificationUrl = (pk: number) => `/messaging/notifications/${pk}`;
 
@@ -41,7 +42,7 @@ const getColConfig = (t: TFunction) => [
     isSortable: true,
     transform: (notification: NonNullable<BannerNotificationNode>) =>
       notification.pk ? (
-        <TableLink href={notificationUrl(notification.pk)}>
+        <TableLink to={notificationUrl(notification.pk)}>
           {notification.name ?? t("Notifications.noName")}
         </TableLink>
       ) : (

apps/admin-ui/src/spa/reservation-units/ReservationUnitsTable.tsx

@@ -4,8 +4,9 @@ import type { TFunction } from "i18next";
 import type { SearchReservationUnitsQuery } from "@gql/gql-types";
 import { truncate } from "@/helpers";
 import { getReservationUnitUrl } from "@/common/urls";
-import { CustomTable, TableLink } from "@/component/Table";
+import { CustomTable } from "@/component/Table";
 import { MAX_NAME_LENGTH } from "@/common/const";
+import { TableLink } from "@/styles/util";
 
 type ReservationUnitList = NonNullable<
   SearchReservationUnitsQuery["reservationUnits"]
@@ -25,7 +26,7 @@ const getColConfig = (t: TFunction) => [
     headerName: t("ReservationUnits.headings.name"),
     key: "nameFi",
     transform: ({ nameFi, pk, unit }: ReservationUnitNode) => (
-      <TableLink href={getReservationUnitUrl(pk, unit?.pk)}>
+      <TableLink to={getReservationUnitUrl(pk, unit?.pk)}>
         {truncate(nameFi ?? "-", MAX_NAME_LENGTH)}
       </TableLink>
     ),