fix: 13555 fix latest commit link

frontend/app-development/enums/GiteaRoutePaths.ts

@@ -0,0 +1,3 @@
+export enum GiteaRoutePaths {
+  LatestCommit = 'latest-commit',
+}

frontend/app-development/features/appPublish/containers/ReleaseContainer.test.tsx

@@ -84,7 +84,8 @@ describe('ReleaseContainer', () => {
       name: textMock('app_release.release_title_link'),
     });
     await user.click(latestCommitLink);
-    expect(mockGetBranchStatus).toHaveBeenCalledTimes(2);
+    expect(mockGetRepoStatus).toHaveBeenCalledTimes(1);
+    expect(latestCommitLink).toBeInTheDocument();
   });
 
   it('renders status that latest commit fetched from master is the same as commit for latest release', async () => {

frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx

@@ -16,19 +16,21 @@ import { QueryKey } from 'app-shared/types/QueryKey';
 import { useRepoStatusQuery } from 'app-shared/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { Link } from '@digdir/designsystemet-react';
+import { PackagesRouter } from 'app-shared/navigation/PackagesRouter';
 
 export function ReleaseContainer() {
   const { org, app } = useStudioEnvironmentParams();
   const [popoverOpenClick, setPopoverOpenClick] = useState<boolean>(false);
   const [popoverOpenHover, setPopoverOpenHover] = useState<boolean>(false);
+  const packagesRouter = new PackagesRouter({ app, org });
 
   const { data: releases = [] } = useAppReleasesQuery(org, app);
   const { data: repoStatus, isPending: isRepoStatusPending } = useRepoStatusQuery(org, app);
-  const {
-    data: masterBranchStatus,
-    isPending: masterBranchStatusIsPending,
-    refetch: getMasterBranchStatus,
-  } = useBranchStatusQuery(org, app, 'master');
+  const { data: masterBranchStatus, isPending: masterBranchStatusIsPending } = useBranchStatusQuery(
+    org,
+    app,
+    'master',
+  );
 
   const latestRelease: AppReleaseType = releases && releases[0] ? releases[0] : null;
 
@@ -146,17 +148,6 @@ export function ReleaseContainer() {
   }
 
   function renderCreateReleaseTitle() {
-    const handleLinkClick = async (event) => {
-      event.preventDefault(); // Prevent default link behavior
-      const url = await getLatestCommitOnMaster();
-      window.open(url, '#', 'noopener,noreferrer');
-    };
-
-    const getLatestCommitOnMaster = async () => {
-      const { data: newMasterBranchStatus } = await getMasterBranchStatus();
-      return gitCommitPath(org, app, newMasterBranchStatus.commit.id);
-    };
-
     if (!masterBranchStatus || !repoStatus?.contentStatus) {
       return null;
     }
@@ -169,7 +160,11 @@ export function ReleaseContainer() {
       return (
         <>
           {t('app_release.release_title')}
-          <a href='#' onClick={handleLinkClick}>
+          <a
+            href={packagesRouter.getPackageNavigationUrl('latestCommit')}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
             {t('app_release.release_title_link')}
           </a>
         </>

frontend/app-development/features/navigateToLatestCommitInGitea/NavigateToLatestCommitInGitea.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { renderWithProviders } from '../../test/mocks';
+import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { app, org } from '@studio/testing/testids';
+import { branchStatus } from 'app-shared/mocks/mocks';
+import type { BranchStatus } from 'app-shared/types/BranchStatus';
+import { NavigateToLatestCommitInGitea } from './NavigateToLatestCommitInGitea';
+
+describe('NavigateToLatestCommitInGitea', () => {
+  afterEach(() => jest.clearAllMocks);
+
+  it('sets window location when the latest commit is received', async () => {
+    const commitId = 'some-commit-id';
+    delete window.location;
+    window.location = { ...window.location, assign: jest.fn() };
+    renderLatestCommit({ ...branchStatus, commit: { ...branchStatus.commit, id: commitId } });
+    expect(window.location.href).toBe(`/repos/${org}/${app}/commit/${commitId}`);
+  });
+
+  it('renders a spinner if master branch status is pending', () => {
+    renderLatestCommit();
+    expect(screen.getByText(textMock('general.loading'))).toBeInTheDocument();
+  });
+});
+
+const renderLatestCommit = (branchStatusMock?: BranchStatus) => {
+  const queryClientMock = createQueryClientMock();
+  if (branchStatusMock) {
+    queryClientMock.setQueryData([QueryKey.BranchStatus, org, app, 'master'], branchStatusMock);
+  }
+  renderWithProviders({}, queryClientMock)(<NavigateToLatestCommitInGitea />);
+};

frontend/app-development/features/navigateToLatestCommitInGitea/NavigateToLatestCommitInGitea.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { StudioPageSpinner } from '@studio/components';
+import { gitCommitPath } from 'app-shared/api/paths';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { useBranchStatusQuery } from 'app-development/hooks/queries';
+import { useTranslation } from 'react-i18next';
+
+export const NavigateToLatestCommitInGitea = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const { org, app } = useStudioEnvironmentParams();
+  const { data: masterBranchStatus } = useBranchStatusQuery(org, app, 'master');
+  const latestCommitId = masterBranchStatus?.commit?.id;
+
+  useEffect(() => {
+    if (latestCommitId) {
+      window.location.href = gitCommitPath(org, app, latestCommitId);
+    }
+  }, [app, latestCommitId, org]);
+  return <StudioPageSpinner spinnerTitle={t('general.loading')} />;
+};

frontend/app-development/features/navigateToLatestCommitInGitea/index.ts

@@ -0,0 +1 @@
+export { NavigateToLatestCommitInGitea } from './NavigateToLatestCommitInGitea';

frontend/app-development/router/PageRoutes.tsx

@@ -17,6 +17,8 @@ import {
   NotFoundRouteErrorBoundary,
   RouteErrorBoundary,
 } from './PageRouterErrorBoundry';
+import { GiteaRoutePaths } from '../enums/GiteaRoutePaths';
+import { NavigateToLatestCommitInGitea } from '../features/navigateToLatestCommitInGitea';
 
 const BASE_PATH = '/:org/:app';
 
@@ -40,6 +42,14 @@ const router = createBrowserRouter(
         ))}
         <Route path='*' element={<NotFoundPage />} errorElement={<NotFoundRouteErrorBoundary />} />
       </Route>
+      <Route path={BASE_PATH}>
+        {/* Additional BasePath route to avoid using PageLayout around NavigateToLatestCommitInGitea */}
+        <Route
+          path={GiteaRoutePaths.LatestCommit}
+          element={<NavigateToLatestCommitInGitea />}
+          errorElement={<RouteErrorBoundary />}
+        />
+      </Route>
       <Route path='*' element={<NotFoundPage />} errorElement={<NotFoundRouteErrorBoundary />} />
     </Route>,
   ),

frontend/app-development/test/mocks.tsx

@@ -10,8 +10,6 @@ import { queriesMock } from 'app-shared/mocks/queriesMock';
 import type { QueryClient } from '@tanstack/react-query';
 import { queryClientConfigMock } from 'app-shared/mocks/queryClientMock';
 
-export const textLanguagesMock = ['nb', 'nn', 'en'];
-
 export const renderWithProviders =
   (queries: Partial<ServicesContextProps> = {}, queryClient?: QueryClient) =>
   (component: ReactNode) => {

frontend/packages/shared/src/navigation/PackagesRouter/PackagesRouter.ts

@@ -9,14 +9,16 @@ type PackagesRoute =
   | 'editorOverview'
   | 'editorUiEditor'
   | 'preview'
-  | 'editorPublish';
+  | 'editorPublish'
+  | 'latestCommit';
 
 const packagesRoutes: Record<PackagesRoute, string> = {
   dashboard: '/dashboard',
   dataModel: '/editor/{{org}}/{{app}}/data-model',
   editorOverview: '/editor/{{org}}/{{app}}/overview',
   editorUiEditor: '/editor/{{org}}/{{app}}/ui-editor',
   editorPublish: '/editor/{{org}}/{{app}}/deploy',
+  latestCommit: '/editor/{{org}}/{{app}}/latest-commit',
   preview: '/preview/{{org}}/{{app}}',
 };