Merge pull request #498 from newrelic/more_permalink_values

fix: additional urlState values for permalink generation

Author: khpeet

nerdlets/home/index.js

@@ -199,13 +199,24 @@ const HomeNerdlet = () => {
     });
 
   const flowClickHandler = useCallback(
-    (id) => setNerdletState({ flow: { id } }),
+    (id) =>
+      setNerdletState({
+        flow: { id },
+        isPlayback: false,
+        signalExpandOption: 0,
+        playbackTimeRange: null,
+        playbackIncrement: null,
+      }),
     []
   );
 
   const backToFlowsHandler = useCallback(() => {
     setNerdletState({
       flow: {},
+      isPlayback: false,
+      signalExpandOption: 0,
+      playbackTimeRange: null,
+      playbackIncrement: null,
       mode: MODES.INLINE,
     });
     flowsRefetch?.();

src/components/flow/index.js

@@ -10,7 +10,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import { Spinner } from 'nr1';
+import { Spinner, useNerdletState } from 'nr1';
 
 import {
   KpiBar,
@@ -77,6 +77,7 @@ const Flow = forwardRef(
     const { debugLogJson } = useDebugLogger({ allowDebug: debugMode });
     const stagesRef = useRef();
     const flowIdRef = useRef();
+    const [nerdletState, setNerdletState] = useNerdletState();
 
     useEffect(() => {
       dispatch({
@@ -111,6 +112,10 @@ const Flow = forwardRef(
         });
     }, [isAuditLogShown, flowDoc]);
 
+    useEffect(() => {
+      setIsPlayback(nerdletState.isPlayback);
+    }, [nerdletState.isPlayback]);
+
     const saveFlow = useCallback(
       async (document) => {
         setLastSavedTimestamp(0);
@@ -177,7 +182,11 @@ const Flow = forwardRef(
       onClose?.();
     }, [flowWriter, onClose]);
 
-    const togglePlayback = useCallback(() => setIsPlayback((p) => !p), []);
+    const togglePlayback = useCallback(() => {
+      setNerdletState((prevState) => {
+        return { isPlayback: !prevState.isPlayback };
+      });
+    }, []);
 
     const togglePreview = () => {
       if (isPreview && mode !== MODES.EDIT) setMode(MODES.EDIT);

src/components/playback-bar/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Dropdown, DropdownItem, Icon } from 'nr1';
+import { Button, Dropdown, DropdownItem, Icon, useNerdletState } from 'nr1';
 
 import { TimeRangePicker } from '@newrelic/nr-labs-components';
 import { uuid } from '../../utils';
@@ -78,6 +78,7 @@ const PlaybackBar = ({ isLoading, onPreload, onSeek, onChange }) => {
   const seekDragStartX = useRef(0);
   const isMouseDownOnSeeker = useRef(false);
   const showingTimeWindow = useRef({ start: 0, end: 0 });
+  const [nerdletState, setNerdletState] = useNerdletState();
 
   const loadDataCache = useCallback(async (tbs) => {
     if (!onPreload) return;
@@ -125,12 +126,24 @@ const PlaybackBar = ({ isLoading, onPreload, onSeek, onChange }) => {
   }, []);
 
   const timeRangeChangeHandler = useCallback((selectedTimeRange) => {
-    setTimeRange(selectedTimeRange);
-    setSelectedIncrement(
-      playbackIncrementForSelectedDuration(selectedTimeRange)
-    );
+    setNerdletState({
+      playbackTimeRange: selectedTimeRange,
+      playbackIncrement:
+        playbackIncrementForSelectedDuration(selectedTimeRange),
+    });
   }, []);
 
+  useEffect(() => {
+    if (nerdletState.playbackTimeRange) {
+      setTimeRange(nerdletState.playbackTimeRange);
+      setSelectedIncrement(
+        nerdletState.playbackIncrement
+          ? nerdletState.playbackIncrement
+          : playbackIncrementForSelectedDuration(nerdletState.playbackTimeRange)
+      );
+    }
+  }, [nerdletState.playbackTimeRange]);
+
   useEffect(() => {
     const mouseUpHandler = () => {
       isMouseDownOnSeeker.current = false;
@@ -293,7 +306,7 @@ const PlaybackBar = ({ isLoading, onPreload, onSeek, onChange }) => {
             <DropdownItem
               key={item.timeInSeconds}
               disabled={isPlaybackIncrementDisabled(item, timeRange)}
-              onClick={() => setSelectedIncrement(item)}
+              onClick={() => setNerdletState({ playbackIncrement: item })}
             >
               {item.display}
             </DropdownItem>

src/components/stages/index.js

@@ -397,6 +397,10 @@ const Stages = forwardRef(
       }
     }, [nerdletState.staging]);
 
+    useEffect(() => {
+      setSignalExpandOption(nerdletState.signalExpandOption);
+    }, [nerdletState.signalExpandOption]);
+
     useEffect(() => {
       if (selections.type === COMPONENTS.SIGNAL && selections.id) {
         openSidebar({
@@ -670,9 +674,10 @@ const Stages = forwardRef(
                         }
                         label="Unhealthy only"
                         onChange={() =>
-                          setSignalExpandOption(
-                            (seo) => seo ^ SIGNAL_EXPAND.UNHEALTHY_ONLY
-                          )
+                          setNerdletState({
+                            signalExpandOption:
+                              signalExpandOption ^ SIGNAL_EXPAND.UNHEALTHY_ONLY,
+                          })
                         }
                       />
                       <Switch
@@ -681,9 +686,10 @@ const Stages = forwardRef(
                         }
                         label="Critical only"
                         onChange={() =>
-                          setSignalExpandOption(
-                            (seo) => seo ^ SIGNAL_EXPAND.CRITICAL_ONLY
-                          )
+                          setNerdletState({
+                            signalExpandOption:
+                              signalExpandOption ^ SIGNAL_EXPAND.CRITICAL_ONLY,
+                          })
                         }
                       />
                     </>
@@ -693,7 +699,10 @@ const Stages = forwardRef(
                       checked={signalExpandOption & SIGNAL_EXPAND.ALL}
                       label="Expand all steps"
                       onChange={() =>
-                        setSignalExpandOption((seo) => seo ^ SIGNAL_EXPAND.ALL)
+                        setNerdletState({
+                          signalExpandOption:
+                            signalExpandOption ^ SIGNAL_EXPAND.ALL,
+                        })
                       }
                     />
                   )}