@backstage/core-components 0.12.1-next.3 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @backstage/core-components
 
+## 0.12.1
+
+### Patch Changes
+
+- a236a8830d: Update sidebar icon alignment
+- d3fea4ae0a: Internal fixes to avoid implicit usage of globals
+- b05dcd5530: Move the `zod` dependency to a version that does not collide with other libraries
+- ea4a5be8f3: Create a variable for minimum height and add a prop named 'fit' for determining if the graph height should grow or be contained.
+- 2e701b3796: Internal refactor to use `react-router-dom` rather than `react-router`.
+- d2e3bf6737: Made AlertDisplay not crash on undefined messages
+- 64a579a998: Add items prop to SupportButton. This prop can be used to override the items that would otherwise be grabbed from the config.
+- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest MUI `Button`
+- 3280711113: Updated dependency `msw` to `^0.49.0`.
+- 19356df560: Updated dependency `zen-observable` to `^0.9.0`.
+- c3fa90e184: Updated dependency `zen-observable` to `^0.10.0`.
+- 5fb6d5e92e: Updated dependency `@react-hookz/web` to `^19.0.0`.
+- 17a8e32f39: Updated dependency `rc-progress` to `3.4.1`.
+- 146378c146: Updated dependency `@react-hookz/web` to `^20.0.0`.
+- dfc8edf9c5: Internal refactor to avoid usage of deprecated symbols.
+- 8015ff1258: Tweaked wording to use inclusive terminology
+- 830687539f: Sync components in @backstage/core-components with the Component Design Guidelines
+- 1ae86ab5fb: Added an option to allow the `AlertMessage` to be self-closing. This is done with a new `display` property that is set to `transient` on the `AlertMessage` when triggering a message to the `AlertApi`. The length of time that these transient messages stay open for can be set using the `transientTimeoutMs` prop on the `AlertDisplay` in the `App.tsx`. Here is an example:
+
+  ```diff
+    const App = () => (
+      <AppProvider>
+  +     <AlertDisplay transientTimeoutMs={2500} />
+        <OAuthRequestDialog />
+        <AppRouter>
+          <Root>{routes}</Root>
+        </AppRouter>
+      </AppProvider>
+    );
+  ```
+
+  The above example will set the transient timeout to 2500ms from the default of 5000ms
+
+- 16e31e690f: InfoCard - Remove subheader container when there is not a subheader or icon
+- a5a2d12298: Added option to pass additional headers to `<ProxiedSignInPage />`, which are passed along with the request to the underlying provider
+- 91bba69ef8: Internal refactor to remove deprecated symbols.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.2.0
+  - @backstage/version-bridge@1.0.3
+  - @backstage/errors@1.1.4
+  - @backstage/config@1.0.5
+  - @backstage/theme@0.2.16
+
+## 0.12.1-next.4
+
+### Patch Changes
+
+- b05dcd5530: Move the `zod` dependency to a version that does not collide with other libraries
+- 2e701b3796: Internal refactor to use `react-router-dom` rather than `react-router`.
+- a5a2d12298: Added option to pass additional headers to `<ProxiedSignInPage />`, which are passed along with the request to the underlying provider
+- Updated dependencies
+  - @backstage/config@1.0.5-next.1
+  - @backstage/core-plugin-api@1.2.0-next.2
+  - @backstage/errors@1.1.4-next.1
+  - @backstage/theme@0.2.16
+  - @backstage/version-bridge@1.0.3-next.0
+
 ## 0.12.1-next.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1468,6 +1468,11 @@ declare type ProxiedSignInPageProps = SignInPageProps & {
      * a properly configured auth provider ID in the auth backend.
      */
     provider: string;
