UN-688-filters-container

package.json

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

src/features/templates/Page.tsx

@@ -3,7 +3,10 @@ import { GoogleTagManager } from 'src/common/GoogleTagManager';
 import styled from 'styled-components';
 import { Logged } from './Logged';
 
-const Container = styled.div<{ excludeMarginTop?: boolean }>`
+const Container = styled.div<{
+  excludeMarginTop?: boolean;
+  excludeMarginBottom?: boolean;
+}>`
   /* Hide scrollbar for Chrome, Safari and Opera */
   ::-webkit-scrollbar {
     display: none;
@@ -18,10 +21,12 @@ const Container = styled.div<{ excludeMarginTop?: boolean }>`
   background-color: ${({ theme }) => theme.palette.grey[100]};
   margin: ${({ theme }) => theme.space.xxl} auto;
   ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+  ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
 
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
     margin: ${({ theme }) => theme.space.md} auto;
     ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+    ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
   }
 `;
 
@@ -31,16 +36,22 @@ export const Page = ({
   pageHeader,
   route,
   excludeMarginTop,
+  excludeMarginBottom,
 }: {
   children: React.ReactNode;
   title?: string;
   pageHeader?: React.ReactNode;
   route: string;
   excludeMarginTop?: boolean;
+  excludeMarginBottom?: boolean;
 }) => (
   <GoogleTagManager title={title}>
     <Logged route={route} pageHeader={pageHeader}>
-      <Container id="container" excludeMarginTop={excludeMarginTop}>
+      <Container
+        id="container"
+        excludeMarginTop={excludeMarginTop}
+        excludeMarginBottom={excludeMarginBottom}
+      >
         {children}
       </Container>
     </Logged>

src/pages/Bugs/Content/BugPreview.tsx

@@ -14,21 +14,23 @@ import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
 import BugHeader from './components/BugHeader';
 import { BugPreviewContextProvider } from './context/BugPreviewContext';
 
+export const filtersHeight = 56;
+
 const DetailContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 0;
   width: 100%;
   background-color: white;
-  border: ${({ theme }) => theme.palette.grey[300]} 1px solid;
-  border-top-left-radius: ${({ theme }) => theme.space.xs};
-  border-bottom-left-radius: ${({ theme }) => theme.space.xs};
-  padding: 0;
   max-height: calc(
-    100vh - ${({ theme }) => theme.components.chrome.header.height}
+    100vh - ${({ theme }) => theme.components.chrome.header.height} -
+      ${filtersHeight}px
   );
   overflow: hidden;
+  @media (min-width: ${({ theme }) => theme.breakpoints.xl}) {
+    top: ${filtersHeight}px;
+  }
 `;
 
 const ScrollingContainer = styled.div`

src/pages/Bugs/Content/BugsTable/hooks/useCampaignBugs.ts

@@ -41,6 +41,7 @@ export const useCampaignBugs = (campaignId: number) => {
   return {
     bugs,
     bugsError: error,
-    bugsLoading: isLoading || isFetching,
+    bugsLoading: isLoading,
+    bugsFetching: isFetching,
   };
 };

src/pages/Bugs/Content/BugsTable/hooks/useTableData.tsx

@@ -6,7 +6,8 @@ import { sortByUseCase } from '../utils/sortByUseCase';
 
 export const useTableData = (campaignId: number) => {
   // get  bugs accepted severities and usecases
-  const { bugs, bugsError, bugsLoading } = useCampaignBugs(campaignId);
+  const { bugs, bugsError, bugsLoading, bugsFetching } =
+    useCampaignBugs(campaignId);
   const { severities, severitiesError, severitiesLoading } =
     useCampaignSeverities(campaignId);
   const { useCases, useCasesError, useCasesLoading } =
@@ -28,8 +29,9 @@ export const useTableData = (campaignId: number) => {
         bugsByUseCases: [],
         bugsBySeverity: [],
       },
-      isLoading: true,
-      error: bugsError || severitiesError || useCasesError,
+      isLoading: bugsLoading,
+      isFetching: bugsFetching,
+      isError: bugsError || severitiesError || useCasesError,
     };
   }
 
@@ -43,7 +45,8 @@ export const useTableData = (campaignId: number) => {
       bugsByUseCases,
       bugsBySeverity,
     },
-    isLoading: false,
-    error: bugsError || severitiesError || useCasesError,
+    isLoading: bugsLoading,
+    isFetching: bugsFetching,
+    isError: bugsError || severitiesError || useCasesError,
   };
 };

