fix: merge conflicts and workflows failures

stakwork · Feb 1, 2024 · 956c72a · 956c72a
1 parent 76604f7
commit 956c72a
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 29 deletions.
diff --git a/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx b/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx
@@ -66,7 +66,7 @@ describe('Header Component', () => {
 
     const StartDate30 = today.clone().subtract(30, 'days');
     expect(monthElement).toHaveTextContent(
-      `${StartDate30.format('DD MMM YYYY')} - ${expectedEndDate.format('DD MMM YYYY')}`
+      `${StartDate30.format('DD MMM')} - ${expectedEndDate.format('DD MMM YYYY')}`
     );
 
     act(() => {

diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { EuiCheckboxGroup, EuiPopover, EuiText } from '@elastic/eui';
 import MaterialIcon from '@material/react-material-icon';
@@ -159,13 +159,6 @@ const SearchBar = styled.input`
   border: none;
 `;
 
-const SoryByContainer = styled.span`
-  padding: 10px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
 const NumberOfBounties = styled.div`
   height: 23px;
   padding: 1.5px 983.492px 1.5px 10px;
@@ -285,12 +278,6 @@ const DropDownButton = styled.button`
   padding-top: 5px;
 `;
 
-const FiltersLeft = styled.span`
-  display: flex;
-  height: 40px;
-  align-items: flex-start;
-`;
-
 const EuiPopOverCheckbox = styled.div<styledProps>`
   width: 147px;
   height: auto;
@@ -412,6 +399,18 @@ const StatusContainer = styled.div<styledProps>`
 `;
 
 const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
+
+const sortDirectionOptions = [
+  {
+    id: 'desc',
+    label: 'Newest First'
+  },
+  {
+    id: 'asc',
+    label: 'Oldest First'
+  }
+];
+
 export const OrgHeader = ({
   onChangeLanguage,
   checkboxIdToSelectedMapLanguage,
@@ -425,11 +424,25 @@ export const OrgHeader = ({
   const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
   const [filterClick, setFilterClick] = useState(false);
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
+  const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false);
+  const [sortDirection, setSortDirection] = useState<string>('desc');
+
   const onButtonClick = async () => {
     setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
   const closeStatusPopover = () => setIsStatusPopoverOpen(false);
 
+  const sortDirectionLabel = useMemo(
+    () => (sortDirection === 'asc' ? 'Oldest First' : 'Newest First'),
+    [sortDirection]
+  );
+
+  const onSortButtonClick = async () => {
+    setIsSortByPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
+  };
+
+  const closeSortByPopover = () => setIsSortByPopoverOpen(false);
+
   const selectedWidget = 'wanted';
   const filterRef = useRef<HTMLDivElement | null>(null);
   const { website, github } = organizationUrls;
@@ -453,10 +466,11 @@ export const OrgHeader = ({
         page: 1,
         resetPage: true,
         ...checkboxIdToSelectedMap,
-        languageString
+        languageString,
+        direction: sortDirection
       });
     }
-  }, [org_uuid, checkboxIdToSelectedMap, main, languageString]);
+  }, [org_uuid, checkboxIdToSelectedMap, sortDirection, main, languageString]);
 
   const handleClick = () => {
     setFilterClick(!filterClick);
@@ -476,7 +490,7 @@ export const OrgHeader = ({
     return () => {
       window.removeEventListener('click', handleWindowClick);
     };
-  }, [filterClick]);
+  }, [org_uuid, checkboxIdToSelectedMap, languageString, main, filterClick]);
 
   return (
     <>
@@ -553,7 +567,7 @@ export const OrgHeader = ({
                 <div
                   style={{
                     display: 'flex',
-                    flexDirection: 'row'
+                    flex: 'row'
                   }}
                 >
                   <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
@@ -598,15 +612,61 @@ export const OrgHeader = ({
               <Icon src={searchIcon} alt="Search" />
             </SearchWrapper>
           </FiltersRight>
-          <FiltersLeft>
-            <SoryByContainer>
-              <FilterLabel>Sort by:Newest First</FilterLabel>
-              <DropDownButton>
-                {' '}
-                <Img src={dropdown} alt="" />
-              </DropDownButton>
-            </SoryByContainer>
-          </FiltersLeft>
+          <EuiPopover
+            button={
+              <StatusContainer onClick={onSortButtonClick} className="CheckboxOuter" color={color}>
+                <div style={{ minWidth: '145px' }}>
+                  <EuiText
+                    className="statusText"
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  >
+                    Sort By: {sortDirectionLabel}
+                  </EuiText>
+                </div>
+
+                <div className="filterStatusIconContainer">
+                  <MaterialIcon
+                    className="materialStatusIcon"
+                    icon={`${isSortByPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}`}
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  />
+                </div>
+              </StatusContainer>
+            }
+            panelStyle={{
+              border: 'none',
+              boxShadow: `0px 1px 20px ${color.black90}`,
+              background: `${color.pureWhite}`,
+              borderRadius: '0px 0px 6px 6px',
+              maxWidth: '140px',
+              marginTop: '0px',
+              marginRight: '30px'
+            }}
+            isOpen={isSortByPopoverOpen}
+            closePopover={closeSortByPopover}
+            panelClassName="yourClassNameHere"
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row'
+              }}
+            >
+              <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
+                <EuiCheckboxGroup
+                  options={sortDirectionOptions}
+                  idToSelectedMap={{ [sortDirection]: true }}
+                  onChange={(id: string) => setSortDirection(id)}
+                />
+              </EuiPopOverCheckbox>
+            </div>
+          </EuiPopover>
         </Filters>
       </FillContainer>
       <NumberOfBounties>

diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -17,6 +17,7 @@ export interface BountyModalProps {
 
 export interface OrgBountyHeaderProps {
   organizationUrls: any;
+  direction?: string;
 }
 
 export interface FocusViewProps {

diff --git a/src/people/widgetViews/__tests__/OrgHeader.spec.tsx b/src/people/widgetViews/__tests__/OrgHeader.spec.tsx
@@ -13,6 +13,7 @@ const MockProps: OrgBountyHeaderProps = {
     Completed: false
   },
   languageString: '',
+  direction: 'desc',
   org_uuid: 'clf6qmo4nncmf23du7ng',
   onChangeStatus: jest.fn(),
   onChangeLanguage: jest.fn(),
@@ -67,7 +68,8 @@ describe('OrgHeader Component', () => {
 
       const updatedCheckboxIdToSelectedMap = {
         ...MockProps.checkboxIdToSelectedMap,
-        Open: true
+        Open: true,
+        direction: 'desc'
       };
 
       rerender(