Implement placeholder action buttons on StopDetails page

* Placeholder button for: Edit Stop validity period and/or priority.
* Proper: OpenOnMap -button.
* ExtraActions -menu with:
  - Placeholder meny items for: Make a new copy of stop -menu action.

ui/src/components/stop-registry/stops/stop-details/StopDetailsPage.tsx

@@ -20,7 +20,7 @@ import { MeasurementsSection } from './measurements';
 import { SheltersSection } from './shelters';
 import { SignageDetailsSection } from './signage-details/SignageDetailsSection';
 import { StopHeaderSummaryRow } from './StopHeaderSummaryRow';
-import { StopTitleRow } from './StopTitleRow';
+import { StopTitleRow } from './title-row/StopTitleRow';
 
 const testIds = {
   page: 'StopDetailsPage::page',

ui/src/components/stop-registry/stops/stop-details/title-row/EditValidityButton.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { StopWithDetails } from '../../../../../hooks';
+
+const DISABLE_UNTIL_IMPLEMENTED = true;
+
+const testIds = {
+  button: 'StopDetailsPage::editValidityButton',
+};
+
+type EditValidityButtonProps = {
+  readonly className?: string;
+  readonly stop: StopWithDetails | null;
+};
+
+export const EditValidityButton: FC<EditValidityButtonProps> = ({
+  className,
+  stop,
+}) => {
+  return (
+    <button
+      className={twMerge(
+        'h-11 w-11',
+        'flex items-center justify-center',
+        'rounded-full border border-grey',
+        'disabled:pointer-events-none disabled:bg-background disabled:opacity-70',
+        className,
+      )}
+      data-testid={testIds.button}
+      disabled={!stop || DISABLE_UNTIL_IMPLEMENTED}
+      type="button"
+    >
+      <i className="icon-calendar aria-hidden text-2xl text-brand" />
+    </button>
+  );
+};

ui/src/components/stop-registry/stops/stop-details/title-row/ExtraActions.tsx

@@ -0,0 +1,47 @@
+import noop from 'lodash/noop';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twJoin } from 'tailwind-merge';
+import { StopWithDetails } from '../../../../../hooks';
+import {
+  AlignDirection,
+  SimpleDropdownMenu,
+  SimpleDropdownMenuItem,
+} from '../../../../../uiComponents';
+
+const DISABLE_UNTIL_IMPLEMENTED = true;
+
+const testIds = {
+  actionMenu: 'StopDetailsPage::extraActions::menu',
+  copy: 'StopDetailsPage::extraActions::copy',
+};
+
+type ExtraActionsProps = {
+  readonly className?: string;
+  readonly stop: StopWithDetails | null;
+};
+
+export const ExtraActions: FC<ExtraActionsProps> = ({ className, stop }) => {
+  const { t } = useTranslation();
+
+  return (
+    <SimpleDropdownMenu
+      className={className}
+      buttonClassName={twJoin(
+        'flex h-11 w-11 items-center justify-center border border-grey',
+        'disabled:pointer-events-none disabled:bg-background disabled:opacity-70',
+      )}
+      tooltip={t('accessibility:common.actionMenu')}
+      alignItems={AlignDirection.Left}
+      testId={testIds.actionMenu}
+      disabled={!stop}
+    >
+      <SimpleDropdownMenuItem
+        text={t('stopDetails.actions.extra.copy')}
+        disabled={DISABLE_UNTIL_IMPLEMENTED}
+        onClick={noop}
+        testId={testIds.copy}
+      />
+    </SimpleDropdownMenu>
+  );
+};

ui/src/components/stop-registry/stops/stop-details/title-row/OpenOnMapButton.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import { StopWithDetails } from '../../../../../hooks';
+import { LocatorButton } from '../../../../../uiComponents';
+import { useOpenStopOnMap } from '../../../search/StopTableRow/utils';
+
+type OpenOnMapButtonProps = {
+  readonly className?: string;
+  readonly label: string;
+  readonly stop: StopWithDetails | null;
+};
+
+export const OpenOnMapButton: FC<OpenOnMapButtonProps> = ({
+  className,
+  label,
+  stop,
+}) => {
+  const { t } = useTranslation();
+
+  const openStopOnMap = useOpenStopOnMap();
+  const onClick = () => {
+    if (stop && stop.stop_place !== null) {
+      openStopOnMap({ ...stop, stop_place: stop.stop_place });
+    }
+  };
+
+  return (
+    <LocatorButton
+      className={twMerge('h-11 w-11', className)}
+      disabled={!stop}
+      onClick={onClick}
+      tooltipText={t('accessibility:common.showOnMap', { label })}
+    />
+  );
+};

ui/src/components/stop-registry/stops/stop-details/StopTitleRow.tsx → ui/src/components/stop-registry/stops/stop-details/title-row/StopTitleRow.tsx

@@ -1,16 +1,20 @@
-import { StopWithDetails } from '../../../../hooks';
-
-interface Props {
-  stopDetails: StopWithDetails | null | undefined;
-  label: string;
-}
+import { FC } from 'react';
+import { StopWithDetails } from '../../../../../hooks';
+import { EditValidityButton } from './EditValidityButton';
+import { ExtraActions } from './ExtraActions';
+import { OpenOnMapButton } from './OpenOnMapButton';
 
 const testIds = {
   label: 'StopTitleRow::label',
   names: 'StopTitleRow::names',
 };
 
-export const StopTitleRow: React.FC<Props> = ({ stopDetails, label }) => {
+type StopTitleRowProps = {
+  readonly stopDetails: StopWithDetails | null;
+  readonly label: string;
+};
+
+export const StopTitleRow: FC<StopTitleRowProps> = ({ stopDetails, label }) => {
   return (
     <div className="flex items-center">
       <i className="icon-bus-alt mr-2 text-3xl text-tweaked-brand" />
@@ -32,6 +36,12 @@ export const StopTitleRow: React.FC<Props> = ({ stopDetails, label }) => {
           }
         </span>
       </div>
+
+      <div className="flex-grow" />
+
+      <EditValidityButton stop={stopDetails} />
+      <OpenOnMapButton className="ml-2" label={label} stop={stopDetails} />
+      <ExtraActions className="ml-2" stop={stopDetails} />
     </div>
   );
 };

ui/src/locales/en-US/common.json

@@ -385,6 +385,11 @@
         "a3": "A3",
         "cm80x120": "80x120cm"
       }
+    },
+    "actions": {
+      "extra": {
+        "copy": "Make a new copy"
+      }
     }
   },
   "stopRegistrySearch": {

ui/src/locales/fi-FI/common.json

@@ -385,6 +385,11 @@
         "a3": "A3",
         "cm80x120": "80x120cm"
       }
+    },
+    "actions": {
+      "extra": {
+        "copy": "Kopioi uudeksi versioksi"
+      }
     }
   },
   "stopRegistrySearch": {