feat: allow creating tags by adding them to content

drodil · Nov 29, 2024 · 21caf2e · 21caf2e
1 parent eb156c7
commit 21caf2e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 16 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-backend/src/service/routes/routeUtil.ts b/plugins/qeta-backend/src/service/routes/routeUtil.ts
@@ -1,6 +1,7 @@
 import { Config } from '@backstage/config';
 import { Request } from 'express';
 import { TagsResponse } from '../../database/QetaStore';
+import { findTagMentions } from '@drodil/backstage-plugin-qeta-common';
 
 export const getTags = (
   request: Request,
@@ -14,7 +15,11 @@ export const getTags = (
     config.getOptionalBoolean('qeta.tags.allowCreation') ?? true;
 
   const rawTags = request.body.tags;
-  let tags: string[] = Array.isArray(rawTags) ? rawTags : rawTags.split(',');
+  const requestedTags: string[] = Array.isArray(rawTags)
+    ? rawTags
+    : rawTags.split(',');
+  const bodyTags = findTagMentions(request.body.content).map(t => t.slice(1));
+  let tags = [...new Set([...requestedTags, ...bodyTags])];
 
   if (tags.length === 0) {
     return [];
@@ -26,6 +31,8 @@ export const getTags = (
         allowedTags.includes(tag) || existingTags.tags.some(t => t.tag === tag),
     );
   }
+  console.log(tags);
+
   return tags.slice(0, maxTags);
 };
 

diff --git a/plugins/qeta-common/src/tags.ts b/plugins/qeta-common/src/tags.ts
@@ -1,4 +1,4 @@
-export const TAGS_REGEX = new RegExp('^[a-z0-9+#]+((\\-|_)[a-z0-9+#_]+)*$');
+export const TAGS_REGEX = new RegExp('^[a-z0-9+]+(([-_])[a-z0-9+]+)*$');
 
 export const isValidTag = (tag: string) => {
   const trimmed = tag.trim();

diff --git a/plugins/qeta-common/src/utils.ts b/plugins/qeta-common/src/utils.ts
@@ -29,7 +29,7 @@ export const findTagMentions = (text: string): string[] => {
   const ret = mentions ? Array.from(new Set(mentions)) : [];
   return compact(
     ret.filter(tag => {
-      return isValidTag(tag);
+      return isValidTag(tag.slice(1));
     }),
   );
 };

diff --git a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -330,7 +330,10 @@ export const MarkdownRenderer = (props: {
                 if (tagMention) {
                   return (
                     <>
-                      <TagChip tag={tagMention.slice(1)} />
+                      <TagChip
+                        tag={tagMention.slice(1)}
+                        style={{ marginBottom: 0 }}
+                      />
                     </>
                   );
                 }

diff --git a/plugins/qeta-react/src/components/TagsAndEntities/TagChip.tsx b/plugins/qeta-react/src/components/TagsAndEntities/TagChip.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { CSSProperties, useEffect } from 'react';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { tagRouteRef } from '../../routes';
 import { qetaApiRef } from '../../api';
@@ -35,11 +35,11 @@ const TagTooltip = (props: { tag: string }) => {
           tag,
           postsCount: 0,
           followerCount: 0,
-          description: '',
+          description: t('tagChip.nonExistingTag'),
         });
       }
     });
-  }, [qetaApi, tag]);
+  }, [qetaApi, tag, t]);
 
   if (!resp) {
     return null;
@@ -50,13 +50,15 @@ const TagTooltip = (props: { tag: string }) => {
       <Grid item xs={12}>
         <Typography variant="h6">{tag}</Typography>
       </Grid>
-      <Grid item xs={12}>
-        <Typography variant="subtitle2">
-          {t('common.posts', { count: resp.postsCount, itemType: 'post' })}
-          {' · '}
-          {t('common.followers', { count: resp.followerCount })}
-        </Typography>
-      </Grid>
+      {resp.id > 0 && (
+        <Grid item xs={12}>
+          <Typography variant="subtitle2">
+            {t('common.posts', { count: resp.postsCount, itemType: 'post' })}
+            {' · '}
+            {t('common.followers', { count: resp.followerCount })}
+          </Typography>
+        </Grid>
+      )}
       {resp.description && (
         <Grid item xs={12}>
           <MarkdownRenderer content={resp.description} />
@@ -89,7 +91,7 @@ const TagTooltip = (props: { tag: string }) => {
   );
 };
 
-export const TagChip = (props: { tag: string }) => {
+export const TagChip = (props: { tag: string; style?: CSSProperties }) => {
   const tagRoute = useRouteRef(tagRouteRef);
   const navigate = useNavigate();
   const { tag } = props;
@@ -105,6 +107,7 @@ export const TagChip = (props: { tag: string }) => {
         size="small"
         className="qetaTagChip"
         component="a"
+        style={props.style}
         onClick={() => {
           navigate(tagRoute({ tag }));
         }}

diff --git a/plugins/qeta-react/src/translation.ts b/plugins/qeta-react/src/translation.ts
@@ -166,6 +166,9 @@ export const qetaTranslationRef = createTranslationRef({
       addComment: 'Add a comment',
       post: 'Post',
     },
+    tagChip: {
+      nonExistingTag: 'This tag does not yet exist',
+    },
     editTagModal: {
       title: 'Edit tag {{tag}}',
       description: 'Tag description',