Improve viewbar api (#2233)

* create scopes

* fix import bug

* add useView hook

* wip

* wip

* currentViewId is now retrieved via useView

* working on sorts with useView

* refactor in progress

* refactor in progress

* refactor in progress

* refactor in progress

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix code

* fix code

* wip

* push

* Fix issue dependencies

* Fix resize

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

front/src/modules/views/components/ViewBarDetails.tsx

@@ -0,0 +1,191 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { AddFilterFromDropdownButton } from '@/ui/data/filter/components/AddFilterFromDetailsButton';
+import { getOperandLabelShort } from '@/ui/data/filter/utils/getOperandLabel';
+import { IconArrowDown, IconArrowUp } from '@/ui/display/icon/index';
+
+import { useRemoveFilter } from '../hooks/useRemoveFilter';
+import { useView } from '../hooks/useView';
+import { useViewInternalStates } from '../hooks/useViewInternalStates';
+
+import SortOrFilterChip from './SortOrFilterChip';
+
+export type ViewBarDetailsProps = {
+  hasFilterButton?: boolean;
+  rightComponent?: ReactNode;
+};
+
+const StyledBar = styled.div`
+  align-items: center;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+  justify-content: space-between;
+  z-index: 4;
+`;
+
+const StyledChipcontainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 40px;
+  justify-content: space-between;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+  overflow-x: auto;
+`;
+
+const StyledCancelButton = styled.button`
+  background-color: inherit;
+  border: none;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: pointer;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: auto;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  padding: ${(props) => {
+    const horiz = props.theme.spacing(2);
+    const vert = props.theme.spacing(1);
+    return `${vert} ${horiz} ${vert} ${horiz}`;
+  }};
+  user-select: none;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.background.tertiary};
+    border-radius: ${({ theme }) => theme.spacing(1)};
+  }
+`;
+
+const StyledFilterContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+const StyledSeperatorContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSeperator = styled.div`
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.quaternary};
+  width: 1px;
+`;
+
+const StyledAddFilterContainer = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  z-index: 5;
+`;
+
+export const ViewBarDetails = ({
+  hasFilterButton = false,
+  rightComponent,
+}: ViewBarDetailsProps) => {
+  const {
+    currentViewSorts,
+    setCurrentViewSorts,
+    availableFilters,
+    currentViewFilters,
+    canPersistFilters,
+    canPersistSorts,
+    isViewBarExpanded,
+  } = useViewInternalStates();
+
+  const { resetViewBar } = useView();
+
+  const canPersistView = canPersistFilters || canPersistSorts;
+
+  const filtersWithDefinition = currentViewFilters?.map((filter) => {
+    const filterDefinition = availableFilters.find((availableFilter) => {
+      return availableFilter.key === filter.key;
+    });
+
+    return {
+      ...filter,
+      ...filterDefinition,
+    };
+  });
+
+  const removeFilter = useRemoveFilter();
+
+  const handleCancelClick = () => {
+    resetViewBar();
+  };
+
+  const handleSortRemove = (sortKey: string) =>
+    setCurrentViewSorts?.((previousSorts) =>
+      previousSorts.filter((sort) => sort.key !== sortKey),
+    );
+
+  const shouldExpandViewBar =
+    canPersistView ||
+    ((filtersWithDefinition?.length || currentViewSorts?.length) &&
+      isViewBarExpanded);
+
+  if (!shouldExpandViewBar) {
+    return null;
+  }
+
+  return (
+    <StyledBar>
+      <StyledFilterContainer>
+        <StyledChipcontainer>
+          {currentViewSorts?.map((sort) => {
+            return (
+              <SortOrFilterChip
+                key={sort.key}
+                testId={sort.key}
+                labelValue={sort.definition.label}
+                Icon={sort.direction === 'desc' ? IconArrowDown : IconArrowUp}
+                isSort
+                onRemove={() => handleSortRemove(sort.key)}
+              />
+            );
+          })}
+          {!!currentViewSorts?.length && !!filtersWithDefinition?.length && (
+            <StyledSeperatorContainer>
+              <StyledSeperator />
+            </StyledSeperatorContainer>
+          )}
+          {filtersWithDefinition?.map((filter) => {
+            return (
+              <SortOrFilterChip
+                key={filter.key}
+                testId={filter.key}
+                labelKey={filter.label}
+                labelValue={`${getOperandLabelShort(filter.operand)} ${
+                  filter.displayValue
+                }`}
+                Icon={filter.Icon}
+                onRemove={() => {
+                  removeFilter(filter.key);
+                }}
+              />
+            );
+          })}
+        </StyledChipcontainer>
+        {hasFilterButton && (
+          <StyledAddFilterContainer>
+            <AddFilterFromDropdownButton />
+          </StyledAddFilterContainer>
+        )}
+      </StyledFilterContainer>
+      {canPersistView && (
+        <StyledCancelButton
+          data-testid="cancel-button"
+          onClick={handleCancelClick}
+        >
+          Reset
+        </StyledCancelButton>
+      )}
+      {rightComponent}
+    </StyledBar>
+  );
+};