From bd5efee03de3bd0ce21af336214eac497fe2ec0c Mon Sep 17 00:00:00 2001 From: Heikki Hellgren Date: Tue, 22 Oct 2024 15:47:37 +0300 Subject: [PATCH] fix: couple of fixes to UI --- .../ArticleContent/ArticleButtons.tsx | 13 ++-- .../ArticleContent/ArticleContent.tsx | 6 ++ .../components/Buttons/EntityFollowButton.tsx | 6 +- .../src/components/Buttons/LinkButton.tsx | 2 + .../CollectionCard/CollectionCard.tsx | 31 ++++---- .../CollectionForm/CollectionForm.tsx | 78 +++++++++---------- .../EntitiesGrid/EntitiesGridItem.tsx | 44 ++++++----- .../src/components/TagsGrid/TagGridItem.tsx | 62 +++++++++------ .../src/components/TagsGrid/TagsGrid.tsx | 7 +- plugins/qeta-react/src/utils/hooks.ts | 2 + .../components/QuestionPage/QuestionPage.tsx | 4 + 11 files changed, 144 insertions(+), 111 deletions(-) diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx index bb08cec1..e1f3c769 100644 --- 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,7 +90,7 @@ export const ArticleButtons = (props: { post: PostResponse }) => { - + {(post.canEdit || post.canDelete) && ( <> {post.canDelete && ( @@ -97,8 +98,8 @@ export const ArticleButtons = (props: { post: PostResponse }) => { @@ -114,7 +115,7 @@ export const ArticleButtons = (props: { post: PostResponse }) => { { 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 ( <> {postEntity.title} diff --git a/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx index 0f092a9e..81b95cf0 100644 --- 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 ( - + ); }; diff --git a/plugins/qeta-react/src/components/Buttons/LinkButton.tsx b/plugins/qeta-react/src/components/Buttons/LinkButton.tsx index c1a84b7c..d4638997 100644 --- 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} > diff --git a/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx b/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx index c9e101e9..edca80c1 100644 --- 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 }) => { - + {collection.canDelete && ( - + + + + )} diff --git a/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx b/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx index 4f7970d0..66e0e856 100644 --- 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" /> - - - ( - - Read access - - - )} - name="readAccess" - /> - - - ( - - Edit access - - - )} - name="editAccess" - /> + {canModifyAccess && ( + + + ( + + Read access + + + )} + name="readAccess" + /> + + + ( + + Edit access + + + )} + name="editAccess" + /> + - + )} + + + + + diff --git a/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx b/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx index 2de6c28d..df1c2217 100644 --- a/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx +++ b/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx @@ -22,8 +22,11 @@ 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(); @@ -31,10 +34,13 @@ export const TagGridItem = (props: { tag: TagResponse }) => { const [editModalOpen, setEditModalOpen] = React.useState(false); const handleEditModalOpen = () => setEditModalOpen(true); - const handleEditModalClose = () => setEditModalOpen(false); + const handleEditModalClose = () => { + setEditModalOpen(false); + onTagEdit(); + }; return ( - + { - - + + + + + + + + { value: response, loading, error, + retry, } = useQetaApi(api => api.getTags(), []); if (loading) { @@ -38,6 +39,10 @@ export const TagsGrid = () => { ); }; + const onTagEdit = () => { + retry(); + }; + const tags = filterData(searchQuery, response); return ( @@ -63,7 +68,7 @@ export const TagsGrid = () => { {tags.map(tag => ( - + ))} diff --git a/plugins/qeta-react/src/utils/hooks.ts b/plugins/qeta-react/src/utils/hooks.ts index 765db6f2..ac67a8ef 100644 --- a/plugins/qeta-react/src/utils/hooks.ts +++ b/plugins/qeta-react/src/utils/hooks.ts @@ -40,6 +40,7 @@ import useDebounce from 'react-use/lib/useDebounce'; import { getFiltersWithDateRange } from './utils'; import { useSignal } from '@backstage/plugin-signals-react'; import { useAsyncRetry } from 'react-use'; +import { BackstageOverrides } from '@backstage/core-components'; export const useTranslation = () => { return useTranslationRef(qetaTranslationRef); @@ -491,6 +492,7 @@ export const useStyles = makeStyles(theme => { '& > :last-child': { marginBottom: '0px !important', }, + ...(theme.overrides as BackstageOverrides)?.BackstageMarkdownContent, }, successColor: { color: theme.palette.success.main, diff --git a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx index acffd1ec..fae5fb8a 100644 --- a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx +++ b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx @@ -103,6 +103,10 @@ export const QuestionPage = () => { ); } + if (question.type !== 'question') { + return null; + } + const sortAnswers = (a: Answer, b: Answer) => { if (answerSort === 'default') { return 1;