fix: couple of fixes to UI

drodil · Oct 22, 2024 · bd5efee · bd5efee
1 parent 61495a0
commit bd5efee
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 111 deletions.
diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx
@@ -1,5 +1,5 @@
 import { PostResponse } from '@drodil/backstage-plugin-qeta-common';
-import { useTranslation, useVoting } from '../../utils/hooks';
+import { useStyles, useTranslation, useVoting } from '../../utils/hooks';
 import React from 'react';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import {
@@ -18,7 +18,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import { DeleteModal } from '../DeleteModal';
 import EditIcon from '@material-ui/icons/Edit';
 
-export const useStyles = makeStyles(theme => {
+export const useLocalStyles = makeStyles(theme => {
   return {
     container: {
       width: '100%',
@@ -38,7 +38,8 @@ export const ArticleButtons = (props: { post: PostResponse }) => {
   const { post } = props;
   const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } =
     useVoting(post);
-  const styles = useStyles();
+  const styles = useLocalStyles();
+  const classes = useStyles();
   const { t } = useTranslation();
   const editArticleRoute = useRouteRef(editArticleRouteRef);
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
@@ -89,16 +90,16 @@ export const ArticleButtons = (props: { post: PostResponse }) => {
         </Grid>
         <Grid item>
           <FavoriteButton entity={post} />
-          <LinkButton entity={post} />
+          <LinkButton entity={post} className={classes.marginLeft} />
           {(post.canEdit || post.canDelete) && (
             <>
               {post.canDelete && (
                 <>
                   <Tooltip title={t('articlePage.deleteButton')}>
                     <IconButton
                       size="small"
-                      color="secondary"
                       onClick={handleDeleteModalOpen}
+                      className={classes.marginLeft}
                     >
                       <DeleteIcon />
                     </IconButton>
@@ -114,7 +115,7 @@ export const ArticleButtons = (props: { post: PostResponse }) => {
                 <Tooltip title={t('articlePage.editButton')}>
                   <IconButton
                     size="small"
-                    color="primary"
+                    className={classes.marginLeft}
                     href={editArticleRoute({
                       id: post.id.toString(10),
                     })}

diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx
@@ -10,6 +10,7 @@ import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';
 import { ArticleButtons } from './ArticleButtons';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';
 import { CommentSection } from '../CommentSection/CommentSection';
+import { BackstageOverrides } from '@backstage/core-components';
 
 export const useStyles = makeStyles(theme => {
   return {
@@ -20,6 +21,7 @@ export const useStyles = makeStyles(theme => {
       paddingBottom: '1rem',
       marginBottom: '1rem',
       borderBottom: `1px solid ${theme.palette.background.paper}`,
+      ...(theme.overrides as BackstageOverrides)?.BackstageMarkdownContent,
     },
     headerImage: {
       objectFit: 'cover',
@@ -50,6 +52,10 @@ export const ArticleContent = (props: {
     setPostEntity(q);
   };
 
+  if (post.type !== 'article') {
+    return null;
+  }
+
   return (
     <>
       <Typography variant="h2">{postEntity.title}</Typography>

diff --git a/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useEntityFollow, useStyles, useTranslation } from '../../utils/hooks';
-import { Button, Tooltip } from '@material-ui/core';
+import { IconButton, Tooltip } from '@material-ui/core';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 
@@ -15,7 +15,7 @@ export const EntityFollowButton = (props: { entityRef: string }) => {
 
   return (
     <Tooltip title={t('entityButton.tooltip')}>
-      <Button
+      <IconButton
         size="small"
         className={`${styles.marginLeft} qetaFollowEntityBtn`}
         color={entities.isFollowingEntity(entityRef) ? 'secondary' : 'primary'}
@@ -32,7 +32,7 @@ export const EntityFollowButton = (props: { entityRef: string }) => {
         ) : (
           <Visibility />
         )}
-      </Button>
+      </IconButton>
     </Tooltip>
   );
 };
diff --git a/plugins/qeta-react/src/components/Buttons/LinkButton.tsx b/plugins/qeta-react/src/components/Buttons/LinkButton.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from '../../utils';
 
 export const LinkButton = (props: {
   entity: PostResponse | AnswerResponse;
+  className?: string;
 }) => {
   const isQuestion = 'title' in props.entity;
   const { t } = useTranslation();
@@ -26,6 +27,7 @@ export const LinkButton = (props: {
         aria-label={t('link.aria')}
         size="small"
         onClick={copyToClipboard}
+        className={props.className}
       >
         <Link />
       </IconButton>

diff --git a/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx b/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx
@@ -1,7 +1,6 @@
 import { Collection } from '@drodil/backstage-plugin-qeta-common';
 import { InfoCard } from '@backstage/core-components';
 import {
-  Box,
   Button,
   CardContent,
   CardMedia,
@@ -51,9 +50,9 @@ export const CollectionCard = (props: { collection: Collection }) => {
           <Grid item xs={12}>
             <TagsAndEntities entity={collection} />
           </Grid>
-          <Grid item xs={12}>
+          <Grid container item xs={12}>
             {collection.canDelete && (
-              <Box>
+              <Grid item>
                 <Button
                   variant="outlined"
                   size="small"
@@ -69,20 +68,22 @@ export const CollectionCard = (props: { collection: Collection }) => {
                   onClose={handleDeleteModalClose}
                   entity={collection}
                 />
-              </Box>
+              </Grid>
             )}
             {collection.canEdit && (
-              <Button
-                variant="outlined"
-                size="small"
-                startIcon={<EditIcon />}
-                href={editCollectionRoute({
-                  id: collection.id.toString(10),
-                })}
-                className="qetaCollectionCardEditBtn"
-              >
-                {t('questionPage.editButton')}
-              </Button>
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  startIcon={<EditIcon />}
+                  href={editCollectionRoute({
+                    id: collection.id.toString(10),
+                  })}
+                  className="qetaCollectionCardEditBtn"
+                >
+                  {t('questionPage.editButton')}
+                </Button>
+              </Grid>
             )}
           </Grid>
         </Grid>

diff --git a/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx b/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx
@@ -254,50 +254,42 @@ export const CollectionForm = (props: CollectionFormProps) => {
         )}
         name="description"
       />
-      <Grid container style={{ marginTop: '1rem', marginBottom: '1rem' }}>
-        <Grid item>
-          <Controller
-            control={control}
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <FormControl>
-                <FormHelperText>Read access</FormHelperText>
-                <Select
-                  variant="outlined"
-                  onChange={onChange}
-                  value={value}
-                  disabled={!canModifyAccess}
-                >
-                  <MenuItem value="private">Only you</MenuItem>
-                  <MenuItem value="public">Anyone</MenuItem>
-                </Select>
-              </FormControl>
-            )}
-            name="readAccess"
-          />
-        </Grid>
-        <Grid item>
-          <Controller
-            control={control}
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <FormControl>
-                <FormHelperText>Edit access</FormHelperText>
-                <Select
-                  variant="outlined"
-                  onChange={onChange}
-                  value={value}
-                  disabled={!canModifyAccess}
-                >
-                  <MenuItem value="private">Only you</MenuItem>
-                  <MenuItem value="public">Anyone</MenuItem>
-                </Select>
-              </FormControl>
-            )}
-            name="editAccess"
-          />
+      {canModifyAccess && (
+        <Grid container style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+          <Grid item>
+            <Controller
+              control={control}
+              rules={{ required: true }}
+              render={({ field: { onChange, value } }) => (
+                <FormControl>
+                  <FormHelperText>Read access</FormHelperText>
+                  <Select variant="outlined" onChange={onChange} value={value}>
+                    <MenuItem value="private">Only you</MenuItem>
+                    <MenuItem value="public">Anyone</MenuItem>
+                  </Select>
+                </FormControl>
+              )}
+              name="readAccess"
+            />
+          </Grid>
+          <Grid item>
+            <Controller
+              control={control}
+              rules={{ required: true }}
+              render={({ field: { onChange, value } }) => (
+                <FormControl>
+                  <FormHelperText>Edit access</FormHelperText>
+                  <Select variant="outlined" onChange={onChange} value={value}>
+                    <MenuItem value="private">Only you</MenuItem>
+                    <MenuItem value="public">Anyone</MenuItem>
+                  </Select>
+                </FormControl>
+              )}
+              name="editAccess"
+            />
+          </Grid>
         </Grid>
-      </Grid>
+      )}
       <Button
         color="primary"
         type="submit"

diff --git a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGridItem.tsx b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGridItem.tsx
@@ -59,26 +59,30 @@ export const EntitiesGridItem = (props: { entity: EntityResponse }) => {
           </CardContent>
         </CardActionArea>
         <CardActions style={{ marginTop: 'auto' }}>
-          <Button
-            size="small"
-            variant="outlined"
-            color={
-              entityFollow.isFollowingEntity(entity.entityRef)
-                ? 'secondary'
-                : 'primary'
-            }
-            onClick={() => {
-              if (entityFollow.isFollowingEntity(entity.entityRef)) {
-                entityFollow.unfollowEntity(entity.entityRef);
-              } else {
-                entityFollow.followEntity(entity.entityRef);
-              }
-            }}
-          >
-            {entityFollow.isFollowingEntity(entity.entityRef)
-              ? t('entityButton.unfollow')
-              : t('entityButton.follow')}
-          </Button>
+          <Grid container justifyContent="center">
+            <Grid item>
+              <Button
+                size="small"
+                variant="outlined"
+                color={
+                  entityFollow.isFollowingEntity(entity.entityRef)
+                    ? 'secondary'
+                    : 'primary'
+                }
+                onClick={() => {
+                  if (entityFollow.isFollowingEntity(entity.entityRef)) {
+                    entityFollow.unfollowEntity(entity.entityRef);
+                  } else {
+                    entityFollow.followEntity(entity.entityRef);
+                  }
+                }}
+              >
+                {entityFollow.isFollowingEntity(entity.entityRef)
+                  ? t('entityButton.unfollow')
+                  : t('entityButton.follow')}
+              </Button>
+            </Grid>
+          </Grid>
         </CardActions>
       </Card>
     </Grid>

diff --git a/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx b/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx
@@ -22,19 +22,25 @@ import { useTagsFollow } from '../../utils/hooks';
 import { EditTagModal } from './EditTagModal';
 import DOMPurify from 'dompurify';
 
-export const TagGridItem = (props: { tag: TagResponse }) => {
-  const { tag } = props;
+export const TagGridItem = (props: {
+  tag: TagResponse;
+  onTagEdit: () => void;
+}) => {
+  const { tag, onTagEdit } = props;
   const tagRoute = useRouteRef(tagRouteRef);
   const navigate = useNavigate();
   const { t } = useTranslation();
   const tags = useTagsFollow();
 
   const [editModalOpen, setEditModalOpen] = React.useState(false);
   const handleEditModalOpen = () => setEditModalOpen(true);
-  const handleEditModalClose = () => setEditModalOpen(false);
+  const handleEditModalClose = () => {
+    setEditModalOpen(false);
+    onTagEdit();
+  };
 
   return (
-    <Grid item xs={3}>
+    <Grid item xs={4}>
       <Card
         variant="outlined"
         style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
@@ -56,25 +62,35 @@ export const TagGridItem = (props: { tag: TagResponse }) => {
           </CardContent>
         </CardActionArea>
         <CardActions style={{ marginTop: 'auto' }}>
-          <Button
-            size="small"
-            variant="outlined"
-            color={tags.isFollowingTag(tag.tag) ? 'secondary' : 'primary'}
-            onClick={() => {
-              if (tags.isFollowingTag(tag.tag)) {
-                tags.unfollowTag(tag.tag);
-              } else {
-                tags.followTag(tag.tag);
-              }
-            }}
-          >
-            {tags.isFollowingTag(tag.tag)
-              ? t('tagButton.unfollow')
-              : t('tagButton.follow')}
-          </Button>
-          <Button size="small" onClick={handleEditModalOpen} variant="outlined">
-            {t('tagButton.edit')}
-          </Button>
+          <Grid container justifyContent="center">
+            <Grid item>
+              <Button
+                size="small"
+                variant="outlined"
+                color={tags.isFollowingTag(tag.tag) ? 'secondary' : 'primary'}
+                onClick={() => {
+                  if (tags.isFollowingTag(tag.tag)) {
+                    tags.unfollowTag(tag.tag);
+                  } else {
+                    tags.followTag(tag.tag);
+                  }
+                }}
+              >
+                {tags.isFollowingTag(tag.tag)
+                  ? t('tagButton.unfollow')
+                  : t('tagButton.follow')}
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                size="small"
+                onClick={handleEditModalOpen}
+                variant="outlined"
+              >
+                {t('tagButton.edit')}
+              </Button>
+            </Grid>
+          </Grid>
         </CardActions>
       </Card>
       <EditTagModal