Fix tags multiselect

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.55",
+    "@appquality/unguess-design-system": "2.12.57",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/features/api/api.ts

@@ -24,6 +24,7 @@ export const apiSlice = createApi({
     'Reports',
     'Templates',
     'Bugs',
+    'Tags',
   ],
   endpoints: () => ({}),
 });

src/features/api/apiTags.ts

@@ -59,6 +59,15 @@ unguessApi.enhanceEndpoints({
     getCampaignsByCidWidgets: {
       providesTags: ['Bugs'],
     },
+    patchCampaignsByCidBugsAndBid: {
+      invalidatesTags: ['Tags'],
+    },
+    getCampaignsByCidTags: {
+      providesTags: ['Tags'],
+    },
+    getCampaignsByCidBugsAndBid: {
+      providesTags: ['Tags'],
+    },
   },
 });
 

src/pages/Bugs/Detail/Tags.tsx

@@ -1,4 +1,4 @@
-import { MD, MultiSelect, Skeleton } from '@appquality/unguess-design-system';
+import { MD, Skeleton, MultiSelect } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import {
   Bug,
@@ -31,25 +31,11 @@ export default ({
   campaignId: number;
 }) => {
   const { t } = useTranslation();
+  const [options, setOptions] = useState<{ id: number; label: string }[]>([]);
   const currentBugId = getSelectedBugId();
   const { tags: bugTags } = bug;
   const [patchBug] = usePatchCampaignsByCidBugsAndBidMutation();
 
-  const [selectedTags, setSelectedTags] = useState<
-    { id: number; label: string }[]
-  >([]);
-
-  useEffect(() => {
-    if (bugTags) {
-      setSelectedTags(
-        bugTags.map((tag) => ({
-          id: tag.tag_id,
-          label: tag.name,
-        }))
-      );
-    }
-  }, [bugTags]);
-
   const {
     isLoading: isLoadingCampaign,
     isFetching: isFetchingCampaign,
@@ -59,6 +45,20 @@ export default ({
     cid: campaignId?.toString() ?? '0',
   });
 
+  useEffect(() => {
+    if (cpTags) {
+      setOptions(
+        cpTags.map((tag) => ({
+          id: tag.tag_id,
+          label: tag.display_name,
+          selected: bugTags
+            ? bugTags.some((selectedTag) => selectedTag.tag_id === tag.tag_id)
+            : false,
+        }))
+      );
+    }
+  }, [cpTags, bugTags]);
+
   if (isErrorCampaign) return null;
 
   return (
@@ -77,19 +77,21 @@ export default ({
           maxItems={4}
           size="small"
           i18n={{}}
-          onChange={async (selectedItems, newItem) => {
+          onChange={async (selectedItems, newLabel) => {
             const { tags } = await patchBug({
               cid: campaignId.toString(),
               bid: currentBugId ? currentBugId.toString() : '0',
               body: {
                 tags: [
-                  ...selectedItems.map((item) => ({
-                    tag_id: Number(item.id),
-                  })),
-                  ...(newItem
+                  ...selectedItems
+                    .filter((o) => o.selected)
+                    .map((item) => ({
+                      tag_id: Number(item.id),
+                    })),
+                  ...(newLabel
                     ? [
                         {
-                          tag_name: newItem,
+                          tag_name: newLabel,
                         },
                       ]
                     : []),
@@ -103,19 +105,15 @@ export default ({
                   label: tag.tag_name,
                 }))
               : [];
-
-            setSelectedTags(results);
-            return results;
+            const unselectedItems = options.filter(
+              (o) => !results.find((r) => r.id === o.id)
+            );
+            setOptions([
+              ...unselectedItems,
+              ...results.map((r) => ({ ...r, selected: true })),
+            ]);
           }}
-          options={
-            cpTags
-              ? cpTags.map((tag) => ({
-                  id: tag.tag_id,
-                  label: tag.display_name,
-                }))
-              : []
-          }
-          selectedItems={selectedTags}
+          options={options}
         />
       )}
     </Container>

src/pages/Bugs/Detail/lightbox.tsx

@@ -9,7 +9,7 @@ import {
   BugMedia,
   GetCampaignsByCidBugsAndBidApiResponse,
 } from 'src/features/api';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { ReactComponent as DownloadIcon } from 'src/assets/icons/download-stroke.svg';
 import styled from 'styled-components';
 import BugMeta from './Meta';
@@ -78,7 +78,7 @@ export const LightboxContainer = ({
             onSlideChange={slideChange}
             initialSlide={currentIndex}
           >
-            {items.map((item, index) => (
+            {items.map((item) => (
               <Slider.Slide>
                 {item.mime_type.type === 'image' && (
                   <img src={item.url} alt={`bug ${item.mime_type}`} />
@@ -109,7 +109,8 @@ export const LightboxContainer = ({
           isBasic
           onClick={() => {
             if (currentIndex in items) {
-              const media = items[currentIndex];
+              const media = items[currentIndex as number];
+              // eslint-disable-next-line security/detect-non-literal-fs-filename
               window.open(media.url, '_blank');
             }
           }}

yarn.lock

@@ -47,10 +47,10 @@
     ajv-draft-04 "^1.0.0"
     call-me-maybe "^1.0.1"
 
-"@appquality/unguess-design-system@2.12.55":
-  version "2.12.55"
-  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.55.tgz#086992129040b6f0ef0e69521b1b4211afbbaeda"
-  integrity sha512-1+GKWl2O/Q9WvyicOc/orNuFG2EtAP7kw99g/YJHN68qxISizeo5lURZEeJVQR5gcZeS78NI6oa3HK0tOEn1TQ==
+"@appquality/unguess-design-system@2.12.57":
+  version "2.12.57"
+  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.57.tgz#260d16c0199888a6e8f5b93bd087d8ae21914fac"
+  integrity sha512-0xUWLxdYTTdH1gFKndXoOyyR+Mo42KsegaI2fzF0Tvsz6csq6ygsLbb7r5ckqsl3TV+IaiXiTCdEiG1sekLecQ==
   dependencies:
     "@nivo/bar" "^0.80.0"
     "@nivo/bullet" "^0.80.0"