dev: Fix spacing issues in filters and small fixes

Author: rsanteri

src/components/FilterInput/Filter.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import FilterPopup from '@components/FilterInput/FilterPopup';
-import Icon from '../Icon';
+import Icon from '@components/Icon';
 
 export type FilterProps = {
   label: string;
@@ -51,12 +52,20 @@ const Filter: React.FC<FilterProps> = ({ label, labelRenderer, value = '', onSel
   );
 };
 
-export const DefaultLabelRenderer = (label: string, value?: string | null) => (
-  <>
-    {`${label}${value ? ':' : ''}`}
-    {value ? <SelectedValue>{value}</SelectedValue> : ''}
-  </>
-);
+export const DefaultLabelRenderer = (label: string, value?: string | null) => {
+  const { t } = useTranslation();
+  const selectedValues = value?.split(',') || [];
+
+  const valueLabel =
+    selectedValues?.length > 1 ? `${selectedValues.length} ${t('filters.selected')}` : selectedValues?.[0];
+
+  return (
+    <>
+      {`${label}${value ? ':' : ''}`}
+      {value ? <SelectedValue>{valueLabel}</SelectedValue> : ''}
+    </>
+  );
+};
 
 const FilterBase = styled.div`
   position: relative;

src/components/FilterInput/FilterRows.tsx

@@ -69,3 +69,9 @@ export const FilterTextRow = styled.div`
   margin: 0.5rem 0;
   color: var(--color-text-secondary);
 `;
+
+export const FilterText = styled.span`
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  font-size: var(--font-size-3);
+`;

src/components/Table/index.tsx

@@ -143,7 +143,7 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
 
   return (
     <TH
-      active={active}
+      active={sortable && active}
       onClick={() => (sortable ? onSort(queryKey) : null)}
       {...rest}
       clickable={sortable}

src/pages/Home/Filters/TimerangeSelection.tsx

@@ -1,18 +1,15 @@
 import { TFunction } from 'i18next';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import spacetime from 'spacetime';
 import styled from 'styled-components';
 import Filter from '@components/FilterInput/Filter';
-import {
-  FilterClickableRow,
-  FilterPopupTrailing,
-  FilterSeparator,
-  FilterTextRow,
-} from '@components/FilterInput/FilterRows';
+import { FilterClickableRow, FilterSeparator, FilterText } from '@components/FilterInput/FilterRows';
 import DateInput from '@components/Form/DateInput';
+import HeightAnimatedContainer from '@components/HeightAnimatedContainer';
+import Icon from '@components/Icon';
 import { TimezoneContext } from '@components/TimezoneProvider';
-import { getDateTimeLocalString, getTimeFromPastByDays, getTimeRangeString } from '@utils/date';
+import { getDateTimeLocalString, getTimeFromPastByDays } from '@utils/date';
 
 export type TimerangeValues = { start: number | null; end: number | null };
 type Props = {
@@ -30,6 +27,7 @@ const TimerangeSelection: React.FC<Props> = ({ value, onChange }) => {
       <Filter
         label="Time frame"
         value={labelValue}
+        onClear={() => onChange({ start: null, end: null })}
         content={({ onClose }) => (
           <TimeRangePopup label={labelValue} value={value} onChange={onChange} onClose={onClose} />
         )}
@@ -43,9 +41,11 @@ const TimeRangePopup: React.FC<{
   label: string | null;
   onChange: (args: TimerangeValues) => void;
   onClose: () => void;
-}> = ({ value, onChange, onClose }) => {
+}> = ({ value, label, onChange }) => {
   const { t } = useTranslation();
   const { timezone } = useContext(TimezoneContext);
+  const [customOpen, setCustomOpen] = useState(label === t('date.custom'));
+
   const presets = [
     { label: t('date.today'), start: getTimeFromPastByDays(0, timezone), end: null },
     { label: t('date.yesterday'), start: getTimeFromPastByDays(1, timezone), end: getTimeFromPastByDays(0, timezone) },
@@ -61,31 +61,34 @@ const TimeRangePopup: React.FC<{
         </FilterClickableRow>
       ))}
       <FilterSeparator />
-      <FilterTextRow>{t('filters.custom')}</FilterTextRow>
-
-      <TimerangeFields>
-        <DateInput
-          inputType="datetime-local"
-          onChange={(newValue) => onChange({ ...value, start: newValue ? spacetime(newValue, timezone).epoch : null })}
-          initialValue={value.start ? getDateTimeLocalString(new Date(value.start), timezone) : undefined}
-        />
+      <FilterClickableRow onClick={() => setCustomOpen(!customOpen)}>
+        <CollapseRow>
+          <FilterText>{t('filters.custom')}</FilterText>
+          <Icon name="chevron" size="xs" rotate={customOpen ? -180 : 0} />
+        </CollapseRow>
+      </FilterClickableRow>
 
-        <DateInput
-          inputType="datetime-local"
-          onChange={(newValue) => onChange({ ...value, end: newValue ? spacetime(newValue, timezone).epoch : null })}
-          initialValue={value.end ? getDateTimeLocalString(new Date(value.end), timezone) : undefined}
-        />
-      </TimerangeFields>
+      <HeightAnimatedContainer>
+        {customOpen && (
+          <TimerangeFields>
+            <DateInput
+              inputType="datetime-local"
+              onChange={(newValue) =>
+                onChange({ ...value, start: newValue ? spacetime(newValue, timezone).epoch : null })
+              }
+              initialValue={value.start ? getDateTimeLocalString(new Date(value.start), timezone) : undefined}
+            />
 
-      <FilterPopupTrailing
-        clear={{
-          onClick: () => {
-            onChange({ start: null, end: null });
-            onClose();
-          },
-          disabled: value.start === null && value.end === null,
-        }}
-      />
+            <DateInput
+              inputType="datetime-local"
+              onChange={(newValue) =>
+                onChange({ ...value, end: newValue ? spacetime(newValue, timezone).epoch : null })
+              }
+              initialValue={value.end ? getDateTimeLocalString(new Date(value.end), timezone) : undefined}
+            />
+          </TimerangeFields>
+        )}
+      </HeightAnimatedContainer>
     </div>
   );
 };
@@ -111,19 +114,21 @@ function formatString(value: TimerangeValues, timezone: string, t: TFunction): s
     return t('date.yesterday');
   }
 
-  return getRawDateString(value, timezone);
-}
-
-function getRawDateString(value: TimerangeValues, timezone: string): string {
-  return `${value.start ? getTimeRangeString(new Date(value.start), timezone) : ''} - ${
-    value.end ? getTimeRangeString(new Date(value.end), timezone) : ''
-  }`;
+  return t('date.custom');
 }
 
 const TimerangeFields = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  margin-top: 0.5rem;
+`;
+
+const CollapseRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 export default TimerangeSelection;

src/translations/en.ts

@@ -85,6 +85,8 @@ const en = {
       'branch-placeholder': 'Filter by branch',
       'user-placeholder': 'Filter by user',
       'tag-placeholder': 'Filter by tag',
+
+      selected: 'selected',
     },
 
     run: {
@@ -303,6 +305,7 @@ const en = {
       twoweeks: 'Last 14 days',
       yesterday: 'Yesterday',
       today: 'Today',
+      custom: 'Custom',
     },
 
     debug: {