fix(web): 🐛 show Subscribe and View buttons for all mirrors in info drawer

closes #1958

web/src/components/SubscribeButtons.tsx

@@ -15,8 +15,12 @@ export const SubscribeButtons = (props: Props) =>
         name={props.name}
         viewUrl={props.viewUrls[0]}
         text="Subscribe"
+        isPrimary={true}
+      />
+      <MirrorButtons
+        name={props.name}
+        viewUrlMirrors={props.viewUrls.slice(1)}
       />
-      <MirrorButtons name={props.name} viewUrlMirrors={props.viewUrls.slice(1)} />
     </>
   ) : null;
 
@@ -34,6 +38,7 @@ const MirrorButtons = (props: MirrorButtonsProps) => (
             name={props.name}
             viewUrl={viewUrlMirror}
             text={`Subscribe (Mirror ${i + 1})`}
+            isPrimary={false}
           />
         ))
       : null}
@@ -44,10 +49,15 @@ interface SubscribeButtonProps {
   name: string;
   viewUrl: string;
   text: string;
+  isPrimary: boolean;
 }
 
 const SubscribeButton = (props: SubscribeButtonProps) => {
-  const buttonProps = buildButtonProps(props.name, props.viewUrl);
+  const buttonProps = buildButtonProps(
+    props.name,
+    props.viewUrl,
+    props.isPrimary
+  );
   return (
     <Button
       disabled={buttonProps.disabled}
@@ -62,8 +72,12 @@ const SubscribeButton = (props: SubscribeButtonProps) => {
   );
 };
 
-const buildButtonProps = (name: string, viewUrl: string) => {
-  let type: ButtonType = "primary";
+const buildButtonProps = (
+  name: string,
+  viewUrl: string,
+  isPrimary: boolean
+) => {
+  let type: ButtonType = isPrimary ? "primary" : "default";
   let disabled: boolean = false;
 
   const hrefLocation = `${encodeURIComponent(viewUrl)}`;

web/src/components/ViewButtons.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { LinkButton } from "./LinkButton";
+import { SearchOutlined } from "@ant-design/icons";
+
+interface Props {
+  name: string;
+  viewUrls: string[];
+}
+
+export const ViewButtons = (props: Props) =>
+  props.viewUrls.length ? (
+    <>
+      <ViewButton name={props.name} viewUrl={props.viewUrls[0]} text="View" />
+      <MirrorButtons
+        name={props.name}
+        viewUrlMirrors={props.viewUrls.slice(1)}
+      />
+    </>
+  ) : null;
+
+interface MirrorButtonsProps {
+  name: string;
+  viewUrlMirrors: string[] | undefined;
+}
+
+const MirrorButtons = (props: MirrorButtonsProps) => (
+  <>
+    {props.viewUrlMirrors && props.viewUrlMirrors.length
+      ? props.viewUrlMirrors.map((viewUrlMirror: string, i: number) => (
+          <ViewButton
+            key={i}
+            name={props.name}
+            viewUrl={viewUrlMirror}
+            text={`View (Mirror ${i + 1})`}
+          />
+        ))
+      : null}
+  </>
+);
+
+interface ViewButtonProps {
+  name: string;
+  viewUrl: string;
+  text: string;
+}
+
+const ViewButton = (props: ViewButtonProps) => {
+  return (
+    <LinkButton
+      url={props.viewUrl}
+      text={props.text}
+      title={`View ${props.name} in its raw format`}
+      icon={<SearchOutlined />}
+    />
+  );
+};

web/src/components/listInfoDrawer/ListInfoDrawer.tsx

@@ -10,7 +10,6 @@ import {
   HomeOutlined,
   MailOutlined,
   MessageOutlined,
-  SearchOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
 import React, { useEffect, useState } from "react";
@@ -20,6 +19,7 @@ import { Description } from "../Description";
 import { LanguageCloud } from "../languageCloud";
 import { LicenseTag } from "../LicenseTag";
 import { LinkButton } from "../LinkButton";
+import { ViewButtons } from "../ViewButtons";
 import { Maintainers } from "../maintainers";
 import { RouteComponentProps } from "react-router-dom";
 import { SoftwareCloud } from "../softwareCloud";
@@ -73,7 +73,7 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
     };
   }, [list, originalTitle, listName]);
   const viewUrlModels = list?.viewUrls.filter((u) => u.segmentNumber === 1);
-  const viewUrls = viewUrlModels == null ? [] : viewUrlModels.map(u => u.url);
+  const viewUrls = viewUrlModels == null ? [] : viewUrlModels.map((u) => u.url);
   return list ? (
     <Drawer
       visible={true}
@@ -100,18 +100,10 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
       <Divider />
       <ButtonGroup style={{ display: "inherit" }}>
         {viewUrls.length && (
-          <SubscribeButtons
-            name={list.name}
-            viewUrls={viewUrls}
-          />
+          <SubscribeButtons name={list.name} viewUrls={viewUrls} />
         )}
-        {viewUrlModels && (
-          <LinkButton
-            url={viewUrls[0]}
-            text="View"
-            title={`View ${list.name} in its raw format`}
-            icon={<SearchOutlined />}
-          />
+        {viewUrls.length && (
+          <ViewButtons name={list.name} viewUrls={viewUrls} />
         )}
         <LinkButton
           url={list.homeUrl}