DRAFT: Add terminal details to stop page

cypress/e2e/stop-registry/stopDetails.cy.ts

@@ -3,8 +3,10 @@ import {
   Priority,
   StopAreaInput,
   StopInsertInput,
+  StopRegistryGeoJsonType,
   StopRegistryNameType,
   StopRegistryTransportModeType,
+  TerminalInput,
   buildStop,
   buildTimingPlace,
   extractInfrastructureLinkIdsFromResponse,
@@ -141,6 +143,35 @@ const stopAreaInput: Array<StopAreaInput> = [
   },
 ];
 
+const terminalH2003: TerminalInput = {
+  terminal: {
+    privateCode: { type: 'HSL/TEST', value: 'TH2003' },
+    name: { lang: 'fin', value: 'E2ETH2003' },
+    description: { lang: 'fin', value: 'E2E testiterminaali H2003' },
+    geometry: {
+      coordinates: [24.92596546020357, 60.16993494912799],
+      type: StopRegistryGeoJsonType.Point,
+    },
+    keyValues: [
+      { key: 'validityStart', values: ['2020-01-01'] },
+      { key: 'validityEnd', values: ['2050-01-01'] },
+      { key: 'streetAddress', values: ['Mannerheimintie 22-24'] },
+      { key: 'postalCode', values: ['00100'] },
+      { key: 'municipality', values: ['Helsinki'] },
+      { key: 'fareZone', values: ['A'] },
+      { key: 'terminalType', values: ['BusTerminal'] },
+      { key: 'departurePlatforms', values: ['7'] },
+      { key: 'arrivalPlatforms', values: ['6'] },
+      { key: 'loadingPlatforms', values: ['3'] },
+      { key: 'electricCharging', values: ['2'] },
+    ],
+    externalLinks: [
+      { name: 'Terminaalin Testilinkki', location: 'https://terminaltest.fi' },
+    ],
+  },
+  memberLabels: ['H2003'],
+};
+
 const buildScheduledStopPoints = (
   infrastructureLinkIds: UUID[],
 ): StopInsertInput[] => [
@@ -223,9 +254,7 @@ describe('Stop details', () => {
     insertToDbHelper(dbResources);
     toast = new Toast();
     cy.task<InsertedStopRegistryIds>('insertStopRegistryData', {
-      // Inserting the terminals here causes it's child stop H0003,
-      // to generate extra versions of it's quay, which breaks info spots.
-      // terminals: seedTerminals,
+      terminals: [terminalH2003],
       stopPlaces: stopAreaInput,
       organisations: seedOrganisations,
       infoSpots: seedInfoSpots,
@@ -264,14 +293,15 @@ describe('Stop details', () => {
     locationView.getLongitude().shouldHaveText('24.932072417514647');
     locationView.getAltitude().shouldHaveText('0');
     locationView.getFunctionalArea().shouldHaveText('20 m');
-    locationView.getStopArea().shouldHaveText('-');
-    locationView.getStopAreaName().shouldHaveText('-');
-    locationView.getStopAreaStops().shouldHaveText('-');
     locationView.getQuay().shouldHaveText('-');
     locationView.getStopAreaQuays().shouldHaveText('-');
-    locationView.getTerminal().shouldHaveText('-');
-    locationView.getTerminalName().shouldHaveText('-');
-    locationView.getTerminalStops().shouldHaveText('-');
+    locationView.getTerminalPrivateCode().shouldHaveText('TH2003');
+    locationView
+      .getTerminalLink()
+      .shouldBeVisible()
+      .should('have.attr', 'href', `/stop-registry/terminals/TH2003`);
+    locationView.getTerminalName().shouldHaveText('E2ETH2003');
+    locationView.getTerminalStops().shouldHaveText('H2003');
   };
 
   const verifyInitialSignageDetails = () => {

cypress/pageObjects/stop-registry/stop-details/LocationDetailsViewCard.ts

@@ -20,20 +20,16 @@ export class LocationDetailsViewCard {
   getFunctionalArea = () =>
     cy.getByTestId('LocationDetailsViewCard::functionalArea');
 
-  getStopArea = () => cy.getByTestId('LocationDetailsViewCard::stopArea');
-
-  getStopAreaName = () =>
-    cy.getByTestId('LocationDetailsViewCard::stopAreaName');
-
-  getStopAreaStops = () =>
-    cy.getByTestId('LocationDetailsViewCard::stopAreaStops');
-
   getQuay = () => cy.getByTestId('LocationDetailsViewCard::quay');
 
   getStopAreaQuays = () =>
     cy.getByTestId('LocationDetailsViewCard::stopAreaQuays');
 
-  getTerminal = () => cy.getByTestId('LocationDetailsViewCard::terminal');
+  getTerminalPrivateCode = () =>
+    cy.getByTestId('LocationDetailsViewCard::terminalPrivateCode');
+
+  getTerminalLink = () =>
+    cy.getByTestId('LocationDetailsViewCard::terminalLink');
 
   getTerminalName = () =>
     cy.getByTestId('LocationDetailsViewCard::terminalName');

ui/src/components/stop-registry/stop-areas/stop-area-details/useGetStopAreaDetails.ts

@@ -2,6 +2,7 @@ import { gql } from '@apollo/client';
 import { useMemo } from 'react';
 import {
   StopPlaceDetailsFragment,
+  StopRegistryStopPlaceInterface,
   StopsDatabaseStopPlaceNewestVersionBoolExp,
   useGetStopPlaceDetailsQuery,
 } from '../../../../generated/graphql';
@@ -72,6 +73,10 @@ const GQL_GET_STOP_AREA_DETAILS = gql`
       ...quay_details
     }
 
+    parentStopPlace {
+      ...terminal_details
+    }
+
     accessibilityAssessment {
       ...accessibility_assessment_details
     }
@@ -84,6 +89,21 @@ const GQL_GET_STOP_AREA_DETAILS = gql`
       ...fare_zone_details
     }
   }
+
+  fragment terminal_details on stop_registry_ParentStopPlace {
+    id
+    name {
+      lang
+      value
+    }
+    privateCode {
+      value
+      type
+    }
+    children {
+      ...member_stop_stop_place_details
+    }
+  }
 `;
 
 export function getEnrichedStopPlace(
@@ -93,9 +113,16 @@ export function getEnrichedStopPlace(
     return null;
   }
 
+  const transformedStopPlace = {
+    ...stopPlace,
+    parentStopPlace: stopPlace.parentStopPlace
+      ? [stopPlace.parentStopPlace as StopRegistryStopPlaceInterface]
+      : undefined,
+  };
+
   return {
     ...stopPlace,
-    ...getStopPlaceDetailsForEnrichment(stopPlace),
+    ...getStopPlaceDetailsForEnrichment(transformedStopPlace),
   };
 }
 

ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsForm.tsx

@@ -3,8 +3,10 @@ import React, { ForwardRefRenderFunction } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Column, Row } from '../../../../../layoutComponents';
+import { StopWithDetails } from '../../../../../types';
 import { FormColumn, InputField, InputLabel } from '../../../../forms/common';
 import { useDirtyFormBlockNavigation } from '../../../../forms/common/NavigationBlocker';
+import { LocationTerminalDetails } from './LocationTerminalDetails';
 import { LocationDetailsFormState, locationDetailsFormSchema } from './schema';
 
 const testIds = {
@@ -21,18 +23,14 @@ const testIds = {
 type LocationDetailsFormComponentProps = {
   readonly className?: string;
   readonly defaultValues: Partial<LocationDetailsFormState>;
-  readonly municipality?: string | null;
-  readonly fareZone?: string | null;
   readonly onSubmit: (state: LocationDetailsFormState) => void;
+  readonly stop: StopWithDetails;
 };
 
 const LocationDetailsFormComponent: ForwardRefRenderFunction<
   ExplicitAny,
   LocationDetailsFormComponentProps
-> = (
-  { className = '', defaultValues, municipality, fareZone, onSubmit },
-  ref,
-) => {
+> = ({ className = '', defaultValues, onSubmit, stop }, ref) => {
   const { t } = useTranslation();
 
   const methods = useForm<LocationDetailsFormState>({
@@ -46,8 +44,9 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...methods}>
       <form className={className} onSubmit={handleSubmit(onSubmit)} ref={ref}>
+        <LocationTerminalDetails stop={stop} />
         <FormColumn>
-          <Row className="flex-wrap gap-4">
+          <Row className="mt-5 flex-wrap gap-4">
             <InputField<LocationDetailsFormState>
               type="text"
               translationPrefix="stopDetails.location"
@@ -76,7 +75,7 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
                 >
                   {
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    municipality || '-'
+                    stop.stop_place?.municipality || '-'
                   }
                 </span>
                 <i className="icon-info text-lg text-brand" />
@@ -97,7 +96,7 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
                 >
                   {
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    fareZone || '-'
+                    stop.stop_place?.fareZone || '-'
                   }
                 </span>
                 <i className="icon-info text-lg text-brand" />

ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsSection.tsx

@@ -7,6 +7,7 @@ import { InfoContainer, useInfoContainerControls } from '../../../../common';
 import { stopInfoContainerColors } from '../stopInfoContainerColors';
 import { LocationDetailsForm } from './LocationDetailsForm';
 import { LocationDetailsViewCard } from './LocationDetailsViewCard';
+import { LocationTerminalDetails } from './LocationTerminalDetails';
 import { LocationDetailsFormState } from './schema';
 
 type LocationDetailsSectionProps = {
@@ -65,13 +66,15 @@ export const LocationDetailsSection: FC<LocationDetailsSectionProps> = ({
       {infoContainerControls.isInEditMode && !!defaultValues ? (
         <LocationDetailsForm
           defaultValues={defaultValues}
-          municipality={stop.stop_place?.municipality}
-          fareZone={stop.stop_place?.fareZone}
+          stop={stop}
           ref={formRef}
           onSubmit={onSubmit}
         />
       ) : (
-        <LocationDetailsViewCard stop={stop} />
+        <>
+          <LocationTerminalDetails stop={stop} />
+          <LocationDetailsViewCard stop={stop} />
+        </>
       )}
     </InfoContainer>
   );

ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsViewCard.tsx

@@ -18,10 +18,8 @@ const testIds = {
   stopAreaName: 'LocationDetailsViewCard::stopAreaName',
   stopAreaStops: 'LocationDetailsViewCard::stopAreaStops',
   quay: 'LocationDetailsViewCard::quay',
+  guidanceType: 'LocationDetailsViewCard::guidanceType',
   stopAreaQuays: 'LocationDetailsViewCard::stopAreaQuays',
-  terminal: 'LocationDetailsViewCard::terminal',
-  terminalName: 'LocationDetailsViewCard::terminalName',
-  terminalStops: 'LocationDetailsViewCard::terminalStops',
 };
 
 type LocationDetailsViewCardProps = {
@@ -85,50 +83,22 @@ export const LocationDetailsViewCard: FC<LocationDetailsViewCardProps> = ({
       </DetailRow>
       <HorizontalSeparator />
       <DetailRow>
-        <LabeledDetail
-          title={t('stopDetails.location.stopArea')}
-          detail={null /* TODO */}
-          testId={testIds.stopArea}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaName')}
-          detail={null /* TODO */}
-          testId={testIds.stopAreaName}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaStops')}
-          detail={null /* TODO */}
-          testId={testIds.stopAreaStops}
-        />
         <LabeledDetail
           title={t('stopDetails.location.quay')}
-          detail={
-            null /* TODO:  stop.quay?.placeEquipments?.generalSign?.content?.value */
-          }
-          testId={testIds.quay}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaQuays')}
           detail={null /* TODO */}
-          testId={testIds.stopAreaQuays}
-        />
-      </DetailRow>
-      <HorizontalSeparator />
-      <DetailRow>
-        <LabeledDetail
-          title={t('stopDetails.location.terminal')}
-          detail={null /* TODO */}
-          testId={testIds.terminal}
+          testId={testIds.quay}
         />
         <LabeledDetail
-          title={t('stopDetails.location.terminalName')}
+          title={t('stopDetails.location.guidanceType')}
           detail={null /* TODO */}
-          testId={testIds.terminalName}
+          testId={testIds.guidanceType}
         />
         <LabeledDetail
-          title={t('stopDetails.location.terminalStops')}
+          title={t('stopDetails.location.stopAreaQuays', {
+            total: 0,
+          })}
           detail={null /* TODO */}
-          testId={testIds.terminalStops}
+          testId={testIds.stopAreaQuays}
         />
       </DetailRow>
     </div>