Merge pull request #43 from gomezcapg/fix/use_core_backstage_link_button

Fix/use core backstage link button
drodil · Mar 12, 2023 · ef0c31b · ef0c31b
2 parents 069da29 + a04edc1
commit ef0c31b
Show file tree

Hide file tree

Showing 16 changed files with 80 additions and 60 deletions.
diff --git a/plugins/qeta/src/components/AskForm/AskForm.tsx b/plugins/qeta/src/components/AskForm/AskForm.tsx
@@ -1,5 +1,5 @@
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import { Button, TextField } from '@material-ui/core';
+import { TextField, Button } from '@material-ui/core';
 import { Alert, Autocomplete } from '@material-ui/lab';
 import React, { useEffect, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -10,7 +10,7 @@ import {
   QuestionRequest,
   QuestionResponse,
 } from '../../api';
-import { useStyles } from '../../utils/hooks';
+import { useStyles, useBasePath } from '../../utils/hooks';
 import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
@@ -76,6 +76,7 @@ export const AskForm = (props: {
   onPost?: (question: QuestionResponse) => void;
 }) => {
   const { id, entity, onPost } = props;
+  const base_path = useBasePath();
   const navigate = useNavigate();
   const [entityRef, setEntityRef] = React.useState(entity);
   const [values, setValues] = React.useState(getDefaultValues());
@@ -123,7 +124,7 @@ export const AskForm = (props: {
           if (onPost) {
             onPost(q);
           } else {
-            navigate(`/qeta/questions/${q.id}`);
+            navigate(`${base_path}/qeta/questions/${q.id}`);
           }
         })
         .catch(_e => setError(true));
@@ -137,7 +138,7 @@ export const AskForm = (props: {
           return;
         }
         reset();
-        navigate(`/qeta/questions/${q.id}`);
+        navigate(`${base_path}/qeta/questions/${q.id}`);
       })
       .catch(_e => setError(true));
   };

diff --git a/plugins/qeta/src/components/AskPage/AskPage.tsx b/plugins/qeta/src/components/AskPage/AskPage.tsx
@@ -1,5 +1,6 @@
 import { Content, ContentHeader, InfoCard } from '@backstage/core-components';
-import { Button, Grid } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
 import React from 'react';
 
 import { AskForm } from '../AskForm/AskForm';
