Merge pull request #29517 from autodesk-forks/nikolarAutodesk/pluginHomeUpdates

[plugin-home]  [plugin-home-react] export ContentModal and make docsLinkTitle prop more flexible

plugins/home-react/report.api.md

@@ -5,9 +5,19 @@
 ```ts
 import { Extension } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX as JSX_3 } from 'react';
+import { Overrides } from '@material-ui/core/styles/overrides';
 import { RJSFSchema } from '@rjsf/utils';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { UiSchema } from '@rjsf/utils';
 
+// @public (undocumented)
+export type BackstageOverrides = Overrides & {
+  [Name in keyof PluginHomeComponentsNameToClassKey]?: Partial<
+    StyleRules<PluginHomeComponentsNameToClassKey[Name]>
+  >;
+};
+
 // @public (undocumented)
 export type CardConfig = {
   layout?: CardLayout;
@@ -52,6 +62,15 @@ export type ComponentRenderer = {
   Renderer?: (props: RendererProps) => JSX.Element;
 };
 
+// @public
+export const ContentModal: (props: ContentModalProps) => JSX_2.Element;
+
+// @public
+export type ContentModalProps = {
+  modalContent: JSX_3.Element;
+  linkContent: string | JSX_3.Element;
+};
+
 // @public
 export function createCardExtension<T>(options: {
   title?: string;
@@ -62,6 +81,14 @@ export function createCardExtension<T>(options: {
   settings?: CardSettings;
 }): Extension<(props: CardExtensionProps<T>) => JSX_2.Element>;
 
+// @public (undocumented)
+export type PluginHomeComponentsNameToClassKey = {
+  PluginHomeContentModal: PluginHomeContentModalClassKey;
+};
+
+// @public (undocumented)
+export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText';
+
 // @public (undocumented)
 export type RendererProps = {
   title?: string;

plugins/home-react/src/components/ContentModal.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { JSX, useState } from 'react';
+import { Link } from '@backstage/core-components';
+import Modal from '@material-ui/core/Modal';
+import Box from '@material-ui/core/Box';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+/** @public */
+export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText';
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    contentModal: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '80%',
+      height: 'auto',
+    },
+    linkText: {
+      marginBottom: theme.spacing(1.5),
+    },
+  }),
+  { name: 'PluginHomeContentModal' },
+);
+
+/**
+ * Props customizing the <ContentModal/> component.
+ *
+ * @public
+ */
+export type ContentModalProps = {
+  modalContent: JSX.Element;
+  linkContent: string | JSX.Element;
+};
+
+/**
+ * A component to expand given content into a full screen modal.
+ *
+ * @public
+ */
+export const ContentModal = (props: ContentModalProps) => {
+  const { modalContent, linkContent } = props;
+  const styles = useStyles();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={styles.linkText} data-testid="content-modal-container">
+      <Link
+        to="#"
+        component="button"
+        variant="h6"
+        underline="none"
+        onClick={() => setOpen(true)}
+      >
+        {linkContent}
+      </Link>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="content-modal"
+        data-testid="content-modal"
+      >
+        <Box className={styles.contentModal} data-testid="content-modal-open">
+          {modalContent}
+        </Box>
+      </Modal>
+    </div>
+  );
+};

plugins/home-react/src/components/index.ts

@@ -15,3 +15,7 @@
  */
 
 export { SettingsModal } from './SettingsModal';
+export { ContentModal } from './ContentModal';
+
+export type { PluginHomeContentModalClassKey } from './ContentModal';
+export type { ContentModalProps } from './ContentModal';

plugins/home-react/src/index.ts

@@ -30,3 +30,4 @@ export type {
   CardSettings,
   CardConfig,
 } from './extensions';
+export * from './overridableComponents';

plugins/home-react/src/overridableComponents.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Overrides } from '@material-ui/core/styles/overrides';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
+import { PluginHomeContentModalClassKey } from './';
+
+/** @public */
+export type PluginHomeComponentsNameToClassKey = {
+  PluginHomeContentModal: PluginHomeContentModalClassKey;
+};
+
+/** @public */
+export type BackstageOverrides = Overrides & {
+  [Name in keyof PluginHomeComponentsNameToClassKey]?: Partial<
+    StyleRules<PluginHomeComponentsNameToClassKey[Name]>
+  >;
+};
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends PluginHomeComponentsNameToClassKey {}
+}