Style filter key in bold in filter and search bar (#86)

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/components/table/table-header/SortAndFilterBar.tsx

@@ -51,7 +51,7 @@ function SortAndFilterBar<SortField extends string>({
         return (
           <SortOrFilterChip
             key={sort.key}
-            label={sort.label}
+            labelValue={sort.label}
             id={sort.key}
             icon={sort.order === 'asc' ? faArrowDown : faArrowUp}
             onRemove={() => onRemoveSort(sort.key)}
@@ -62,7 +62,8 @@ function SortAndFilterBar<SortField extends string>({
         return (
           <SortOrFilterChip
             key={filter.id}
-            label={`${filter.label}: ${filter.operand.label} ${filter.value}`}
+            labelKey={filter.label}
+            labelValue={`${filter.operand.label} ${filter.value}`}
             id={filter.id}
             icon={filter.icon}
             onRemove={() => onRemoveFilter(filter.id)}

front/src/components/table/table-header/SortOrFilterChip.tsx

@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type OwnProps = {
   id: string;
-  label: string;
+  labelKey?: string;
+  labelValue: string;
   icon: IconProp;
   onRemove: () => void;
 };
@@ -30,13 +31,24 @@ const StyledDelete = styled.div`
   cursor: pointer;
 `;
 
-function SortOrFilterChip({ id, label, icon, onRemove }: OwnProps) {
+const StyledLabelKey = styled.div`
+  font-weight: 500;
+`;
+
+function SortOrFilterChip({
+  id,
+  labelKey,
+  labelValue,
+  icon,
+  onRemove,
+}: OwnProps) {
   return (
     <StyledChip>
       <StyledIcon>
         <FontAwesomeIcon icon={icon} />
       </StyledIcon>
-      {label}
+      {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
+      {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
         <FontAwesomeIcon icon={faTimes} />
       </StyledDelete>

front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx

@@ -1,7 +1,7 @@
 import SortOrFilterChip from '../SortOrFilterChip';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { faArrowDown } from '@fortawesome/pro-regular-svg-icons';
+import { faArrowDown, faPeople } from '@fortawesome/pro-regular-svg-icons';
 
 const component = {
   title: 'SortOrFilterChip',
@@ -14,13 +14,27 @@ type OwnProps = {
   removeFunction: () => void;
 };
 
-export const RegularSortOrFilterChip = ({ removeFunction }: OwnProps) => {
+export const RegularFilterChip = ({ removeFunction }: OwnProps) => {
   return (
     <ThemeProvider theme={lightTheme}>
       <SortOrFilterChip
         id="test_sort"
-        icon={faArrowDown}
-        label="Test sort"
+        icon={faPeople}
+        labelKey="Account owner"
+        labelValue="is Charles"
+        onRemove={removeFunction}
+      />
+    </ThemeProvider>
+  );
+};
+
+export const RegularSortChip = ({ removeFunction }: OwnProps) => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <SortOrFilterChip
+        id="test_sort"
+        icon={faArrowDown}
+        labelValue="Created at"
         onRemove={removeFunction}
       />
     </ThemeProvider>

front/src/components/table/table-header/__tests__/SortOrFilterChip.test.tsx

@@ -1,14 +1,29 @@
 import { fireEvent, render } from '@testing-library/react';
 
-import { RegularSortOrFilterChip } from '../__stories__/SortOrFilterChip.stories';
+import {
+  RegularFilterChip,
+  RegularSortChip,
+} from '../__stories__/SortOrFilterChip.stories';
 
 const removeFunction = jest.fn();
 
-it('Checks the RegularSortOrFilterChip renders', async () => {
+it('Checks the filter chip renders', async () => {
   const { getByText, getByTestId } = render(
-    <RegularSortOrFilterChip removeFunction={removeFunction} />,
+    <RegularFilterChip removeFunction={removeFunction} />,
   );
-  expect(getByText('Test sort')).toBeDefined();
+  expect(getByText('Account owner:')).toBeDefined();
+
+  const removeIcon = getByTestId('remove-icon-test_sort');
+  fireEvent.click(removeIcon);
+
+  expect(removeFunction).toHaveBeenCalled();
+});
+
+it('Checks the sort chip renders', async () => {
+  const { getByText, getByTestId } = render(
+    <RegularSortChip removeFunction={removeFunction} />,
+  );
+  expect(getByText('Created at')).toBeDefined();
 
   const removeIcon = getByTestId('remove-icon-test_sort');
   fireEvent.click(removeIcon);

infra/dev/hasura/entrypoint.sh

@@ -1,11 +1,15 @@
 #!/bin/bash
 
 graphql-engine serve &
+echo "Waiting for Hasura to be ready..."
 
 while ! curl -s http://localhost:8080/healthz > /dev/null ; do 
   sleep 1
+  echo "Waiting for Hasura to be ready..."
 done
 
+sleep 1
+
 hasura deploy
 
 socat TCP-LISTEN:9695,fork,reuseaddr,bind=twenty-hasura TCP:127.0.0.1:9695 &