@@ -11,9 +12,9 @@ export const AskPage = () => {
   return (
     <Content>
       <ContentHeader title={id ? 'Edit question' : 'Ask question'}>
-        <Button href="/qeta" startIcon={<HomeOutlined />}>
+        <LinkButton to="/qeta" startIcon={<HomeOutlined />}>
           Back to questions
-        </Button>
+        </LinkButton>
       </ContentHeader>
       <Grid container spacing={3} direction="column">
         <Grid item>

diff --git a/plugins/qeta/src/components/Buttons/AskQuestionButton.tsx b/plugins/qeta/src/components/Buttons/AskQuestionButton.tsx
@@ -1,23 +1,23 @@
 import HelpOutline from '@material-ui/icons/HelpOutline';
-import { Button } from '@material-ui/core';
 import React from 'react';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { qetaCreateQuestionPermission } from '@drodil/backstage-plugin-qeta-common';
+import { LinkButton } from '@backstage/core-components';
 
 export const AskQuestionButton = () => {
   return (
     <RequirePermission
       permission={qetaCreateQuestionPermission}
       errorPage={<></>}
     >
-      <Button
+      <LinkButton
         variant="contained"
-        href="/qeta/ask"
+        to="/qeta/ask"
         color="primary"
         startIcon={<HelpOutline />}
       >
         Ask question
-      </Button>
+      </LinkButton>
     </RequirePermission>
   );
 };
diff --git a/plugins/qeta/src/components/DeleteModal/DeleteModal.tsx b/plugins/qeta/src/components/DeleteModal/DeleteModal.tsx
@@ -1,9 +1,10 @@
 import { AnswerResponse, qetaApiRef, QuestionResponse } from '../../api';
-import { Backdrop, Box, Button, Modal, Typography } from '@material-ui/core';
+import { Backdrop, Box, Modal, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import Delete from '@material-ui/icons/Delete';
 import React from 'react';
-import { useStyles } from '../../utils/hooks';
+import { useStyles, useBasePath } from '../../utils/hooks';
 import { useApi } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,6 +15,7 @@ export const DeleteModal = (props: {
   question?: QuestionResponse;
 }) => {
   const qetaApi = useApi(qetaApiRef);
+  const base_path = useBasePath();
   const navigate = useNavigate();
   const { entity, open, question, onClose } = props;
   const styles = useStyles();
@@ -32,7 +34,7 @@ export const DeleteModal = (props: {
         .then(ret => {
           if (ret) {
             onClose();
-            navigate(`/qeta`);
+            navigate(`${base_path}/qeta`);
           } else {
             setError(true);
           }

diff --git a/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx b/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
 import { Content, ContentHeader } from '@backstage/core-components';
 // @ts-ignore
 import RelativeTime from 'react-relative-time';
@@ -13,13 +13,13 @@ export const FavoritePage = () => {
   return (
     <Content>
       <ContentHeader title="Your favorite questions">
-        <Button
-          href="/qeta"
+        <LinkButton
+          to="/qeta"
           className={styles.marginRight}
           startIcon={<HomeOutlined />}
         >
           Back to questions
-        </Button>
+        </LinkButton>
         <AskQuestionButton />
       </ContentHeader>
       <QuestionsContainer favorite />

diff --git a/plugins/qeta/src/components/QuestionPage/AnswerCard.tsx b/plugins/qeta/src/components/QuestionPage/AnswerCard.tsx
@@ -1,12 +1,6 @@
 import { AnswerResponse, QuestionResponse } from '../../api';
-import {
-  Box,
-  Card,
-  CardContent,
-  Grid,
-  Link,
-  Typography,
-} from '@material-ui/core';
+import { Box, Card, CardContent, Grid, Typography } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 import React from 'react';
 import { MarkdownContent } from '@backstage/core-components';
 import { VoteButtons } from './VoteButtons';
@@ -64,14 +58,14 @@ export const AnswerCard = (props: {
                     <Box className={styles.questionCardActions}>
                       <Link
                         underline="none"
-                        href="#"
+                        to="#"
                         onClick={handleDeleteModalOpen}
                       >
                         Delete
                       </Link>
                       <Link
                         underline="none"
-                        href="#"
+                        to="#"
                         onClick={() => setEditMode(true)}
                       >
                         Edit

diff --git a/plugins/qeta/src/components/QuestionPage/AnswerForm.tsx b/plugins/qeta/src/components/QuestionPage/AnswerForm.tsx
@@ -1,5 +1,5 @@
 import { WarningPanel } from '@backstage/core-components';
-import { Button, Typography } from '@material-ui/core';
+import { Typography, Button } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import {

diff --git a/plugins/qeta/src/components/QuestionPage/AuthorBox.tsx b/plugins/qeta/src/components/QuestionPage/AuthorBox.tsx
@@ -1,4 +1,5 @@
-import { Avatar, Box, Grid, Link, Typography } from '@material-ui/core';
+import { Avatar, Box, Grid, Typography } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 import { formatEntityName } from '../../utils/utils';
 import React, { useEffect } from 'react';
 import { useStyles } from '../../utils/hooks';
@@ -57,7 +58,7 @@ export const AuthorBox = (props: {
           </Avatar>
         </Grid>
         <Grid item xs={10} style={{ paddingTop: 0 }}>
-          <Link href={`/qeta/users/${entity.author}`}>{name}</Link>
+          <Link to={`/qeta/users/${entity.author}`}>{name}</Link>
         </Grid>
       </Grid>
     </Box>

diff --git a/plugins/qeta/src/components/QuestionPage/QuestionCard.tsx b/plugins/qeta/src/components/QuestionPage/QuestionCard.tsx
@@ -1,12 +1,6 @@
 import { QuestionResponse } from '../../api';
-import {
-  Box,
-  Card,
-  CardContent,
-  Grid,
-  Link,
-  Typography,
-} from '@material-ui/core';
+import { Box, Card, CardContent, Grid, Typography } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 import React from 'react';
 import { MarkdownContent } from '@backstage/core-components';
 import { VoteButtons } from './VoteButtons';
@@ -52,14 +46,14 @@ export const QuestionCard = (props: { question: QuestionResponse }) => {
                   <Box className={styles.questionCardActions}>
                     <Link
                       underline="none"
-                      href="#"
+                      to="#"
                       onClick={handleDeleteModalOpen}
                     >
                       Delete
                     </Link>
                     <Link
                       underline="none"
-                      href={`/qeta/questions/${question.id}/edit`}
+                      to={`/qeta/questions/${question.id}/edit`}
                     >
                       Edit
                     </Link>

diff --git a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Button, Divider, Typography } from '@material-ui/core';
+import { Box, Divider, Typography } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
 import { useParams } from 'react-router-dom';
 import {
   Content,
@@ -74,13 +75,13 @@ export const QuestionPage = () => {
         // @ts-ignore
         description={getDescription(question)}
       >
-        <Button
+        <LinkButton
           className={styles.marginRight}
-          href="/qeta"
+          to="/qeta"
           startIcon={<HomeOutlined />}
         >
           Back to questions
-        </Button>
+        </LinkButton>
         <AskQuestionButton />
       </ContentHeader>
       <QuestionCard question={question} />

diff --git a/plugins/qeta/src/components/QuestionsContainer/QuestionList.tsx b/plugins/qeta/src/components/QuestionsContainer/QuestionList.tsx
@@ -2,7 +2,6 @@ import { useStyles } from '../../utils/hooks';
 import { WarningPanel } from '@backstage/core-components';
 import {
   Box,
-  Button,
   Divider,
   FormControl,
   Grid,
@@ -11,6 +10,7 @@ import {
   Tooltip,
   Typography,
 } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
 import React from 'react';
 import { QuestionListItem } from './QuestionListItem';
 import { Pagination, Skeleton } from '@material-ui/lab';
@@ -75,14 +75,14 @@ export const QuestionList = (props: {
           <Typography variant="h6">No questions found</Typography>
         </Grid>
         <Grid item>
-          <Button
-            href={entity ? `/qeta/ask?entity=${entity}` : '/qeta/ask'}
+          <LinkButton
+            to={entity ? `/qeta/ask?entity=${entity}` : '/qeta/ask'}
             startIcon={<HelpOutline />}
             color="primary"
             variant="outlined"
           >
             Go ahead and ask one!
-          </Button>
+          </LinkButton>
         </Grid>
       </Grid>
     );

diff --git a/plugins/qeta/src/components/QuestionsContainer/QuestionListItem.tsx b/plugins/qeta/src/components/QuestionsContainer/QuestionListItem.tsx
@@ -3,10 +3,10 @@ import {
   Card,
   CardContent,
   Grid,
-  Link,
   Typography,
   useTheme,
 } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
 import React from 'react';
 // @ts-ignore
 import RelativeTime from 'react-relative-time';
@@ -22,15 +22,15 @@ export const QuestionListItem = (props: { question: QuestionResponse }) => {
         <Grid container justifyContent="space-between">
           <Grid item xs={12}>
             <Typography gutterBottom variant="h5" component="div">
-              <Link href={`/qeta/questions/${question.id}`}>
+              <Link to={`/qeta/questions/${question.id}`}>
                 {question.title}
               </Link>
             </Typography>
           </Grid>
           <Grid item>
             <Typography variant="body2" display="block">
               By{' '}
-              <Link href={`/qeta/users/${question.author}`}>
+              <Link to={`/qeta/users/${question.author}`}>
                 {formatEntityName(question.author)}
               </Link>{' '}
               <RelativeTime

diff --git a/plugins/qeta/src/components/QuestionsContainer/QuestionsContainer.tsx b/plugins/qeta/src/components/QuestionsContainer/QuestionsContainer.tsx
@@ -1,5 +1,5 @@
 import { useQetaApi } from '../../utils/hooks';
-import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
+import { Box, Collapse, Grid, Typography, Button } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { FilterKey, filterKeys, FilterPanel } from './FilterPanel';
 import { QuestionList } from './QuestionList';

diff --git a/plugins/qeta/src/components/TagPage/TagPage.tsx b/plugins/qeta/src/components/TagPage/TagPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
 import { useParams } from 'react-router-dom';
 import { Content, ContentHeader } from '@backstage/core-components';
 // @ts-ignore
@@ -16,13 +16,13 @@ export const TagPage = () => {
   return (
     <Content>
       <ContentHeader title={tag ? `Questions tagged [${tag}]` : 'Tags'}>
-        <Button
-          href="/qeta"
+        <LinkButton
+          to="/qeta"
           className={styles.marginRight}
           startIcon={<HomeOutlined />}
         >
           Back to questions
-        </Button>
+        </LinkButton>
         <AskQuestionButton />
       </ContentHeader>
       {tag ? <QuestionsContainer tags={[tag ?? '']} /> : <TagsContainer />}

diff --git a/plugins/qeta/src/components/UserPage/UserPage.tsx b/plugins/qeta/src/components/UserPage/UserPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@material-ui/core';
+import { LinkButton } from '@backstage/core-components';
 import { useParams } from 'react-router-dom';
 import { Content, ContentHeader } from '@backstage/core-components';
 // @ts-ignore
@@ -15,9 +15,9 @@ export const UserPage = () => {
   return (
     <Content>
       <ContentHeader title={`Questions by ${formatEntityName(identity)}`}>
-        <Button href="/qeta" className={styles.marginRight}>
+        <LinkButton to="/qeta" className={styles.marginRight}>
           Back to questions
-        </Button>
+        </LinkButton>
         <AskQuestionButton />
       </ContentHeader>
       <QuestionsContainer author={identity ?? ''} />