fix: Version tag should open new tab, related type improvements

closes #3737

app/components/Breadcrumb.tsx

@@ -37,7 +37,7 @@ function Breadcrumb({
   return (
     <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment key={item.to || index}>
+        <React.Fragment key={String(item.to) || index}>
           {item.icon}
           {item.to ? (
             <Item

app/components/Button.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
@@ -155,7 +156,7 @@ export type Props<T> = {
   primary?: boolean;
   fullwidth?: boolean;
   as?: T;
-  to?: string;
+  to?: LocationDescriptor;
   borderOnHover?: boolean;
   href?: string;
   "data-on"?: string;

app/components/ContextMenu/MenuItem.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
@@ -10,7 +11,7 @@ type Props = {
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   href?: string;
   target?: "_blank";
   as?: string | React.ComponentType<any>;

app/components/DocumentMeta.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -35,7 +36,7 @@ type Props = {
   showLastViewed?: boolean;
   showParentDocuments?: boolean;
   document: Document;
-  to?: string;
+  to?: LocationDescriptor;
 };
 
 const DocumentMeta: React.FC<Props> = ({

app/components/DocumentMetaWithViews.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { observer, useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores";
 type Props = {
   document: Document;
   isDraft: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   rtl?: boolean;
 };
 

app/components/List/Item.tsx

@@ -69,7 +69,11 @@ const ListItem = (
   );
 };
 
-const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>`
+const Wrapper = styled.a<{
+  $small?: boolean;
+  $border?: boolean;
+  to?: string;
+}>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) =>

app/components/Sidebar/components/NavLink.tsx

@@ -2,7 +2,7 @@
 // This file is pulled almost 100% from react-router with the addition of one
 // thing, automatic scroll to the active link. It's worth the copy paste because
 // it avoids recalculating the link match again.
-import { Location, createLocation } from "history";
+import { Location, createLocation, LocationDescriptor } from "history";
 import * as React from "react";
 import {
   __RouterContext as RouterContext,
@@ -13,12 +13,12 @@ import { Link } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
 const resolveToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor | ((location: Location) => LocationDescriptor),
   currentLocation: Location
 ) => (typeof to === "function" ? to(currentLocation) : to);
 
 const normalizeToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor,
   currentLocation: Location
 ) => {
   return typeof to === "string"
@@ -30,17 +30,15 @@ const joinClassnames = (...classnames: (string | undefined)[]) => {
   return classnames.filter((i) => i).join(" ");
 };
 
-export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
+export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   activeClassName?: string;
   activeStyle?: React.CSSProperties;
-  className?: string;
   scrollIntoViewIfNeeded?: boolean;
   exact?: boolean;
   isActive?: (match: match | null, location: Location) => boolean;
   location?: Location;
   strict?: boolean;
-  style?: React.CSSProperties;
-  to: string | Record<string, any>;
+  to: LocationDescriptor;
 };
 
 /**

app/components/Sidebar/components/SidebarLink.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -14,8 +15,7 @@ export type DragObject = NavigationNode & {
 };
 
 type Props = Omit<NavLinkProps, "to"> & {
-  to?: string | Record<string, any>;
-  href?: string | Record<string, any>;
+  to?: LocationDescriptor;
   innerRef?: (ref: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;

app/components/Sidebar/components/Version.tsx

@@ -32,6 +32,7 @@ export default function Version() {
 
   return (
     <SidebarLink
+      target="_blank"
       href="https://github.com/outline/outline/releases"
       label={
         <>

app/components/Tab.tsx

@@ -1,17 +1,14 @@
 import { m } from "framer-motion";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import NavLinkWithChildrenFunc from "~/components/NavLink";
+import NavLink from "~/components/NavLink";
 
-type Props = Omit<
-  React.ComponentProps<typeof NavLinkWithChildrenFunc>,
-  "children"
-> & {
+type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   to: string;
   exact?: boolean;
 };
 
-const TabLink = styled(NavLinkWithChildrenFunc)`
+const TabLink = styled(NavLink)`
   position: relative;
   display: inline-flex;
   align-items: center;

app/types.ts

@@ -1,4 +1,4 @@
-import { Location } from "history";
+import { Location, LocationDescriptor } from "history";
 import { TFunction } from "react-i18next";
 import RootStore from "~/stores/RootStore";
 import Document from "~/models/Document";
@@ -40,7 +40,7 @@ export type MenuHeading = {
 export type MenuInternalLink = {
   type: "route";
   title: React.ReactNode;
-  to: string;
+  to: LocationDescriptor;
   visible?: boolean;
   selected?: boolean;
   disabled?: boolean;