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

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

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -18,7 +18,7 @@ import { JSX } from 'react';
 import { Link } from '@backstage/core-components';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
-import { ContentModal } from './ContentModal';
+import { ContentModal } from '@backstage/plugin-home-react';
 import { useStyles } from './styles';
 
 /**
@@ -30,11 +30,15 @@ export type QuickStartCardProps = {
   /** The modal link title */
   modalTitle?: string | JSX.Element;
   /** The link to docs title */
-  docsLinkTitle?: string;
+  docsLinkTitle?: string | JSX.Element;
   /** The link to docs */
   docsLink?: string;
-  /** The video to play on the card */
+  /** The video to play on the card
+   * @deprecated This will be removed in the future, please use `additionalContent` instead
+   */
   video?: JSX.Element;
+  /** Additional card content */
+  additionalContent?: JSX.Element;
   /** A quickstart image to display on the card */
   image: JSX.Element;
   /** The card description*/
@@ -78,7 +82,8 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
           </Link>
         </Grid>
       </Grid>
-      {props.video && props.video}
+      {(props.additionalContent && props.additionalContent) ||
+        (props.video && props.video)}
     </>
   );
 };

plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx

@@ -1,57 +0,0 @@
-/*
- * 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 { useStyles } from './styles';
-
-export type ContentModalProps = {
-  modalContent: JSX.Element;
-  linkContent: string | JSX.Element;
-};
-
-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/src/homePageComponents/QuickStart/QuickStart.stories.tsx

@@ -18,6 +18,7 @@ import { QuickStartCard } from '../../plugin';
 import { ComponentType, PropsWithChildren } from 'react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import Grid from '@material-ui/core/Grid';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import ContentImage from './static/backstageSystemModel.png';
 
 export default {
@@ -61,6 +62,40 @@ export const Customized = () => {
           />
         }
         cardDescription="Backstage system model will help you create new entities"
+        additionalContent={
+          <p>
+            This is a custom description for the Quick Start card. It can be
+            used to provide additional information or context about the Quick
+            Start process.
+          </p>
+        }
+      />
+    </Grid>
+  );
+};
+
+export const CustomDocLink = () => {
+  return (
+    <Grid item xs={12} md={6}>
+      <QuickStartCard
+        title="Onboarding to the Catalog"
+        modalTitle="Onboarding Quick Start"
+        docsLinkTitle={
+          <>
+            <OpenInNewIcon fontSize="small" />
+            Learn more with getting started docs
+          </>
+        }
+        docsLink="https://backstage.io/docs/getting-started"
+        image={
+          <img
+            src={ContentImage}
+            alt="quick start"
+            width="100%"
+            height="100%"
+          />
+        }
+        cardDescription="Backstage system model will help you create new entities"
       />
     </Grid>
   );