feat: add FilterList to TreeDetails page

dashboard/src/api/TreeDetails.tsx

@@ -12,7 +12,7 @@ const fetchTreeDetailData = async (
 
   Object.keys(filter).forEach(key => {
     const filterList = filter[key as keyof TTreeDetailsFilter];
-    filterList?.map(value =>
+    filterList?.forEach(value =>
       filterParam.append(`filter_${key}`, value.toString()),
     );
   });

dashboard/src/components/Filter/Drawer.tsx

@@ -16,7 +16,6 @@ import { Separator } from '../ui/separator';
 
 interface IDrawerLink {
   treeURL: string;
-  onRefresh?: () => void;
 }
 
 interface IFilterDrawer extends IDrawerLink {
@@ -41,10 +40,10 @@ const DrawerHeader = (): JSX.Element => {
   );
 };
 
-const DrawerLink = ({ treeURL, onRefresh }: IDrawerLink): JSX.Element => {
+const DrawerLink = ({ treeURL }: IDrawerLink): JSX.Element => {
   return (
     <div className="flex justify-between items-center mb-8">
-      <div className="w-[766px] h-[52px] px-4 py-2 bg-white border border-darkGray flex flex-col">
+      <div className="w-full h-[52px] px-4 py-2 bg-white border border-darkGray flex flex-col">
         <span className="text-xs text-darkGray2">
           <FormattedMessage id="filter.treeURL" />
         </span>
@@ -56,21 +55,13 @@ const DrawerLink = ({ treeURL, onRefresh }: IDrawerLink): JSX.Element => {
           {treeURL}
         </a>
       </div>
-      <Button
-        onClick={onRefresh}
-        variant="outline"
-        className="w-[200px] rounded-full border-2 border-black"
-      >
-        <FormattedMessage id="filter.refresh" />
-      </Button>
     </div>
   );
 };
 
 const Drawer = ({
   treeURL,
   children,
-  onRefresh,
   onCancel,
   onFilter,
 }: IFilterDrawer): JSX.Element => {
@@ -85,7 +76,7 @@ const Drawer = ({
       <DrawerContent className="flex items-center px-4 bg-lightGray max-h-screen">
         <DrawerHeader />
         <section className="overflow-y-auto max-h-full">
-          <DrawerLink treeURL={treeURL} onRefresh={onRefresh} />
+          <DrawerLink treeURL={treeURL} />
           <div className="w-[1000px] rounded-lg bg-white">
             {React.Children.map(children, (child, idx) => (
               <>

dashboard/src/components/FilterList/FilterList.stories.tsx

@@ -31,7 +31,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    itens: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+    items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
   },
   decorators: [
     (story): JSX.Element => (
@@ -47,7 +47,7 @@ export const Default: Story = {
 
 export const MultipleLines: Story = {
   args: {
-    itens: [
+    items: [
       'linux-5.15.y',
       'Status:failed',
       'Status: Warnings',

dashboard/src/components/FilterList/FilterList.tsx

@@ -5,16 +5,16 @@ import { useIntl } from 'react-intl';
 
 import { Button } from '../ui/button';
 
-interface IFilterList {
-  itens: string[];
-  onClickItem: (itemIdx: number) => void;
+export interface IFilterList {
+  items: string[];
+  onClickItem: (item: string, itemIdx: number) => void;
   onClickCleanAll: () => void;
   removeOnEmpty?: boolean;
 }
 
 interface IFilterItem extends IFilterButton {
   idx: number;
-  onClickItem: (idx: number) => void;
+  onClickItem: (item: string, itemIdx: number) => void;
 }
 
 export interface IFilterButton
@@ -57,8 +57,8 @@ const FilterItem = ({
   ...props
 }: IFilterItem): JSX.Element => {
   const onClickHandler = useCallback(
-    () => onClickItem(idx),
-    [onClickItem, idx],
+    () => onClickItem(text, idx),
+    [text, onClickItem, idx],
   );
 
   return (
@@ -72,7 +72,7 @@ const FilterItem = ({
 };
 
 const FilterList = ({
-  itens,
+  items,
   onClickItem,
   onClickCleanAll,
   removeOnEmpty = false,
@@ -81,25 +81,26 @@ const FilterList = ({
 
   const buttonList = useMemo(
     () =>
-      itens.map((item, idx) => (
+      items.map((item, idx) => (
         <FilterItem
           key={idx + item}
           text={item}
           onClickItem={onClickItem}
           idx={idx}
         />
       )),
-    [itens, onClickItem],
+    [items, onClickItem],
   );
 
-  if (removeOnEmpty && !itens) {
+  if (removeOnEmpty && !items.length) {
     return <></>;
   }
 
   return (
     <div className="flex flex-wrap gap-4">
       {buttonList}
       <FilterButton
+        className="hover:bg-darkGray2"
         text={intl.formatMessage({ id: 'global.cleanAll' })}
         variant="primary"
         onClick={onClickCleanAll}

dashboard/src/components/Tabs/Tabs.tsx

@@ -15,9 +15,14 @@ export interface ITabItem {
 export interface ITabsComponent {
   tabs: ITabItem[];
   defaultTab: ITabItem;
+  filterListElement?: JSX.Element;
 }
 
-const TabsComponent = ({ defaultTab, tabs }: ITabsComponent): JSX.Element => {
+const TabsComponent = ({
+  defaultTab,
+  tabs,
+  filterListElement,
+}: ITabsComponent): JSX.Element => {
   const tabsTrigger = useMemo(
     () =>
       tabs.map(tab => (
@@ -48,6 +53,8 @@ const TabsComponent = ({ defaultTab, tabs }: ITabsComponent): JSX.Element => {
   return (
     <Tabs defaultValue={defaultTab.name} className="w-full">
       <TabsList className="w-full justify-start">{tabsTrigger}</TabsList>
+      <div className="py-6">{filterListElement}</div>
+
       {tabsContent}
     </Tabs>
   );

dashboard/src/components/Tabs/TreeDetailsTab.tsx

@@ -5,10 +5,12 @@ import TreeDetailsBuildTab from './TreeDetails/TreeDetailsBuildTab';
 
 export interface ITreeDetailsBuildTab {
   treeDetailsData?: ITreeDetails;
+  filterListElement?: JSX.Element;
 }
 
 const TreeDetailsTab = ({
   treeDetailsData,
+  filterListElement,
 }: ITreeDetailsBuildTab): JSX.Element => {
   const buildsTab: ITabItem = {
     name: 'treeDetails.builds',
@@ -29,8 +31,13 @@ const TreeDetailsTab = ({
   };
 
   const treeDetailsTab = [buildsTab, bootsTab, testsTab];
-
-  return <Tabs tabs={treeDetailsTab} defaultTab={treeDetailsTab[0]} />;
+  return (
+    <Tabs
+      tabs={treeDetailsTab}
+      defaultTab={treeDetailsTab[0]}
+      filterListElement={filterListElement}
+    />
+  );
 };
 
 export default TreeDetailsTab;

dashboard/src/routes/TreeDetails/TreeDetails.tsx

@@ -1,19 +1,20 @@
 import { useParams } from 'react-router-dom';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 
 import { useTreeDetails } from '@/api/TreeDetails';
 import TreeDetailsTab from '@/components/Tabs/TreeDetailsTab';
 import { IListingItem } from '@/components/ListingItem/ListingItem';
 import { ISummaryItem } from '@/components/Summary/Summary';
-import {
-  AccordionItemBuilds,
-  Results,
-  TTreeDetailsFilter,
-  TreeDetails as TreeDetailsType,
-} from '@/types/tree/TreeDetails';
+import { AccordionItemBuilds, Results } from '@/types/tree/TreeDetails';
 
-import TreeDetailsFilter from './TreeDetailsFilter';
+import TreeDetailsFilter, {
+  createFilter,
+  mapFilterToReq,
+  TFilter,
+} from './TreeDetailsFilter';
+
+import TreeDetailsFilterList from './TreeDetailsFilterList';
 
 export interface ITreeDetails {
   archs: ISummaryItem[];
@@ -24,17 +25,35 @@ export interface ITreeDetails {
 
 const TreeDetails = (): JSX.Element => {
   const { treeId } = useParams();
-  const [filter, setFilter] = useState<
-    TTreeDetailsFilter | Record<string, never>
-  >({});
-  const { data } = useTreeDetails(treeId ?? '', filter);
+  const [filter, setFilter] = useState<TFilter>({});
+  const reqFilter = mapFilterToReq(filter);
+
+  const { data } = useTreeDetails(treeId ?? '', reqFilter);
 
   const [treeDetailsData, setTreeDetailsData] = useState<ITreeDetails>();
-  const initialDataRef = useRef<TreeDetailsType | undefined>();
-  if (!initialDataRef.current) {
-    initialDataRef.current = data;
+
+  if (data && Object.keys(filter).length === 0) {
+    setFilter(createFilter(data));
   }
 
+  const filterListElement = useMemo(
+    () => <TreeDetailsFilterList filter={filter} onFilter={setFilter} />,
+    [filter],
+  );
+
+  //TODO: at some point `treeUrl` should be returned in `data`
+  const treeUrl = useMemo(() => {
+    let url = '';
+    if (!data) return '';
+    Object.entries(data.builds).some(([, build]) => {
+      if (build.git_repository_url) {
+        url = build.git_repository_url;
+        return true;
+      }
+    });
+    return url;
+  }, [data]);
+
   useEffect(() => {
     if (data) {
       const configsData: IListingItem[] = Object.entries(
@@ -95,11 +114,15 @@ const TreeDetails = (): JSX.Element => {
       <div className="flex flex-col pb-2">
         <div className="flex justify-end">
           <TreeDetailsFilter
-            data={initialDataRef.current}
+            filter={filter}
             onFilter={setFilter}
+            treeUrl={treeUrl}
           />
         </div>
-        <TreeDetailsTab treeDetailsData={treeDetailsData} />
+        <TreeDetailsTab
+          treeDetailsData={treeDetailsData}
+          filterListElement={filterListElement}
+        />
       </div>
     </div>
   );