UN-749-moving-dropdown

src/common/components/BugDetail/DetailsItems.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { theme as globalTheme } from 'src/app/theme';
 import { SeverityTag } from 'src/common/components/tag/SeverityTag';
+import BugTags from 'src/common/components/BugDetail/Tags';
 import { Bug, BugAdditionalField } from 'src/features/api';
 import { MD, Span } from '@appquality/unguess-design-system';
 import { Trans, useTranslation } from 'react-i18next';
@@ -39,7 +40,10 @@ export default ({
 
   return (
     <>
-      <DetailsItem style={{ marginTop: globalTheme.space.base * 3 }}>
+      <DetailsItem>
+        <BugTags bug={bug} />
+      </DetailsItem>
+      <DetailsItem>
         <Label isBold style={{ marginBottom: globalTheme.space.xs }}>
           {t('__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIME_LABEL')}
         </Label>

src/common/components/BugDetail/Media/index.tsx

@@ -8,7 +8,7 @@ import {
 import { theme as globalTheme } from 'src/app/theme';
 import ImageCard from '../ImageCard';
 import VideoCard from '../VideoCard';
-import './style.css';
+import 'src/common/components/BugDetail/responsive-grid.css';
 import { LightboxContainer } from '../lightbox';
 
 export default ({
@@ -65,12 +65,12 @@ export default ({
         )}
       </SM>
       <Grid>
-        <Row className="media-container">
+        <Row className="responsive-container">
           {items.map((item, index) => {
             // Check if item is an image or a video
             if (item.mime_type.type === 'image')
               return (
-                <Col xs={12} sm={6} className="media">
+                <Col xs={12} sm={6} className="flex-3-sm">
                   <ImageCard
                     index={index}
                     url={item.url}
@@ -80,7 +80,7 @@ export default ({
               );
             if (item.mime_type.type === 'video')
               return (
-                <Col xs={12} sm={6} className="media">
+                <Col xs={12} sm={6} className="flex-3-sm">
                   <VideoCard
                     index={index}
                     url={item.url}

src/common/components/BugDetail/Tags.tsx

@@ -10,17 +10,16 @@ import styled from 'styled-components';
 import { theme as globalTheme } from 'src/app/theme';
 import { useEffect, useState } from 'react';
 import { Label } from './Label';
+import 'src/common/components/BugDetail/responsive-grid.css';
 
 const Container = styled.div`
   display: inline-block;
   width: 100%;
-  margin-top: ${({ theme }) => theme.space.md};
+  margin-top: ${({ theme }) => theme.space.xs};
 `;
 
 export default ({
   bug,
-  campaignId,
-  bugId,
 }: {
   bug: Bug & {
     reporter: {
@@ -29,8 +28,6 @@ export default ({
     };
     tags?: BugTag[];
   };
-  campaignId: number;
-  bugId: number;
 }) => {
   const { t } = useTranslation();
   const [options, setOptions] = useState<{ id: number; label: string }[]>([]);
@@ -44,7 +41,7 @@ export default ({
     isError: isErrorCampaign,
     data: cpTags,
   } = useGetCampaignsByCidTagsQuery({
-    cid: campaignId?.toString() ?? '0',
+    cid: bug.campaign_id.toString() ?? '0',
   });
 
   useEffect(() => {
@@ -64,7 +61,7 @@ export default ({
   if (isErrorCampaign) return null;
 
   return (
-    <Container>
+    <Container className="responsive-container">
       <Label style={{ marginBottom: globalTheme.space.xxs }}>
         {t('__BUGS_PAGE_BUG_DETAIL_TAGS_LABEL')}
       </Label>
@@ -74,55 +71,57 @@ export default ({
           style={{ borderRadius: globalTheme.borderRadii.md }}
         />
       ) : (
-        <MultiSelect
-          creatable
-          maxItems={4}
-          size="small"
-          i18n={{
-            placeholder: t('__BUGS_PAGE_BUG_DETAIL_TAGS_PLACEHOLDER'),
-            showMore: (count) =>
-              t('__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE', { count }),
-            addNew: (value) =>
-              `${t('__BUGS_PAGE_BUG_DETAIL_TAGS_ADD_NEW')} "${value}"`,
-          }}
-          onChange={async (selectedItems, newLabel) => {
-            const { tags } = await patchBug({
-              cid: campaignId.toString(),
-              bid: bugId.toString(),
-              body: {
-                tags: [
-                  ...selectedItems
-                    .filter((o) => o.selected)
-                    .map((item) => ({
-                      tag_id: Number(item.id),
-                    })),
-                  ...(newLabel
-                    ? [
-                        {
-                          tag_name: newLabel,
-                        },
-                      ]
-                    : []),
-                ],
-              },
-            }).unwrap();
+        <div className="max-width-6-sm">
+          <MultiSelect
+            creatable
+            maxItems={4}
+            size="small"
+            i18n={{
+              placeholder: t('__BUGS_PAGE_BUG_DETAIL_TAGS_PLACEHOLDER'),
+              showMore: (count) =>
+                t('__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE', { count }),
+              addNew: (value) =>
+                `${t('__BUGS_PAGE_BUG_DETAIL_TAGS_ADD_NEW')} "${value}"`,
+            }}
+            onChange={async (selectedItems, newLabel) => {
+              const { tags } = await patchBug({
+                cid: bug.campaign_id.toString(),
+                bid: bug.id.toString(),
+                body: {
+                  tags: [
+                    ...selectedItems
+                      .filter((o) => o.selected)
+                      .map((item) => ({
+                        tag_id: Number(item.id),
+                      })),
+                    ...(newLabel
+                      ? [
+                          {
+                            tag_name: newLabel,
+                          },
+                        ]
+                      : []),
+                  ],
+                },
+              }).unwrap();
 
-            const results = tags
-              ? tags.map((tag) => ({
-                  id: tag.tag_id,
-                  label: tag.tag_name,
-                }))
-              : [];
-            const unselectedItems = options.filter(
-              (o) => !results.find((r) => r.id === o.id)
-            );
-            setOptions([
-              ...unselectedItems,
-              ...results.map((r) => ({ ...r, selected: true })),
-            ]);
-          }}
-          options={options}
-        />
+              const results = tags
+                ? tags.map((tag) => ({
+                    id: tag.tag_id,
+                    label: tag.tag_name,
+                  }))
+                : [];
+              const unselectedItems = options.filter(
+                (o) => !results.find((r) => r.id === o.id)
+              );
+              setOptions([
+                ...unselectedItems,
+                ...results.map((r) => ({ ...r, selected: true })),
+              ]);
+            }}
+            options={options}
+          />
+        </div>
       )}
     </Container>
   );

src/common/components/BugDetail/responsive-grid.css

@@ -0,0 +1,18 @@
+/**
+  * waiting for upocoming supprt for @container in styled components
+  * currently only supported in v6 beta
+  * for the time being, we use css modules
+  */
+
+.responsive-container {
+  container: responsive-container / inline-size;
+}
+
+@container responsive-container (width > 576px) {
+  .flex-3-sm {
+    flex-basis: 25% !important;
+  }
+  .max-width-6-sm {
+    max-width: 50% !important;
+  }
+}

src/locales/en/translation.json

@@ -61,7 +61,7 @@
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIME_LABEL": "Detection date",
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIPOLOGY_LABEL": "Tipology",
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_USE_CASE_LABEL": "Use Case",
-  "__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL": "Details",
+  "__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL": "Tags and Details",
   "__BUGS_PAGE_BUG_DETAIL_DUPLICATES_ACCORDION_TITLE": "Related bugs",
   "__BUGS_PAGE_BUG_DETAIL_EXPECTED_RESULT_LABEL": "Expected result",
   "__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW": "Under revision",

src/locales/it/translation.json

@@ -63,7 +63,7 @@
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIME_LABEL": "Data di rilevamento",
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIPOLOGY_LABEL": "Tipologia",
   "__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_USE_CASE_LABEL": "Caso d'uso",
-  "__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL": "Dettaglio",
+  "__BUGS_PAGE_BUG_DETAIL_DETAILS_LABEL": "Tag e Dettagli",
   "__BUGS_PAGE_BUG_DETAIL_DUPLICATES_ACCORDION_TITLE": "Bug collegati",
   "__BUGS_PAGE_BUG_DETAIL_EXPECTED_RESULT_LABEL": "Risultato previsto",
   "__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW": "In revisione",

src/pages/Bug/Content.tsx

@@ -2,7 +2,6 @@ import { ContainerCard } from '@appquality/unguess-design-system';
 import { GetCampaignsByCidBugsAndBidApiResponse } from 'src/features/api';
 import BugMeta from 'src/common/components/BugDetail/Meta';
 import BugPriority from 'src/common/components/BugDetail/Priority';
-import BugTags from 'src/common/components/BugDetail/Tags';
 import BugDescription from 'src/common/components/BugDetail/Description';
 import BugAttachments from 'src/common/components/BugDetail/Attachments';
 import BugDetails from 'src/common/components/BugDetail/Details';
@@ -24,11 +23,6 @@ export const Content = ({ bug, campaignId }: Props) => (
       <AnchorButtons bug={bug} />
       <div style={{ width: '50%' }}>
         <BugPriority bug={bug} />
-        <BugTags
-          bug={bug}
-          campaignId={parseInt(campaignId, 10)}
-          bugId={bug.id}
-        />
       </div>
       <BugDescription bug={bug} />
       {bug.media && bug.media.length ? <BugAttachments bug={bug} /> : null}

src/pages/Bugs/Content/BugPreview.tsx

@@ -1,7 +1,6 @@
 import { Skeleton } from '@appquality/unguess-design-system';
 import styled from 'styled-components';
 import BugMeta from 'src/common/components/BugDetail/Meta';
-import BugTags from 'src/common/components/BugDetail/Tags';
 import BugPriority from 'src/common/components/BugDetail/Priority';
 import BugDescription from 'src/common/components/BugDetail/Description';
 import BugAttachments from 'src/common/components/BugDetail/Attachments';
@@ -80,11 +79,6 @@ export const BugPreview = ({
           <BugMeta bug={bug} />
           <AnchorButtons bug={bug} scrollerBoxId={scrollerBoxId} />
           <BugPriority bug={bug} />
-          <BugTags
-            bug={bug}
-            campaignId={campaignId}
-            bugId={currentBugId ?? 0}
-          />
           <BugDescription bug={bug} />
           {media && media.length ? <BugAttachments bug={bug} /> : null}
           <BugDetails bug={bug} />