feat(server): add compare URL dropdown (#457)

GoogleChrome · Oct 12, 2020 · 01e397b · 01e397b
1 parent 70020c6
commit 01e397b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/packages/server/src/ui/routes/build-view/build-view.css b/packages/server/src/ui/routes/build-view/build-view.css
@@ -4,13 +4,18 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-.build-view--with-lhr-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--url {
+.build-view--with-lhr-base-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--base-url,
+.build-view--with-lhr-compare-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--compare-url {
   background: var(--compare-secondary-highlight-color);
 }
 
-.build-view--with-lhr-link-hover
+.build-view--with-lhr-base-link-hover
   .lhr-comparison__scores-and-dropdowns
-  .dropdown--url
+  .dropdown--base-url
+  .dropdown__label,
+.build-view--with-lhr-compare-link-hover
+  .lhr-comparison__scores-and-dropdowns
+  .dropdown--compare-url
   .dropdown__label {
   padding-left: calc(var(--base-spacing) / 4);
   margin-right: calc(var(--base-spacing) / 4);

diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -47,20 +47,24 @@ function computeSelectedUrl(props, compareRuns) {
   return urlsInBothRuns[0] || fallbackUrl;
 }
 
-/** @param {{project: LHCI.ServerCommand.Project, build: LHCI.ServerCommand.Build, ancestorBuild: LHCI.ServerCommand.Build | null, runs: Array<LHCI.ServerCommand.Run>, compareUrl?: string, hasBaseOverride: boolean}} props */
+/** @param {{project: LHCI.ServerCommand.Project, build: LHCI.ServerCommand.Build, ancestorBuild: LHCI.ServerCommand.Build | null, runs: Array<LHCI.ServerCommand.Run>, baseUrl?: string, compareUrl?: string, hasBaseOverride: boolean}} props */
 const BuildView_ = props => {
   const [openBuildHash, setOpenBuild] = useState(/** @type {null|'base'|'compare'} */ (null));
-  const [isOpenLhrLinkHovered, setLhrLinkHover] = useState(false);
+  const [isOpenLhrBaseLinkHovered, setLhrBaseLinkHover] = useState(false);
+  const [isOpenLhrCompareLinkHovered, setLhrCompareLinkHover] = useState(false);
   const buildHashSelectorCloseFn = useCallback(() => setOpenBuild(null), [setOpenBuild]);
 
   const compareRuns = props.runs.filter(run => run.buildId === props.build.id);
-  const selectedUrl = computeSelectedUrl(props, compareRuns);
+  const compareUrl = props.compareUrl || computeSelectedUrl(props, compareRuns);
+  const baseUrl = props.baseUrl || compareUrl
   const availableUrls = [...new Set(compareRuns.map(run => run.url))];
-  const run = compareRuns.find(run => run.url === selectedUrl);
+  const run = compareRuns.find(run => run.url === compareUrl);
 
   const ancestorBuildId = props.ancestorBuild && props.ancestorBuild.id;
   const baseRuns = props.runs.filter(run => run.buildId === ancestorBuildId);
-  const baseRun = baseRuns.find(run => run.url === selectedUrl);
+  const baseRun = baseRuns.find(run => run.url === baseUrl);
+
+  const availableUrlOptions = availableUrls.map(url => ({value: url, label: url}))
 
   /** @type {LH.Result|undefined} */
   let lhr;
@@ -117,7 +121,7 @@ const BuildView_ = props => {
             lhr={baseLhr}
             isDimmed={openBuildHash === 'compare'}
             isOpen={openBuildHash === 'base'}
-            setLhrLinkHover={setLhrLinkHover}
+            setLhrLinkHover={setLhrBaseLinkHover}
             onClick={() => setOpenBuild(openBuildHash === 'base' ? null : 'base')}
           />
           <BuildSelectorHeaderSection
@@ -126,7 +130,7 @@ const BuildView_ = props => {
             lhr={lhr}
             isDimmed={openBuildHash === 'base'}
             isOpen={openBuildHash === 'compare'}
-            setLhrLinkHover={setLhrLinkHover}
+            setLhrLinkHover={setLhrCompareLinkHover}
             onClick={() => setOpenBuild(openBuildHash === 'compare' ? null : 'compare')}
           />
         </Fragment>
@@ -159,33 +163,51 @@ const BuildView_ = props => {
       <LhrComparison
         lhr={lhr}
         baseLhr={baseLhr}
-        className={clsx({'build-view--with-lhr-link-hover': isOpenLhrLinkHovered})}
+        className={clsx({
+          'build-view--with-lhr-base-link-hover': isOpenLhrBaseLinkHovered,
+          'build-view--with-lhr-compare-link-hover': isOpenLhrCompareLinkHovered
+        })}
         hookElements={{
           warnings: computeWarnings(warningProps).hasWarning ? (
             <BuildViewWarnings {...warningProps} />
           ) : (
             undefined
           ),
           dropdowns: (
-            <Dropdown
-              label="URL"
-              className="dropdown--url"
-              value={selectedUrl}
-              setValue={url => {
-                const to = new URL(window.location.href);
-                to.searchParams.set('compareUrl', url);
-                route(`${to.pathname}${to.search}`);
-              }}
-              options={availableUrls.map(url => ({value: url, label: url}))}
-            />
+            <Fragment>
+              <Dropdown
+                label="Base URL"
+                className="dropdown--url dropdown--base-url"
+                value={baseUrl}
+                setValue={url => {
+                  const to = new URL(window.location.href);
+                  to.searchParams.set('baseUrl', url);
+                  to.searchParams.set('compareUrl', compareUrl);
+                  route(`${to.pathname}${to.search}`);
+                }}
+                options={availableUrlOptions}
+              />
+              <Dropdown
+                label="Compare URL"
+                className="dropdown--url dropdown--compare-url"
+                value={compareUrl}
+                setValue={url => {
+                  const to = new URL(window.location.href);
+                  to.searchParams.set('baseUrl', baseUrl);
+                  to.searchParams.set('compareUrl', url);
+                  route(`${to.pathname}${to.search}`);
+                }}
+                options={availableUrlOptions}
+              />
+            </Fragment>
           ),
         }}
       />
     </Page>
   );
 };
 
-/** @param {{projectSlug: string, partialBuildId: string, baseBuild?: string, compareUrl?: string}} props */
+/** @param {{projectSlug: string, partialBuildId: string, baseBuild?: string, baseUrl?: string, compareUrl?: string}} props */
 export const BuildView = props => {
   const projectLoadingData = useProjectBySlug(props.projectSlug);
   const projectId = projectLoadingData[1] && projectLoadingData[1].id;
@@ -232,6 +254,7 @@ export const BuildView = props => {
         <BuildView_
           project={project}
           build={build}
+          baseUrl={props.baseUrl}
           compareUrl={props.compareUrl}
           ancestorBuild={ancestorBuild}
           runs={runs.concat(baseRuns)}