fix: entity follow tooltip + add icons

drodil · Nov 27, 2024 · 4ad28c6 · 4ad28c6
1 parent 41840da
commit 4ad28c6
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 75 deletions.
diff --git a/app-config.yaml b/app-config.yaml
@@ -71,7 +71,7 @@ qeta:
   entities:
     max: 2
   tags:
-    #allowCreation: false
+    allowCreation: false
     #allowedTags:
       #- test
       #- another_tag

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx
@@ -10,11 +10,24 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';
 import { VoteButtons } from '../Buttons/VoteButtons';
-import { questionRouteRef, userRouteRef } from '../../routes';
+import { questionRouteRef } from '../../routes';
 import { useTranslation } from '../../hooks';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor';
 import { VoteButtonContainer } from '../Utility/VoteButtonContainer';
-import { Avatar, Grid, Typography } from '@material-ui/core';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { SmallAvatar } from '../Utility/SmallAvatar';
+import { UserLink } from '../Links';
+
+const useStyles = makeStyles(() => ({
+  author: {
+    float: 'right',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  timestamp: {
+    marginLeft: '0.3em',
+  },
+}));
 
 export interface AnswerListItemProps {
   answer: AnswerResponse;
@@ -25,9 +38,9 @@ export const AnswerListItem = (props: AnswerListItemProps) => {
   const { answer, entity } = props;
 
   const questionRoute = useRouteRef(questionRouteRef);
-  const userRoute = useRouteRef(userRouteRef);
   const { name, initials, user } = useEntityAuthor(answer);
   const { t } = useTranslation();
+  const styles = useStyles();
 
   const getAnswerLink = () => {
     return entity
@@ -40,15 +53,23 @@ export const AnswerListItem = (props: AnswerListItemProps) => {
   };
 
   return (
-    <Grid container spacing={2} justifyContent="flex-start">
-      <Grid item justifyContent="center" style={{ paddingTop: '0px' }}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="flex-start"
+      style={{ padding: '0.7em', paddingBottom: '1.0em' }}
+    >
+      <Grid item style={{ paddingTop: '0px' }}>
         <VoteButtonContainer>
           <VoteButtons entity={answer} />
         </VoteButtonContainer>
       </Grid>
-      <Grid item>
+      <Grid
+        item
+        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}
+      >
         <Grid container>
-          <Grid item xs={12}>
+          <Grid item xs={12} style={{ paddingTop: '0px' }}>
             <Typography variant="h5" component="div">
               <Link
                 to={getAnswerLink()}
@@ -63,32 +84,29 @@ export const AnswerListItem = (props: AnswerListItemProps) => {
               variant="caption"
               noWrap
               component="div"
-              className="qetaQuestionListItemContent"
+              className="qetaAnswerListItemContent"
               style={{ marginBottom: '5px' }}
             >
               {DOMPurify.sanitize(
                 truncate(removeMarkdownFormatting(answer.content), 150),
               )}
             </Typography>
-            <Grid item xs={12}>
+            <Grid item xs={12} style={{ marginTop: '1em' }}>
               {answer.post && <TagsAndEntities entity={answer.post} />}
-              <Typography variant="caption" display="inline">
-                <Avatar
+              <Typography
+                variant="caption"
+                display="inline"
+                className={styles.author}
+              >
+                <SmallAvatar
                   src={user?.spec?.profile?.picture}
                   alt={name}
                   variant="rounded"
                 >
                   {initials}
-                </Avatar>
-                {answer.author === 'anonymous' ? (
-                  t('common.anonymousAuthor')
-                ) : (
-                  <Link to={`${userRoute()}/${answer.author}`}>{name}</Link>
-                )}{' '}
-                <Link
-                  to={getAnswerLink()}
-                  className="qetaQuestionListItemQuestionBtn"
-                >
+                </SmallAvatar>
+                <UserLink entityRef={answer.author} />{' '}
+                <Link to={getAnswerLink()} className={styles.timestamp}>
                   {`${t('answer.answeredTime')} `}
                   <RelativeTimeWithTooltip value={answer.created} />
                 </Link>

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx
@@ -12,13 +12,18 @@ import { CollectionsGridContent } from './CollectionsGridContent';
 import { useQetaApi, useTranslation } from '../../hooks';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination';
-import { CollectionFilters, FilterPanel } from '../FilterPanel/FilterPanel';
+import {
+  CollectionFilters,
+  CommonFilterPanelProps,
+  FilterPanel,
+} from '../FilterPanel/FilterPanel';
 import FilterList from '@material-ui/icons/FilterList';
 import { getFiltersWithDateRange } from '../../utils';
 
 export type CollectionsGridProps = {
   owner?: string;
   showFilters?: boolean;
+  filterPanelProps?: CommonFilterPanelProps;
 };
 
 export type CollectionFilterChange = {
@@ -29,7 +34,7 @@ export type CollectionFilterChange = {
 const EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';
 
 export const CollectionsGrid = (props: CollectionsGridProps) => {
-  const { showFilters } = props;
+  const { showFilters, owner } = props;
   const { t } = useTranslation();
   const [page, setPage] = React.useState(1);
   const [pageCount, setPageCount] = React.useState(1);
@@ -60,6 +65,7 @@ export const CollectionsGrid = (props: CollectionsGridProps) => {
       return api.getCollections({
         limit: collectionsPerPage,
         offset: (page - 1) * collectionsPerPage,
+        owner,
         ...(getFiltersWithDateRange(filters) as any),
       });
     },
@@ -141,6 +147,7 @@ export const CollectionsGrid = (props: CollectionsGridProps) => {
           <FilterPanel<CollectionFilters>
             onChange={onFilterChange}
             filters={filters}
+            {...props.filterPanelProps}
           />
         </Collapse>
       )}

diff --git a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx
@@ -44,7 +44,6 @@ export const filterKeys = [
   'noAnswers',
   'noCorrectAnswer',
   'noVotes',
-  'tags',
   'dateRange',
 ] as const;
 export type FilterKey = (typeof filterKeys)[number];
@@ -108,15 +107,19 @@ export type Change<T extends Filters> = {
   value: string | string[];
 };
 
-export interface FilterPanelProps<T extends Filters> {
-  onChange: (changes: Change<T> | Change<T>[]) => void;
-  filters: T;
+export interface CommonFilterPanelProps {
   showEntityFilter?: boolean;
   showTagFilter?: boolean;
   answerFilters?: boolean;
   type?: PostType;
 }
 
+export interface FilterPanelProps<T extends Filters>
+  extends CommonFilterPanelProps {
+  onChange: (changes: Change<T> | Change<T>[]) => void;
+  filters: T;
+}
+
 const useStyles = makeStyles(
   theme => ({
     root: {

diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx
@@ -14,7 +14,8 @@ import { useTranslation } from '../../hooks';
 const useStyles = makeStyles(
   () => ({
     button: {
-      marginBottom: '0.5rem',
+      marginTop: '1em',
+      marginBottom: '-1em',
     },
     popper: {
       zIndex: 1000,
@@ -68,6 +69,7 @@ export const LeftMenuButton = () => {
         aria-controls={open ? 'menu-list-grow' : undefined}
         aria-haspopup="true"
         color="primary"
+        size="large"
         variant="contained"
         onClick={handleToggle}
         startIcon={<MenuIcon />}

diff --git a/plugins/qeta-react/src/components/PostForm/TagInput.tsx b/plugins/qeta-react/src/components/PostForm/TagInput.tsx
@@ -19,56 +19,58 @@ export const TagInput = (props: {
     value,
     onChange,
     error,
-    allowCreate = true,
+    allowCreate,
     hideHelpText = false,
     style,
   } = props;
   const qetaApi = useApi(qetaApiRef);
   const config = useApi(configApiRef);
   const { t } = useTranslation();
   const allowCreation = useMemo(
-    () => config.getOptionalBoolean('qeta.tags.allowCreation') ?? allowCreate,
+    () =>
+      allowCreate ??
+      config.getOptionalBoolean('qeta.tags.allowCreation') ??
+      true,
     [config, allowCreate],
   );
   const allowedTags = useMemo(
-    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? null,
+    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? [],
     [config],
   );
   const maximumTags = useMemo(
     () => config.getOptionalNumber('qeta.tags.max') ?? 5,
     [config],
   );
-  const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);
+  const [availableTags, setAvailableTags] = React.useState<string[]>([]);
   const [tagDescriptions, setTagDescriptions] = React.useState<
     Record<string, string>
   >({});
   useEffect(() => {
     qetaApi
       .getTags()
-      .catch(_ => setAvailableTags(null))
+      .catch(_ => setAvailableTags([]))
       .then(data => {
-        if (data) {
-          const uniqueTags = [
-            ...new Set([
-              ...(allowedTags ?? []),
-              ...data.tags.map(tag => tag.tag),
-            ]),
-          ];
-          setAvailableTags(uniqueTags);
-          setTagDescriptions(
-            data.tags.reduce((acc, tag) => {
-              if (!tag.description) {
-                return acc;
-              }
-              acc[tag.tag] = tag.description;
-              return acc;
-            }, {} as Record<string, string>),
-          );
+        if (!data) {
+          return;
         }
+
+        const uniqueTags = [
+          ...new Set([...allowedTags, ...data.tags.map(tag => tag.tag)]),
+        ];
+        setAvailableTags(uniqueTags);
+        setTagDescriptions(
+          data.tags.reduce((acc, tag) => {
+            if (!tag.description) {
+              return acc;
+            }
+            acc[tag.tag] = tag.description;
+            return acc;
+          }, {} as Record<string, string>),
+        );
       });
   }, [qetaApi, allowCreation, allowedTags]);
 
-  if (!allowCreate && (!availableTags || availableTags.length === 0)) {
+  if (!allowCreation && availableTags.length === 0) {
     return null;
   }
 

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx b/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel';
+import {
+  CommonFilterPanelProps,
+  FilterPanel,
+  PostFilters,
+} from '../FilterPanel/FilterPanel';
 import { PostList } from './PostList';
 import { AskQuestionButton } from '../Buttons/AskQuestionButton';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
@@ -17,7 +21,10 @@ import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
 import FilterList from '@material-ui/icons/FilterList';
 
 export const PostsContainer = (
-  props: PaginatedPostsProps & { entity?: string },
+  props: PaginatedPostsProps & {
+    entity?: string;
+    filterPanelProps?: CommonFilterPanelProps;
+  },
 ) => {
   const {
     type,
@@ -142,7 +149,7 @@ export const PostsContainer = (
             filters={filters}
             type={type}
             showEntityFilter={entity === undefined}
-            showTagFilter={tags === undefined}
+            {...props.filterPanelProps}
           />
         </Collapse>
       )}
@@ -158,7 +165,7 @@ export const PostsContainer = (
         pageCount={pageCount}
         showNoQuestionsBtn={showNoQuestionsBtn}
         entityPage={entity !== undefined}
-        tags={tags}
+        tags={tags ?? filters.tags}
         type={type}
       />
     </Box>

diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx
@@ -7,7 +7,11 @@ import {
   WriteArticleButton,
 } from '../Buttons';
 import FilterList from '@material-ui/icons/FilterList';
-import { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel';
+import {
+  CommonFilterPanelProps,
+  FilterPanel,
+  PostFilters,
+} from '../FilterPanel/FilterPanel';
 import { PostsGridContent } from './PostsGridContent';
 import { capitalize } from 'lodash';
 import {
@@ -18,7 +22,10 @@ import { useTranslation } from '../../hooks';
 import { SearchBar } from '../SearchBar/SearchBar';
 import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
 
-export type PostGridProps = PaginatedPostsProps & { allowRanking?: boolean };
+export type PostGridProps = PaginatedPostsProps & {
+  allowRanking?: boolean;
+  filterPanelProps?: CommonFilterPanelProps;
+};
 
 export const PostsGrid = (props: PostGridProps) => {
   const {
@@ -141,6 +148,7 @@ export const PostsGrid = (props: PostGridProps) => {
             onChange={onFilterChange}
             filters={filters}
             type={type}
+            {...props.filterPanelProps}
           />
         </Collapse>
       )}