@backstage/core-components 0.9.6-next.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @backstage/core-components
 
+## 0.10.0
+
+### Minor Changes
+
+- 32204fa794: Add `transformLinkUri` and `transformImageUri` to `MarkdownContent`
+
+### Patch Changes
+
+- 3c440ea77e: Change BackstageIconLinkVertical style to use pallette instead of explicit color
+- c3cfc83af2: Updated JSDoc to be MDX compatible.
+- b4b711bcc2: Fix the EntityLayout header style so that EntityContextMenu button can display in correct shape when user hover on it
+- 944af7f2a8: Work around a bug calling `onChange` twice in `mui` for `RoutedTab` so you don't have to press back twice to navigate through tabs
+- 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`.
+- 8006d0f9bf: Updated dependency `msw` to `^0.44.0`.
+- 15201b1032: Updated dependency `rc-progress` to `3.4.0`.
+- 7e115d42f9: Support displaying subtitle text in `SidebarSubmenuItem`
+- ae746946f7: Improve accessibility for CopyTextButton
+- 385389d23c: Updated to remove usage of the `bursts` object in the theme palette
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.4
+  - @backstage/theme@0.2.16
+  - @backstage/errors@1.1.0
+
+## 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

package/dist/index.d.ts

@@ -177,6 +177,14 @@ interface CopyTextButtonProps {
      * Default: "Text copied to clipboard"
      */
     tooltipText?: string;
+    /**
+     * Text to use as aria-label prop on the button
+     *
+     * @remarks
+     *
+     * Default: "Copy text"
+     */
+    'aria-label'?: string;
 }
 /**
  * Copy text button with visual feedback
@@ -191,7 +199,11 @@ interface CopyTextButtonProps {
  *
  * @example
  *
- * `<CopyTextButton text="My text that I want to be copied to the clipboard" />`
+ * ```
+ * <CopyTextButton
+ *   text="My text that I want to be copied to the clipboard"
+ *   arial-label="Accessible label for this button" />
+ * ```
  */
 declare function CopyTextButton(props: CopyTextButtonProps): JSX.Element;
 
@@ -686,6 +698,8 @@ declare type Props$b = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
     linkTarget?: Options['linkTarget'];
+    transformLinkUri?: (href: string) => string;
+    transformImageUri?: (href: string) => string;
 };
 /**
  * MarkdownContent

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
   });
 });
 
@@ -282,7 +308,8 @@ function CopyTextButton(props) {
   const {
     text,
     tooltipDelay = 1e3,
-    tooltipText = "Text copied to clipboard"
+    tooltipText = "Text copied to clipboard",
+    "aria-label": ariaLabel = "Copy text"
   } = props;
   const errorApi = useApi(errorApiRef);
   const [open, setOpen] = useState(false);
@@ -305,7 +332,8 @@ function CopyTextButton(props) {
     onClose: () => setOpen(false),
     open
   }, /* @__PURE__ */ React.createElement(IconButton, {
-    onClick: handleCopyClick
+    onClick: handleCopyClick,
+    "aria-label": ariaLabel
   }, /* @__PURE__ */ React.createElement(CopyIcon, null))));
 }
 
@@ -1697,14 +1725,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 +3307,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`
@@ -3588,7 +3624,7 @@ const SidebarSubmenuItem = (props) => {
   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);
@@ -3938,7 +3974,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");
@@ -4365,13 +4401,13 @@ function HeaderTabs(props) {
   const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState(selectedIndex != null ? selectedIndex : 0);
   const styles = useStyles$d();
-  const handleChange = (_, index) => {
+  const handleChange = useCallback((_, index) => {
     if (selectedIndex === void 0) {
       setSelectedTab(index);
     }
-    if (onChange)
+    if (onChange && selectedIndex !== index)
       onChange(index);
-  };
+  }, [selectedIndex, onChange]);
   useEffect(() => {
     if (selectedIndex !== void 0) {
       setSelectedTab(selectedIndex);
@@ -5348,16 +5384,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),
@@ -5368,10 +5405,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",
@@ -5574,7 +5611,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"
   }