Merge pull request #2028 from bakdata/feature/use-index-prefix-for-fi…

…lter-references Feature/use index prefix for filter references
ingef · Aug 17, 2021 · ad3053c · ad3053c
2 parents 815a064 + 83c059f
commit ad3053c
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 10 deletions.
diff --git a/frontend/src/js/common/components/IndexPrefix.ts b/frontend/src/js/common/components/IndexPrefix.ts
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const IndexPrefix = styled("span")`
+  display: inline-block;
+  margin-right: 7px;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background-color: ${({ theme }) => theme.col.blueGrayVeryLight};
+  padding: 3px;
+  line-height: 1;
+  font-size: ${({ theme }) => theme.font.tiny};
+`;
diff --git a/frontend/src/js/form-components/InputDateRange.tsx b/frontend/src/js/form-components/InputDateRange.tsx
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import React, { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
+import { IndexPrefix } from "../common/components/IndexPrefix";
 import {
   formatDateFromState,
   parseDate,
@@ -35,7 +36,7 @@ const StyledLabel = styled(Label)<{ large?: boolean }>`
     `}
 `;
 
-const StyledLabeled = styled(Labeled)`
+const SxLabeled = styled(Labeled)`
   &:first-of-type {
     margin-right: 10px;
     margin-bottom: 10px;
@@ -44,6 +45,7 @@ const StyledLabeled = styled(Labeled)`
 
 interface PropsT {
   label?: ReactNode;
+  indexPrefix?: number;
   labelSuffix?: ReactNode;
   className?: string;
   inline?: boolean;
@@ -73,6 +75,7 @@ const InputDateRange: FC<PropsT> = ({
   inline,
   center,
   label,
+  indexPrefix,
   autoFocus,
   labelSuffix,
   input: { value, onChange },
@@ -133,13 +136,14 @@ const InputDateRange: FC<PropsT> = ({
     <Root center={center}>
       {label && (
         <StyledLabel large={large}>
+          {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
           {label}
           <InfoTooltip text={t("inputDateRange.tooltip.possiblePattern")} />
           {labelSuffix && labelSuffix}
         </StyledLabel>
       )}
       <Pickers inline={inline} center={center}>
-        <StyledLabeled label={t("inputDateRange.from")}>
+        <SxLabeled label={t("inputDateRange.from")}>
           <BaseInput
             inputType="text"
             value={min}
@@ -154,8 +158,8 @@ const InputDateRange: FC<PropsT> = ({
               autoFocus,
             }}
           />
-        </StyledLabeled>
-        <StyledLabeled label={t("inputDateRange.to")}>
+        </SxLabeled>
+        <SxLabeled label={t("inputDateRange.to")}>
           <BaseInput
             inputType="text"
             value={max}
@@ -167,7 +171,7 @@ const InputDateRange: FC<PropsT> = ({
             }
             onBlur={(e) => applyDate("max", e.target.value, displayDateFormat)}
           />
-        </StyledLabeled>
+        </SxLabeled>
       </Pickers>
     </Root>
   );

diff --git a/frontend/src/js/form-components/InputMultiSelect.tsx b/frontend/src/js/form-components/InputMultiSelect.tsx
@@ -78,6 +78,7 @@ export interface MultiSelectInputProps {
 
 export interface InputMultiSelectProps {
   label?: string;
+  indexPrefix?: number;
   options: SelectOptionT[];
   disabled?: boolean;
   tooltip?: string;
@@ -200,6 +201,7 @@ const InputMultiSelect: FC<InputMultiSelectProps> = (props) => {
           {props.tooltip && <InfoTooltip text={props.tooltip} />}
         </>
       }
+      indexPrefix={props.indexPrefix}
     >
       {hasTooManyValues && (
         <TooManyValues

diff --git a/frontend/src/js/form-components/InputPlain.tsx b/frontend/src/js/form-components/InputPlain.tsx
@@ -18,6 +18,7 @@ const SxBaseInput = styled(BaseInput)<{ fullWidth?: boolean }>`
 
 interface Props<T> extends InputProps<T> {
   label: string;
+  indexPrefix?: number;
   inputType?: string;
   money?: boolean;
   className?: string;
@@ -39,6 +40,7 @@ const InputPlain = <T extends string | number | null = string | null>(
       label={props.label}
       tinyLabel={props.tinyLabel}
       largeLabel={props.large}
+      indexPrefix={props.indexPrefix}
     >
       <SxBaseInput
         large={props.large}

diff --git a/frontend/src/js/form-components/InputRange.tsx b/frontend/src/js/form-components/InputRange.tsx
@@ -37,6 +37,7 @@ export type ModeT = "range" | "exact";
 interface PropsType extends InputProps<ValueT | null> {
   moneyRange?: boolean;
   label: string;
+  indexPrefix?: number;
   unit?: string;
   limits?: {
     min?: number;
@@ -72,6 +73,7 @@ const InputRange = ({
   placeholder,
   disabled,
   label,
+  indexPrefix,
   unit,
   tooltip,
   onSwitchMode,
@@ -123,6 +125,7 @@ const InputRange = ({
       <InputRangeHeader
         disabled={disabled}
         label={label}
+        indexPrefix={indexPrefix}
         unit={unit}
         tooltip={tooltip}
       />

diff --git a/frontend/src/js/form-components/InputRangeHeader.tsx b/frontend/src/js/form-components/InputRangeHeader.tsx
@@ -1,11 +1,14 @@
 import styled from "@emotion/styled";
 import React, { FC } from "react";
 
+import { IndexPrefix } from "../common/components/IndexPrefix";
+import { exists } from "../common/helpers/exists";
 import InfoTooltip from "../tooltip/InfoTooltip";
 
 interface PropsT {
   className?: string;
   label: string;
+  indexPrefix?: number;
   unit?: string;
   tooltip?: string;
   disabled?: boolean;
@@ -15,17 +18,21 @@ const Container = styled("p")<{ disabled?: boolean }>`
   font-size: ${({ theme }) => theme.font.sm};
   margin: 6px 0 3px;
   color: ${({ theme, disabled }) => (disabled ? theme.col.gray : "initial")};
+  display: flex;
+  align-items: center;
 `;
 
 const InputRangeHeader: FC<PropsT> = ({
   label,
+  indexPrefix,
   unit,
   className,
   tooltip,
   disabled,
 }) => {
   return (
     <Container className={className} disabled={disabled}>
+      {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
       {label}
       {unit && ` ( ${unit} )`}
       {tooltip && <InfoTooltip text={tooltip} />}

diff --git a/frontend/src/js/form-components/InputSelect.tsx b/frontend/src/js/form-components/InputSelect.tsx
@@ -11,6 +11,7 @@ import ReactSelect from "./ReactSelect";
 interface PropsT {
   className?: string;
   label?: string;
+  indexPrefix?: number;
   options: SelectOptionT[];
   disabled?: boolean;
   small?: boolean;
@@ -30,6 +31,7 @@ const InputSelect = ({
   small,
   input,
   label,
+  indexPrefix,
   options,
   disabled,
   selectProps,
@@ -50,6 +52,7 @@ const InputSelect = ({
       className={className}
       disabled={disabled}
       valueChanged={!isEmpty(input.value) && input.value !== input.defaultValue}
+      indexPrefix={indexPrefix}
       label={
         <>
           {!!label && label}

diff --git a/frontend/src/js/form-components/Label.tsx b/frontend/src/js/form-components/Label.tsx
@@ -3,14 +3,14 @@ import styled from "@emotion/styled";
 const Label = styled("span")<{
   tiny?: boolean;
   large?: boolean;
-  inline?: boolean;
   disabled?: boolean;
   fullWidth?: boolean;
 }>`
   font-size: ${({ theme, tiny, large }) =>
     large ? theme.font.md : tiny ? theme.font.xs : theme.font.sm};
-  display: ${({ inline }) => (inline ? "inline-block" : "block")};
-  margin: ${({ inline }) => (inline ? "0" : "6px 0 3px")};
+  display: flex;
+  align-items: center;
+  margin: 6px 0 3px;
   color: ${({ theme, disabled }) => (disabled ? theme.col.gray : "initial")};
   width: ${({ fullWidth }) => (fullWidth ? "100%" : "inherit")};
 `;

diff --git a/frontend/src/js/form-components/Labeled.tsx b/frontend/src/js/form-components/Labeled.tsx
@@ -2,6 +2,9 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React, { ReactNode } from "react";
 
+import { IndexPrefix } from "../common/components/IndexPrefix";
+import { exists } from "../common/helpers/exists";
+
 import Label from "./Label";
 
 const Root = styled("label")<{ fullWidth?: boolean }>`
@@ -17,6 +20,7 @@ const Root = styled("label")<{ fullWidth?: boolean }>`
 
 interface Props {
   label: ReactNode;
+  indexPrefix?: number;
   className?: string;
   tinyLabel?: boolean;
   largeLabel?: boolean;
@@ -25,6 +29,7 @@ interface Props {
 }
 
 const Labeled = ({
+  indexPrefix,
   className,
   fullWidth,
   label,
@@ -35,6 +40,7 @@ const Labeled = ({
   return (
     <Root className={className} fullWidth={fullWidth}>
       <Label fullWidth={fullWidth} tiny={tinyLabel} large={largeLabel}>
+        {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
         {label}
       </Label>
       {children}

diff --git a/frontend/src/js/query-node-editor/ContentCell.tsx b/frontend/src/js/query-node-editor/ContentCell.tsx
@@ -12,11 +12,11 @@ const Root = styled("div")`
 
 const Content = styled("div")`
   flex-grow: 1;
-  padding: 6px 10px;
+  padding: 3px 10px;
 `;
 
 const Headline = styled(Heading4)`
-  margin: 12px 10px 0;
+  margin: 14px 10px 0;
 `;
 
 interface PropsT {

diff --git a/frontend/src/js/query-node-editor/ResolvableMultiSelect.tsx b/frontend/src/js/query-node-editor/ResolvableMultiSelect.tsx
@@ -24,6 +24,7 @@ interface PropsT {
   context: FilterContextT;
 
   label: string;
+  indexPrefix?: number;
   options: SelectOptionT[];
   disabled?: boolean;
   tooltip?: string;
@@ -40,6 +41,7 @@ const ResolvableMultiSelect: FC<PropsT> = ({
   context,
   input,
   label,
+  indexPrefix,
   options,
   disabled,
   allowDropFile,
@@ -146,6 +148,7 @@ const ResolvableMultiSelect: FC<PropsT> = ({
         isLoading={isLoading || loading}
         startLoadingThreshold={startLoadingThreshold}
         disabled={disabled}
+        indexPrefix={indexPrefix}
         onLoad={onLoad}
         onDropFile={onDropFile}
         allowDropFile={allowDropFile}

diff --git a/frontend/src/js/query-node-editor/TableFilters.tsx b/frontend/src/js/query-node-editor/TableFilters.tsx
@@ -52,6 +52,7 @@ const TableFilters = (props: PropsT) => {
             case "SELECT":
               return (
                 <InputSelect
+                  indexPrefix={filterIdx + 1}
                   input={{
                     clearable: filter.value !== filter.defaultValue,
                     defaultValue: filter.defaultValue,
@@ -68,6 +69,7 @@ const TableFilters = (props: PropsT) => {
               return (
                 <ResolvableMultiSelect
                   context={{ ...props.context, filterId: filter.id }}
+                  indexPrefix={filterIdx + 1}
                   input={{
                     value: filter.value,
                     defaultValue: filter.defaultValue,
@@ -83,6 +85,7 @@ const TableFilters = (props: PropsT) => {
             case "BIG_MULTI_SELECT":
               return (
                 <ResolvableMultiSelect
+                  indexPrefix={filterIdx + 1}
                   context={{ ...props.context, filterId: filter.id }}
                   input={{
                     value: filter.value || [],
@@ -104,6 +107,7 @@ const TableFilters = (props: PropsT) => {
             case "INTEGER_RANGE":
               return (
                 <InputRange
+                  indexPrefix={filterIdx + 1}
                   input={{
                     value: filter.value,
                     defaultValue: filter.defaultValue,
@@ -125,6 +129,7 @@ const TableFilters = (props: PropsT) => {
             case "REAL_RANGE":
               return (
                 <InputRange
+                  indexPrefix={filterIdx + 1}
                   input={{
                     value: filter.value,
                     defaultValue: filter.defaultValue,
@@ -147,6 +152,7 @@ const TableFilters = (props: PropsT) => {
             case "MONEY_RANGE":
               return (
                 <InputRange
+                  indexPrefix={filterIdx + 1}
                   moneyRange
                   input={{
                     value: filter.value,
@@ -168,6 +174,7 @@ const TableFilters = (props: PropsT) => {
             case "STRING":
               return (
                 <InputPlain
+                  indexPrefix={filterIdx + 1}
                   input={{
                     value: filter.value || "",
                     defaultValue: filter.defaultValue,