+    /**
+     * Optional headers which are passed along with the request to the
+     * underlying provider
+     */
+    headers?: HeadersInit | (() => HeadersInit) | (() => Promise<HeadersInit>);
 };
 /**
  * A sign-in page that has no user interface of its own. Instead, it relies on

package/dist/index.esm.js

@@ -12,7 +12,7 @@ import Button$1 from '@material-ui/core/Button';
 import MaterialLink from '@material-ui/core/Link';
 import classNames from 'classnames';
 import { trimEnd, isEqual, orderBy, isMatch, transform } from 'lodash';
-import { Link as Link$1, createRoutesFromChildren, Route as Route$1, useSearchParams, useLocation, useResolvedPath as useResolvedPath$1, resolvePath } from 'react-router-dom';
+import { Link as Link$1, createRoutesFromChildren, Route as Route$1, useSearchParams, useLocation, useResolvedPath as useResolvedPath$1, resolvePath, useNavigate, useParams, useRoutes, matchRoutes } from 'react-router-dom';
 import Box from '@material-ui/core/Box';
 import LightAsync from 'react-syntax-highlighter/dist/esm/light-async';
 import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';
@@ -90,7 +90,6 @@ import Popover from '@material-ui/core/Popover';
 import qs from 'qs';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import { Helmet } from 'react-helmet';
-import { useLocation as useLocation$1, useNavigate, useParams, useRoutes, matchRoutes } from 'react-router';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import Drawer from '@material-ui/core/Drawer';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -3601,7 +3600,7 @@ const MobileSidebar = (props) => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const { children } = props;
   const classes = useStyles$m({ sidebarConfig });
-  const location = useLocation$1();
+  const location = useLocation();
   const [selectedMenuItemIndex, setSelectedMenuItemIndex] = useState(-1);
   useEffect(() => {
     setSelectedMenuItemIndex(-1);
@@ -4008,8 +4007,9 @@ const SidebarSubmenuItem = (props) => {
       return isActive;
     });
     return /* @__PURE__ */ React.createElement(Box, { className: classes.itemContainer }, /* @__PURE__ */ React.createElement(Tooltip, { title, enterDelay: 500, enterNextDelay: 500 }, /* @__PURE__ */ React.createElement(
-      "button",
+      Button$1,
       {
+        role: "button",
         onClick: handleClickDropdown,
         onTouchStart: (e) => e.stopPropagation(),
         className: classNames(
@@ -4228,7 +4228,8 @@ const makeSidebarStyles = (sidebarConfig) => makeStyles(
         marginRight: -theme.spacing(2),
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        lineHeight: "0"
       },
       searchRoot: {
         marginBottom: 12
@@ -4376,8 +4377,8 @@ const SidebarItemBase = forwardRef((props, ref) => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
   const { isOpen } = useSidebarOpenState();
-  const divStyle = !isOpen && hasSubmenu ? { display: "flex", marginLeft: "24px" } : {};
-  const displayItemIcon = /* @__PURE__ */ React.createElement(Box, { style: divStyle }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), !isOpen && hasSubmenu ? /* @__PURE__ */ React.createElement(ArrowRightIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  const divStyle = !isOpen && hasSubmenu ? { display: "flex", marginLeft: "20px" } : { lineHeight: "0" };
+  const displayItemIcon = /* @__PURE__ */ React.createElement(Box, { style: divStyle }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), !isOpen && hasSubmenu ? /* @__PURE__ */ React.createElement(ArrowRightIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(React.Fragment, null));
   const itemIcon = /* @__PURE__ */ React.createElement(
     Badge,
     {
@@ -4402,7 +4403,7 @@ const SidebarItemBase = forwardRef((props, ref) => {
     )
   };
   if (isButtonItem(props)) {
-    return /* @__PURE__ */ React.createElement("button", { "aria-label": text, ...childProps, ref }, content);
+    return /* @__PURE__ */ React.createElement(Button$1, { role: "button", "aria-label": text, ...childProps, ref }, content);
   }
   return /* @__PURE__ */ React.createElement(
     WorkaroundNavLink,
@@ -4596,8 +4597,9 @@ const SidebarExpandButton = () => {
     setOpen(!isOpen);
   };
   return /* @__PURE__ */ React.createElement(
-    "button",
+    Button$1,
     {
+      role: "button",
       onClick: handleClick,
       className: classes.expandButton,
       "aria-label": "Expand Sidebar",
@@ -6164,11 +6166,14 @@ class ProxiedSignInIdentity {
   }
   async fetchSession() {
     const baseUrl = await this.options.discoveryApi.getBaseUrl("auth");
+    const headers = typeof this.options.headers === "function" ? await this.options.headers() : this.options.headers;
+    const mergedHeaders = new Headers(headers);
+    mergedHeaders.set("X-Requested-With", "XMLHttpRequest");
     const response = await fetch(
       `${baseUrl}/${this.options.provider}/refresh`,
       {
         signal: this.abortController.signal,
-        headers: { "x-requested-with": "XMLHttpRequest" },
+        headers: mergedHeaders,
         credentials: "include"
       }
     );
@@ -6184,7 +6189,8 @@ const ProxiedSignInPage = (props) => {
   const [{ status, error }, { execute }] = useAsync(async () => {
     const identity = new ProxiedSignInIdentity({
       provider: props.provider,
-      discoveryApi
+      discoveryApi,
+      headers: props.headers
     });
     await identity.start();
     props.onSignInSuccess(identity);