@backstage/core-components 0.9.6-next.0 → 0.10.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @backstage/core-components
 
+## 0.10.0-next.3
+
+### Patch Changes
+
+- 7f5e79961d: Fix relative `sub-paths` by concatenating the app's base path with them.
+- a70869e775: Updated dependency `msw` to `^0.43.0`.
+- 693990d4fe: Updated dependency `@react-hookz/web` to `^15.0.0`.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.4-next.0
+
+## 0.10.0-next.2
+
+### Minor Changes
+
+- 32204fa794: Add `transformLinkUri` and `transformImageUri` to `MarkdownContent`
+
+### Patch Changes
+
+- b4b711bcc2: Fix the EntityLayout header style so that EntityContextMenu button can display in correct shape when user hover on it
+- 15201b1032: Updated dependency `rc-progress` to `3.4.0`.
+- 385389d23c: Updated to remove usage of the `bursts` object in the theme palette
+- Updated dependencies
+  - @backstage/theme@0.2.16-next.1
+
+## 0.9.6-next.1
+
+### Patch Changes
+
+- 3c440ea77e: Change BackstageIconLinkVertical style to use pallette instead of explicit color
+- 7e115d42f9: Support displaying subtitle text in `SidebarSubmenuItem`
+- Updated dependencies
+  - @backstage/errors@1.1.0-next.0
+  - @backstage/theme@0.2.16-next.0
+
 ## 0.9.6-next.0
 
 ### Patch Changes

package/dist/index.d.ts

@@ -686,6 +686,8 @@ declare type Props$b = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
     linkTarget?: Options['linkTarget'];
+    transformLinkUri?: (href: string) => string;
+    transformImageUri?: (href: string) => string;
 };
 /**
  * MarkdownContent
@@ -1504,6 +1506,7 @@ declare type SidebarSubmenuItemDropdownItem = {
  * Holds submenu item content.
  *
  * title: Text content of submenu item
+ * subtitle: A subtitle displayed under the main title
  * to: Path to navigate to when item is clicked
  * icon: Icon displayed on the left of text content
  * dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
@@ -1512,6 +1515,7 @@ declare type SidebarSubmenuItemDropdownItem = {
  */
 declare type SidebarSubmenuItemProps = {
     title: string;
+    subtitle?: string;
     to?: string;
     icon?: IconComponent;
     dropdownItems?: SidebarSubmenuItemDropdownItem[];

package/dist/index.esm.js

@@ -3,14 +3,15 @@ import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { Alert } from '@material-ui/lab';
-import { useApi, alertApiRef, useAnalytics, errorApiRef, storageApiRef, useApp, oauthRequestApiRef, useApiHolder, configApiRef, useElementFilter, attachComponentData, discoveryApiRef } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef, useAnalytics, configApiRef, errorApiRef, storageApiRef, useApp, oauthRequestApiRef, useApiHolder, useElementFilter, attachComponentData, discoveryApiRef } from '@backstage/core-plugin-api';
 import pluralize from 'pluralize';
 import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, styled, ThemeProvider } from '@material-ui/core/styles';
 import MaterialAvatar from '@material-ui/core/Avatar';
 import Button$1 from '@material-ui/core/Button';
 import classNames from 'classnames';
 import Link$1 from '@material-ui/core/Link';
-import { Link as Link$2, useSearchParams, useLocation, useResolvedPath, resolvePath } from 'react-router-dom';
+import { Link as Link$2, useSearchParams, useLocation, useResolvedPath as useResolvedPath$1, resolvePath } from 'react-router-dom';
+import { trimEnd, isEqual, orderBy, isMatch, transform } from 'lodash';
 import Tooltip from '@material-ui/core/Tooltip';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
@@ -86,7 +87,6 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Popover from '@material-ui/core/Popover';
-import { isEqual, orderBy, isMatch, transform } from 'lodash';
 import qs from 'qs';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import { Helmet } from 'react-helmet';
@@ -224,6 +224,31 @@ const useStyles$R = makeStyles({
   }
 }, { name: "Link" });
 const isExternalUri = (uri) => /^([a-z+.-]+):/.test(uri);
