132486 don't show added tags in editor

apps/app/src/components/PageControls/PageControls.tsx

@@ -15,7 +15,7 @@ import {
   toggleLike, toggleSubscribe, useUpdateStateAfterSave,
 } from '~/client/services/page-operation';
 import { apiPost } from '~/client/util/apiv1-client';
-import { toastError } from '~/client/util/toastr';
+import { toastError, toastSuccess } from '~/client/util/toastr';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
 import type { IPageForPageDuplicateModal } from '~/stores/modal';
 import { useIsAbleToShowTagLabel, EditorMode, useEditorMode } from '~/stores/ui';
@@ -63,6 +63,7 @@ const Tags = (props: TagsProps): JSX.Element => {
       await apiPost('/tags.update', { pageId, revisionId, tags: newTags });
 
       updateStateAfterSave?.();
+      toastSuccess('updated tags successfully');
     }
     catch (err) {
       toastError(err);
@@ -76,10 +77,19 @@ const Tags = (props: TagsProps): JSX.Element => {
 
   const isTagLabelsDisabled = !!isGuestUser || !!isReadOnlyUser;
 
+  const isDisappear = true;
+
   return (
     <div className="grw-taglabels-container d-flex align-items-center">
       { tagsInfoData?.tags != null
-        ? <PageTags tags={tagsInfoData.tags} isTagLabelsDisabled={isTagLabelsDisabled ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
+        ? (
+          <PageTags
+            tags={tagsInfoData.tags}
+            isTagLabelsDisabled={isTagLabelsDisabled ?? false}
+            isDisappear={isDisappear}
+            tagsUpdateInvoked={tagsUpdatedHandler}
+          />
+        )
         : <PageTagsSkeleton />
       }
     </div>

apps/app/src/components/PageSideContents/PageSideContents.tsx

@@ -68,10 +68,19 @@ const Tags = (props: TagsProps): JSX.Element => {
 
   const isTagLabelsDisabled = !!isGuestUser || !!isReadOnlyUser;
 
+  const isDisappear = false;
+
   return (
     <div className="grw-taglabels-container">
       { tagsInfoData?.tags != null
-        ? <PageTags tags={tagsInfoData.tags} isTagLabelsDisabled={isTagLabelsDisabled ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
+        ? (
+          <PageTags
+            tags={tagsInfoData.tags}
+            isTagLabelsDisabled={isTagLabelsDisabled ?? false}
+            isDisappear={isDisappear}
+            tagsUpdateInvoked={tagsUpdatedHandler}
+          />
+        )
         : <PageTagsSkeleton />
       }
     </div>

apps/app/src/components/PageTags/PageTags.tsx

@@ -10,6 +10,7 @@ import styles from './TagLabels.module.scss';
 type Props = {
   tags?: string[],
   isTagLabelsDisabled: boolean,
+  isDisappear: boolean,
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
 }
 
@@ -18,7 +19,9 @@ export const PageTagsSkeleton = (): JSX.Element => {
 };
 
 export const PageTags:FC<Props> = (props: Props) => {
-  const { tags, isTagLabelsDisabled, tagsUpdateInvoked } = props;
+  const {
+    tags, isTagLabelsDisabled, isDisappear, tagsUpdateInvoked,
+  } = props;
 
   const [isTagEditModalShown, setIsTagEditModalShown] = useState(false);
 
@@ -41,6 +44,7 @@ export const PageTags:FC<Props> = (props: Props) => {
           tags={tags}
           openEditorModal={openEditorModal}
           isTagLabelsDisabled={isTagLabelsDisabled}
+          isDisappear={isDisappear}
         />
       </div>
       <TagEditModal

apps/app/src/components/PageTags/RenderTagLabels.tsx

@@ -10,11 +10,14 @@ import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
 type RenderTagLabelsProps = {
   tags: string[],
   isTagLabelsDisabled: boolean,
+  isDisappear: boolean,
   openEditorModal?: () => void,
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
-  const { tags, isTagLabelsDisabled, openEditorModal } = props;
+  const {
+    tags, isTagLabelsDisabled, isDisappear, openEditorModal,
+  } = props;
   const { t } = useTranslation();
 
   const { pushState } = useKeywordManager();
@@ -30,27 +33,39 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
 
   return (
     <>
-      {tags.map((tag) => {
-        return (
-          <a
-            key={tag}
-            type="button"
-            className="grw-tag-label badge bg-primary me-2"
-            onClick={() => pushState(`tag:${tag}`)}
-          >
-            {tag}
-          </a>
-        );
-      })}
+      {!isDisappear && tags.map(tag => (
+        <a
+          key={tag}
+          type="button"
+          className="grw-tag-label badge bg-primary me-2"
+          onClick={() => pushState(`tag:${tag}`)}
+        >
+          {tag}
+        </a>
+      ))}
       <NotAvailableForGuest>
         <NotAvailableForReadOnlyUser>
           <div id="edit-tags-btn-wrapper-for-tooltip">
             <a
-              className={`btn btn-link btn-edit-tags text-muted p-0 d-flex align-items-center ${isTagsEmpty && 'no-tags'} ${isTagLabelsDisabled && 'disabled'}`}
+              className={
+                `btn btn-link btn-edit-tags text-muted d-flex align-items-center
+                ${isTagsEmpty && 'no-tags'}
+                ${isTagLabelsDisabled && 'disabled'}
+                ${isDisappear && 'border border-secondary p-1'}`
+              }
               onClick={openEditorHandler}
             >
-              { isTagsEmpty && <>{ t('Add tags for this page') }</>}
-              <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />
+              {isDisappear ? (
+                <>
+                  <i className={`icon-tag me-2 ${isTagsEmpty && 'ms-1'}`} />
+                  Tags
+                </>
+              ) : (
+                <>
+                  {isTagsEmpty && <> {t('Add tags for this page')}</>}
+                  <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />
+                </>
+              )}
             </a>
           </div>
         </NotAvailableForReadOnlyUser>