feat(md): change url when expanding a version (#9307)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Jun 7, 2021 · 537bc9d · 537bc9d
1 parent 7323cdd
commit 537bc9d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/app/scripts/modules/core/src/managed/managed.states.ts b/app/scripts/modules/core/src/managed/managed.states.ts
@@ -45,7 +45,7 @@ const routes: Array<INestedState & { name: Routes }> = [
     children: [],
     params: {
       version: { isOptional: true, value: null },
-      sha: { isOptional: true, value: null },
+      sha: { isOptional: true, value: null, dynamic: true },
     },
     data: {
       pageTitleSection: {

diff --git a/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx b/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx
@@ -1,4 +1,4 @@
-import { RawParams, useCurrentStateAndParams } from '@uirouter/react';
+import { RawParams, useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { sortBy } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -140,6 +140,7 @@ interface ISingleVersionProps {
 
 const SingleVersion = ({ versionData, pinnedVersions }: ISingleVersionProps) => {
   const ref = React.useRef<HTMLDivElement>(null);
+  const routerState = useRouter().stateService;
 
   React.useEffect(() => {
     if (versionData.isFocused && ref.current) {
@@ -156,6 +157,10 @@ const SingleVersion = ({ versionData, pinnedVersions }: ISingleVersionProps) =>
         expandIconType="arrowCross"
         defaultExpanded={versionData.isFocused}
         heading={({ chevron }) => <VersionHeading group={versionData} chevron={chevron} />}
+        onToggle={(isExpanded) => {
+          if (!isExpanded) return;
+          routerState.go('.', { sha: versionData.key }, { location: 'replace' });
+        }}
       >
         <VersionContent versionData={versionData} pinnedVersions={pinnedVersions} />
       </CollapsibleSection>

diff --git a/app/scripts/modules/core/src/presentation/collapsibleSection/CollapsibleSection.tsx b/app/scripts/modules/core/src/presentation/collapsibleSection/CollapsibleSection.tsx
@@ -17,6 +17,7 @@ export interface ICollapsibleSectionProps {
   expandIconType?: 'arrow' | 'plus' | 'arrowCross';
   expandIconSize?: string;
   heading: ((props: { chevron: JSX.Element }) => JSX.Element) | string;
+  onToggle?: (isExpanded: boolean) => void;
 }
 
 export interface ICollapsibleSectionState {
@@ -47,6 +48,7 @@ export const CollapsibleSection: React.FC<ICollapsibleSectionProps> = ({
   expandIconPosition = 'left',
   expandIconType = 'arrow',
   expandIconSize,
+  onToggle,
   children,
 }) => {
   const cacheKey = React.useMemo(
@@ -64,6 +66,7 @@ export const CollapsibleSection: React.FC<ICollapsibleSectionProps> = ({
     if (enableCaching) {
       CollapsibleSectionStateCache.setExpanded(cacheKey, !isExpanded);
     }
+    onToggle?.(!isExpanded);
   };
 
   const expandIconProps: Partial<IIconProps> = {