+const useBaseUrl = () => {
+  try {
+    const config = useApi(configApiRef);
+    return config.getOptionalString("app.baseUrl");
+  } catch {
+    return void 0;
+  }
+};
+const useBasePath = () => {
+  var _a;
+  const base = "http://dummy.dev";
+  const url = (_a = useBaseUrl()) != null ? _a : "/";
+  const { pathname } = new URL(url, base);
+  return trimEnd(pathname, "/");
+};
+const useResolvedPath = (uri) => {
+  let resolvedPath = String(uri);
+  const basePath = useBasePath();
+  const external = isExternalUri(resolvedPath);
+  const startsWithBasePath = resolvedPath.startsWith(basePath);
+  if (!external && !startsWithBasePath) {
+    resolvedPath = basePath.concat(resolvedPath);
+  }
+  return resolvedPath;
+};
 const getNodeText = (node) => {
   var _a;
   if (node instanceof Array) {
@@ -240,7 +265,7 @@ const getNodeText = (node) => {
 const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
   const classes = useStyles$R();
   const analytics = useAnalytics();
-  const to = String(props.to);
+  const to = useResolvedPath(props.to);
   const linkText = getNodeText(props.children) || to;
   const external = isExternalUri(to);
   const newWindow = external && !!/^https?:/.exec(to);
@@ -251,19 +276,20 @@ const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
     }
   };
   return external ? /* @__PURE__ */ React.createElement(Link$1, {
+    ...newWindow ? { target: "_blank", rel: "noopener" } : {},
+    ...props,
     ref,
     href: to,
     onClick: handleClick,
-    ...newWindow ? { target: "_blank", rel: "noopener" } : {},
-    ...props,
     className: classNames(classes.externalLink, props.className)
   }, props.children, /* @__PURE__ */ React.createElement("span", {
     className: classes.visuallyHidden
   }, ", Opens in a new window")) : /* @__PURE__ */ React.createElement(Link$1, {
+    ...props,
     ref,
     component: Link$2,
-    onClick: handleClick,
-    ...props
+    to,
+    onClick: handleClick
   });
 });
 