src/pages/Bugs/Content/BugsTable/index.tsx

@@ -1,4 +1,5 @@
 import { useAppSelector } from 'src/app/hooks';
+import styled from 'styled-components';
 import { AllBugs } from './AllBugs';
 import { BugsByUsecase } from './BugsByUsecase';
 import { EmptyState } from './components/EmptyState';
@@ -7,23 +8,36 @@ import { useTableData } from './hooks/useTableData';
 
 const BugsTable = ({ campaignId }: { campaignId: number }) => {
   const { groupBy } = useAppSelector((state) => state.bugsPage);
-  const { data, isLoading, error } = useTableData(campaignId);
+  const { data, isLoading, isFetching, isError } = useTableData(campaignId);
 
-  if (isLoading || error) {
+  if (isLoading || isError) {
     return <LoadingState />;
   }
 
   if (!data.allBugs.length) {
     return <EmptyState />;
   }
 
+  const Wrapper = styled.div<{
+    isFetching?: boolean;
+  }>`
+    padding-top: ${(p) => p.theme.space.lg}};
+
+    ${(p) =>
+      p.isFetching &&
+      `
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+  `;
+
   return (
-    <div>
+    <Wrapper isFetching={isFetching}>
       {groupBy === 'usecase' && (
         <BugsByUsecase bugsByUseCases={data.bugsByUseCases} />
       )}
       {groupBy === 'ungrouped' && <AllBugs bugs={data.allBugs} />}
-    </div>
+    </Wrapper>
   );
 };
 

src/pages/Bugs/Content/components/BugHeader.tsx

@@ -50,7 +50,12 @@ export default ({
 
   return (
     <Container>
-      <Tag isPill={false} isRegular hue="rgba(0,0,0,0)">
+      <Tag
+        isPill={false}
+        isRegular
+        hue="rgba(0,0,0,0)"
+        style={{ paddingTop: `${globalTheme.space.base}px` }}
+      >
         {!bug.duplicated_of_id && (
           <Tag.Avatar>
             <FatherIcon

src/pages/Bugs/Content/index.tsx

@@ -2,7 +2,9 @@ import { Col, Grid, Row } from '@appquality/unguess-design-system';
 import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
 import { getSelectedBugId } from 'src/features/bugsPage/bugsPageSlice';
 import styled from 'styled-components';
+import { theme as globalTheme } from 'src/app/theme';
 import { BugsFilters } from '../Filters';
+import { FilterRecap } from '../Filters/FilterRecap';
 import { BugPreview } from './BugPreview';
 import BugsTable from './BugsTable';
 import BugsPageContentLoader from './ContentLoader';
@@ -17,22 +19,36 @@ const LayoutWrapperBugs = styled(LayoutWrapper)<{
     `}
 `;
 
+const LayoutWrapperFilters = styled(LayoutWrapper)`
+  background: white;
+  @media (min-width: ${(p) => p.theme.breakpoints.xl}) {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+`;
+
 const BugsPageContent = ({ campaignId }: { campaignId: number }) => {
   const currentBugId = getSelectedBugId();
 
   return (
     <>
-      <LayoutWrapper isNotBoxed>
+      <LayoutWrapperFilters isNotBoxed>
         <BugsFilters />
-      </LayoutWrapper>
+      </LayoutWrapperFilters>
       <LayoutWrapperBugs isNotBoxed isPreviewOpen={!!currentBugId}>
         <Grid gutters="xxl">
           <Row>
-            <Col xs={12} md={currentBugId ? 8 : 12}>
+            <Col
+              xs={12}
+              md={currentBugId ? 8 : 12}
+              style={{ paddingBottom: globalTheme.space.lg }}
+            >
+              <FilterRecap />
               <BugsTable campaignId={campaignId} />
             </Col>
             {currentBugId && (
-              <Col xs={12} md={4} style={{ paddingRight: 0 }}>
+              <Col xs={12} md={4} style={{ margin: 0 }}>
                 <BugPreview bugId={currentBugId} campaignId={campaignId} />
               </Col>
             )}

src/pages/Bugs/Filters/FilterRecap.tsx

@@ -8,6 +8,7 @@ import { useAppDispatch } from 'src/app/hooks';
 import { useTranslation } from 'react-i18next';
 import { theme } from 'src/app/theme';
 import { getPriorityInfo } from 'src/common/components/utils/getPriorityInfo';
+import styled from 'styled-components';
 
 const FilterRecapItem = ({
   type,
@@ -136,6 +137,13 @@ const FilterRecapItem = ({
   );
 };
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: ${(p) => p.theme.space.sm};
+  padding-top: ${(p) => p.theme.space.md};
+`;
+
 export const FilterRecap = () => {
   const { t } = useTranslation();
   const filters = getSelectedFilters();
@@ -152,7 +160,7 @@ export const FilterRecap = () => {
     filters.replicabilities?.length;
 
   return hasFilters ? (
-    <>
+    <Wrapper>
       {filters.severities && filters.severities.length
         ? filters.severities.map((severity) => (
             <FilterRecapItem
@@ -231,6 +239,6 @@ export const FilterRecap = () => {
       >
         {t('__BUGS_FILTER_VIEW_RESET_LABEL')}
       </Button>
-    </>
+    </Wrapper>
   ) : null;
 };

src/pages/Bugs/Filters/index.tsx

@@ -8,7 +8,6 @@ import { SeverityFilter } from './SeverityFilter';
 import { ReadFilter } from './ReadFilter';
 import { UniqueFilter } from './UniqueFilter';
 import { SearchFilter } from './SearchFilter';
-import { FilterRecap } from './FilterRecap';
 import { GroupBy } from './GroupBy';
 import { SortBy } from './SortBy';
 import { BugsFilterDrawer } from '../Drawer';
@@ -42,7 +41,10 @@ const HideOnMobile = styled.div`
   ${hideOnMobile}
 `;
 
-const FlexWrapper = styled.div<{ orderXl?: number; hideOnMobile?: boolean }>`
+export const FlexWrapper = styled.div<{
+  orderXl?: number;
+  hideOnMobile?: boolean;
+}>`
   column-gap: 8px;
   display: flex;
   flex-wrap: wrap;
@@ -60,13 +62,17 @@ const FlexWrapper = styled.div<{ orderXl?: number; hideOnMobile?: boolean }>`
   ${(p) => p.hideOnMobile && hideOnMobile}
 `;
 
+const Wrapper = styled.div`
+  padding-top: ${(p) => p.theme.space.sm};
+`;
+
 const BugsFilters = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
   return (
     <>
-      <div>
+      <Wrapper>
         <TableToolsContainer>
           <FlexWrapper orderXl={2} hideOnMobile>
             <SortBy />
@@ -94,10 +100,7 @@ const BugsFilters = () => {
             </Button>
           </FlexWrapper>
         </TableToolsContainer>
-        <FlexWrapper>
-          <FilterRecap />
-        </FlexWrapper>
-      </div>
+      </Wrapper>
       <BugsFilterDrawer />
     </>
   );

src/pages/Bugs/index.tsx

@@ -60,6 +60,7 @@ const Bugs = () => {
       }
       route="bugs"
       excludeMarginTop
+      excludeMarginBottom
     >
       {isLoading ? (
         <BugsPageContentLoader />

yarn.lock

@@ -47,10 +47,10 @@
     ajv-draft-04 "^1.0.0"
     call-me-maybe "^1.0.1"
 
-"@appquality/unguess-design-system@2.12.81":
-  version "2.12.81"
-  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.81.tgz#fc904f85f610a4c2ddd7952e1470b75e1a69f2dc"
-  integrity sha512-2GHvMBTjoa36cLOtSHT9/hjoHjOy+Owy/HeU9jE7z+SDNHXwrqmYV+P1WYoVTYo4Aek6gWN5ZPa7P/rXg0un4A==
+"@appquality/unguess-design-system@2.12.82":
+  version "2.12.82"
+  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.82.tgz#bc65898e652ddaf9a62b95072751ddfc794bad2b"
+  integrity sha512-WwVECYLk5r03xdstggsl5OhMutOnmRP4rLjs8AYx5ZUhnVC1LddnnuDCzYps/ka9dAzB6kcRVsrM0CzncGN3tQ==
   dependencies:
     "@nivo/bar" "^0.80.0"
     "@nivo/bullet" "^0.80.0"