@@ -1384,7 +1410,7 @@ const useIconStyles = makeStyles((theme) => ({
     textAlign: "center"
   },
   disabled: {
-    color: "gray",
+    color: theme.palette.text.secondary,
     cursor: "default"
   },
   primary: {
@@ -1697,14 +1723,22 @@ const components = {
   }
 };
 function MarkdownContent(props) {
-  const { content, dialect = "gfm", linkTarget } = props;
+  const {
+    content,
+    dialect = "gfm",
+    linkTarget,
+    transformLinkUri,
+    transformImageUri
+  } = props;
   const classes = useStyles$B();
   return /* @__PURE__ */ React.createElement(ReactMarkdown, {
     remarkPlugins: dialect === "gfm" ? [gfm] : [],
     className: classes.markdown,
     children: content,
     components,
-    linkTarget
+    linkTarget,
+    transformLinkUri,
+    transformImageUri
   });
 }
 
@@ -3271,13 +3305,13 @@ const useStyles$l = makeStyles((theme) => ({
   }),
   overlayHeader: {
     display: "flex",
-    color: theme.palette.bursts.fontColor,
+    color: theme.palette.text.primary,
     alignItems: "center",
     justifyContent: "space-between",
     padding: theme.spacing(2, 3)
   },
   overlayHeaderClose: {
-    color: theme.palette.bursts.fontColor
+    color: theme.palette.text.primary
   },
   marginMobileSidebar: (props) => ({
     marginBottom: `${props.sidebarConfig.mobileSidebarHeight}px`
@@ -3545,6 +3579,13 @@ const useStyles$j = makeStyles((theme) => ({
     fontSize: 14,
     whiteSpace: "nowrap",
     overflow: "hidden",
+    "text-overflow": "ellipsis",
+    lineHeight: 1
+  },
+  subtitle: {
+    fontSize: 10,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     "text-overflow": "ellipsis"
   },
   dropdownArrow: {
@@ -3575,13 +3616,13 @@ const useStyles$j = makeStyles((theme) => ({
   }
 }), { name: "BackstageSidebarSubmenuItem" });
 const SidebarSubmenuItem = (props) => {
-  const { title, to, icon: Icon, dropdownItems } = props;
+  const { title, subtitle, to, icon: Icon, dropdownItems } = props;
   const classes = useStyles$j();
   const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   const closeSubmenu = () => {
     setIsHoveredOn(false);
   };
-  const toLocation = useResolvedPath(to != null ? to : "");
+  const toLocation = useResolvedPath$1(to != null ? to : "");
   const currentLocation = useLocation();
   let isActive = isLocationMatch(currentLocation, toLocation);
   const [showDropDown, setShowDropDown] = useState(false);
@@ -3609,7 +3650,10 @@ const SidebarSubmenuItem = (props) => {
     }), /* @__PURE__ */ React.createElement(Typography, {
       variant: "subtitle1",
       className: classes.label
-    }, title), showDropDown ? /* @__PURE__ */ React.createElement(ArrowDropUpIcon, {
+    }, title, /* @__PURE__ */ React.createElement("br", null), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+      variant: "caption",
+      className: classes.subtitle
+    }, subtitle)), showDropDown ? /* @__PURE__ */ React.createElement(ArrowDropUpIcon, {
       className: classes.dropdownArrow
     }) : /* @__PURE__ */ React.createElement(ArrowDropDownIcon, {
       className: classes.dropdownArrow
@@ -3647,7 +3691,10 @@ const SidebarSubmenuItem = (props) => {
   }), /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
-  }, title))));
+  }, title, /* @__PURE__ */ React.createElement("br", null), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+    variant: "caption",
+    className: classes.subtitle
+  }, subtitle)))));
 };
 
 const useStyles$i = makeStyles((theme) => ({
@@ -3925,7 +3972,7 @@ const WorkaroundNavLink = React.forwardRef(function WorkaroundNavLinkWithRef({
   ...rest
 }, ref) {
   let { pathname: locationPathname } = useLocation();
-  let { pathname: toPathname } = useResolvedPath(to);
+  let { pathname: toPathname } = useResolvedPath$1(to);
   if (!caseSensitive) {
     locationPathname = locationPathname.toLocaleLowerCase("en-US");
     toPathname = toPathname.toLocaleLowerCase("en-US");
@@ -5335,16 +5382,17 @@ const useStyles$5 = makeStyles((theme) => ({
     flexGrow: 1
   },
   rightItemsBox: {
-    width: "auto"
+    width: "auto",
+    alignItems: "center"
   },
   title: {
-    color: theme.palette.bursts.fontColor,
+    color: theme.page.fontColor,
     wordBreak: "break-word",
     fontSize: theme.typography.h3.fontSize,
     marginBottom: 0
   },
   subtitle: {
-    color: theme.palette.bursts.fontColor,
+    color: theme.page.fontColor,
     opacity: 0.8,
     display: "inline-block",
     marginTop: theme.spacing(1),
@@ -5355,10 +5403,10 @@ const useStyles$5 = makeStyles((theme) => ({
     fontSize: 11,
     opacity: 0.8,
     marginBottom: theme.spacing(1),
-    color: theme.palette.bursts.fontColor
+    color: theme.page.fontColor
   },
   breadcrumb: {
-    color: theme.palette.bursts.fontColor
+    color: theme.page.fontColor
   },
   breadcrumbType: {
     fontSize: "inherit",
@@ -5561,7 +5609,7 @@ const styles$1 = (theme) => createStyles({
   root: {
     color: theme.palette.common.white,
     padding: theme.spacing(2, 2, 3),
-    backgroundImage: theme.palette.bursts.gradient.linear,
+    backgroundImage: theme.getPageTheme({ themeId: "card" }).backgroundImage,
     backgroundPosition: 0,
     backgroundSize: "inherit"
   }