Merge pull request #3626 from ingef/feature/display-connector-name

show connector/table when referencing a filter
ingef · Nov 29, 2024 · 7a125d4 · 7a125d4
2 parents fef7c7b + 04fb322
commit 7a125d4
Show file tree

Hide file tree

Showing 16 changed files with 301 additions and 14 deletions.
diff --git a/cypress/e2e/frontend/test_1_runQuery.cy.js b/cypress/e2e/frontend/test_1_runQuery.cy.js
@@ -62,3 +62,87 @@ describe("Run query", () => {
     cy.get('@executionList').contains('Anfrage jetzt löschen').click();
   });
 });
+
+describe("Reference list", () => {
+  beforeEach(() => {
+    // run these tests as if in a desktop
+    // browser with a 720p monitor
+    cy.viewport(1280, 720)
+
+    visitWithToken(USER_TOKEN_WITH_PERMISSIONS);
+  });
+
+  it("Use reference list to resolve concept", () =>{
+    cy.get('[data-test-id="right-pane-container"] >div:visible').as("queryEditor");
+
+    // We need force here because the input is invisible
+    cy.get("@queryEditor").get('input[type=file]').selectFile('cypress/support/test_data/concept_reference_list.txt', {"force": true})
+    cy.get('@queryEditor')
+      .find('[data-test-id="uploadConceptListModal"]')
+      .as("uploadConceptListModal")
+      .find('[data-test-id="selection-dropdown"]').click()
+
+    // Choose a concept
+    cy.get('@uploadConceptListModal')
+    .find('[data-test-id="select-options"]').contains("MultiConnector").first().click()
+
+    // We expect that one value 'b' cannot be resolved
+    cy.get('@uploadConceptListModal').contains("1 Wert nicht aufgelöst")
+    cy.get('@uploadConceptListModal').find('[data-test-id="unresolvable-list"]').contains('b')
+    // 'a1' can be resolved
+    cy.get('@uploadConceptListModal').contains("1 Wert aufgelöst.")
+
+    // Change list name
+    cy.get('@uploadConceptListModal').find('[data-test-id="insert-form"]').as("insert-form")
+    cy.get('@insert-form').find('input[type=text]').should('have.value', 'concept_reference_list')
+    cy.get('@insert-form').find('button[type=button]').click()
+    cy.get('@insert-form').find('input[type=text]').type("My List")
+
+    // Insert elements
+    cy.get('@uploadConceptListModal').find('[data-test-id="insert"]').click()
+
+    // Check that node was inserted in query editor
+    cy.get('@queryEditor').find('[data-test-id="query-group"]').contains("MultiConnector")
+    cy.get('@queryEditor').find('[data-test-id="query-group"]').contains("My List")
+  })
+
+  it("Use reference list to resolve filter values", () =>{
+    cy.get('[data-test-id="right-pane-container"] >div:visible').as("queryEditor");
+
+    // We need force here because the input is invisible
+    cy.get("@queryEditor").get('input[type=file]').selectFile('cypress/support/test_data/filter_value_reference_list.txt', {"force": true})
+    cy.get('@queryEditor')
+      .find('[data-test-id="uploadConceptListModal"]')
+      .as("uploadConceptListModal")
+      .find('[data-test-id="selection-dropdown"]').click()
+
+    // Choose a concept
+    cy.get('@uploadConceptListModal')
+    .find('[data-test-id="select-options"]').contains("connector1").first().click()
+
+    // We expect that one value 'b' cannot be resolved
+    cy.get('@uploadConceptListModal').contains("1 Wert nicht aufgelöst")
+    cy.get('@uploadConceptListModal').find('[data-test-id="unresolvable-list"]').contains('b')
+    // 'a1' can be resolved
+    cy.get('@uploadConceptListModal').contains("2 Werte aufgelöst.")
+
+    // Change list name
+    cy.get('@uploadConceptListModal').find('[data-test-id="insert-form"]').as("insert-form")
+    cy.get('@insert-form').find('input[type=text]').should('have.value', 'filter_value_reference_list')
+    cy.get('@insert-form').find('button[type=button]').click()
+    cy.get('@insert-form').find('input[type=text]').type("My List")
+
+    // Insert elements
+    cy.get('@uploadConceptListModal').find('[data-test-id="insert"]').click()
+
+    // Check that node was inserted in query editor
+    cy.get('@queryEditor').find('[data-test-id="query-group"]').contains("MultiConnector").click()
+
+    // Check that filter values are set corretly
+    cy.get("@queryEditor")
+      .find('[data-test-id="table-filter-dataset1.multiconnector.connector1.big_multi_select"]').as("multi_select")
+      cy.get("@multi_select").scrollIntoView()
+      cy.get("@multi_select").find('p').eq(0).contains('a')
+      cy.get("@multi_select").find('p').eq(1).contains('abc')
+  })
+})
diff --git a/cypress/support/test_data/all_types.concept.json b/cypress/support/test_data/all_types.concept.json
@@ -79,7 +79,8 @@
             {
                 "label": "BIG_MULTI_SELECT",
                 "column": "table.STRING",
-                "type": "BIG_MULTI_SELECT"
+                "type": "BIG_MULTI_SELECT",
+                "allowDropFile": true
             },
             {
                 "label": "DURATION_SUM",

diff --git a/cypress/support/test_data/all_types.table copy.json b/cypress/support/test_data/all_types.table copy.json
@@ -0,0 +1,41 @@
+{
+    "name": "table",
+    "columns": [
+        {
+            "name": "id",
+            "type": "STRING"
+        },
+        {
+            "name": "STRING",
+            "type": "STRING"
+        },
+        {
+            "name": "INTEGER",
+            "type": "INTEGER"
+        },
+        {
+            "name": "BOOLEAN",
+            "type": "BOOLEAN"
+        },
+        {
+            "name": "REAL",
+            "type": "REAL"
+        },
+        {
+            "name": "DECIMAL",
+            "type": "DECIMAL"
+        },
+        {
+            "name": "MONEY",
+            "type": "MONEY"
+        },
+        {
+            "name": "DATE",
+            "type": "DATE"
+        },
+        {
+            "name": "DATE_RANGE",
+            "type": "DATE_RANGE"
+        }
+    ]
+}
diff --git a/cypress/support/test_data/concept_reference_list.txt b/cypress/support/test_data/concept_reference_list.txt
@@ -0,0 +1,2 @@
+a1
+b
diff --git a/cypress/support/test_data/filter_value_reference_list.txt b/cypress/support/test_data/filter_value_reference_list.txt
@@ -0,0 +1,3 @@
+a
+abc
+b
diff --git a/cypress/support/test_data/multi_connector.concept.json b/cypress/support/test_data/multi_connector.concept.json
@@ -0,0 +1,72 @@
+{
+    "label": "MultiConnector",
+    "description": "Concept with multiple connector that each have a filter that allows file drop.",
+    "type": "TREE",
+    "connectors": [
+        {
+            "name": "connector0",
+            "column": "table.STRING",
+            "filters": [
+                {
+                    "label": "BIG_MULTI_SELECT",
+                    "column": "table.STRING",
+                    "type": "BIG_MULTI_SELECT",
+                    "allowDropFile": true
+                }
+            ],
+            "selects": []
+        },
+        {
+            "name": "connector1",
+            "column": "table1.STRING",
+            "filters": [
+                {
+                    "label": "BIG_MULTI_SELECT",
+                    "column": "table1.STRING",
+                    "type": "BIG_MULTI_SELECT",
+                    "allowDropFile": true,
+                    "labels": {
+                        "Value A": "a",
+                        "Value A1": "a1"
+                    }
+                }
+            ],
+            "selects": []
+        }
+    ],
+    "children": {
+        "name": "a",
+        "condition": {
+            "type": "EQUAL",
+            "values": [
+                "a",
+                "a1"
+            ]
+        },
+        "children": [
+            {
+                "name": "a1",
+                "condition": {
+                    "type": "EQUAL",
+                    "values": [
+                        "a1"
+                    ]
+                }
+            }
+        ]
+    },
+    "selects": [
+        {
+            "label": "EXISTS",
+            "type": "EXISTS"
+        },
+        {
+            "label": "EVENT_DATE_UNION",
+            "type": "EVENT_DATE_UNION"
+        },
+        {
+            "label": "EVENT_DURATION_SUM",
+            "type": "EVENT_DURATION_SUM"
+        }
+    ]
+}
diff --git a/cypress/support/test_data/table1.csv b/cypress/support/test_data/table1.csv
@@ -0,0 +1,2 @@
+id,STRING
+1,abc
diff --git a/cypress/support/test_data/table1.import.json b/cypress/support/test_data/table1.import.json
@@ -0,0 +1,31 @@
+{
+    "inputs": [
+        {
+            "output": [
+                {
+                    "inputColumn": "id",
+                    "name": "id",
+                    "inputType": "STRING",
+                    "operation": "COPY"
+                },
+                {
+                    "inputColumn": "STRING",
+                    "name": "STRING",
+                    "inputType": "STRING",
+                    "operation": "COPY"
+                }
+            ],
+			"primary": {
+				"inputColumn": "id",
+				"inputType": "STRING",
+				"name": "id",
+				"operation": "COPY",
+				"required": true
+			},
+			"sourceFile": "table1.csv"
+        }
+    ],
+	"label": "Table 1",
+	"name": "table1",
+	"table": "table1"
+}
diff --git a/cypress/support/test_data/table1.table.json b/cypress/support/test_data/table1.table.json
@@ -0,0 +1,13 @@
+{
+    "name": "table1",
+    "columns": [
+        {
+            "name": "id",
+            "type": "STRING"
+        },
+        {
+            "name": "STRING",
+            "type": "STRING"
+        }
+    ]
+}
diff --git a/frontend/src/js/modal/Modal.tsx b/frontend/src/js/modal/Modal.tsx
@@ -77,6 +77,7 @@ const Modal = ({
   subtitle,
   doneButton,
   scrollable,
+  dataTestId,
   onClose,
 }: {
   className?: string;
@@ -85,14 +86,15 @@ const Modal = ({
   subtitle?: ReactNode;
   doneButton?: boolean;
   scrollable?: boolean;
+  dataTestId?: string;
   onClose: () => void;
 }) => {
   const { t } = useTranslation();
 
   useHotkeys("esc", onClose);
 
   return (
-    <Root className={className}>
+    <Root className={className} data-test-id={dataTestId}>
       <ModalContent onClose={onClose} scrollable={scrollable}>
         <TopRow>
           <Heading3>{headline}</Heading3>

diff --git a/frontend/src/js/scrollable-list/ScrollableList.tsx b/frontend/src/js/scrollable-list/ScrollableList.tsx
@@ -7,6 +7,7 @@ interface PropsType {
   items: ReactNode[];
   maxVisibleItems: number;
   fullWidth?: boolean;
+  dataTestId?: string;
 }
 
 // With the number of visible items specified here,
@@ -43,7 +44,12 @@ const Item = styled("div")`
   font-size: ${({ theme }) => theme.font.sm};
 `;
 
-const ScrollableList = ({ items, maxVisibleItems, fullWidth }: PropsType) => {
+const ScrollableList = ({
+  items,
+  maxVisibleItems,
+  fullWidth,
+  dataTestId,
+}: PropsType) => {
   const renderItem = (index: number, key: string | number) => {
     return (
       <Item key={key} className="scrollable-list-item">
@@ -53,7 +59,11 @@ const ScrollableList = ({ items, maxVisibleItems, fullWidth }: PropsType) => {
   };
 
   return (
-    <Root maxVisibleItems={maxVisibleItems} fullWidth={!!fullWidth}>
+    <Root
+      maxVisibleItems={maxVisibleItems}
+      fullWidth={!!fullWidth}
+      data-test-id={dataTestId}
+    >
       <ReactList
         itemRenderer={renderItem}
         length={items ? items.length : 0}

diff --git a/frontend/src/js/standard-query-editor/QueryGroup.tsx b/frontend/src/js/standard-query-editor/QueryGroup.tsx
@@ -123,7 +123,7 @@ const QueryGroup = ({
         />
       </SxWithTooltip>
       <QueryOrConnector>{t("common.or")}</QueryOrConnector>
-      <Group excluded={group.exclude}>
+      <Group excluded={group.exclude} data-test-id="query-group">
         <QueryGroupActions
           excludeActive={!!group.exclude}
           dateActive={isDateActive(group.dateRange)}

diff --git a/frontend/src/js/ui-components/InputSelect/InputSelect.tsx b/frontend/src/js/ui-components/InputSelect/InputSelect.tsx
@@ -285,6 +285,7 @@ const InputSelect = ({
         <DropdownToggleButton
           disabled={disabled}
           icon={faChevronDown}
+          data-test-id="selection-dropdown"
           {...getToggleButtonProps()}
         />
       </Control>
@@ -300,7 +301,7 @@ const InputSelect = ({
             }}
             ref={(instance) => menuPropsRef(instance)}
           >
-            <List small={smallMenu}>
+            <List small={smallMenu} data-test-id="select-options">
               {filteredOptions.length === 0 && <SelectEmptyPlaceholder />}
               {filteredOptions.map((option, index) => {
                 const { ref: itemPropsRef, ...itemProps } = getItemProps({

diff --git a/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx b/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
@@ -10,7 +10,7 @@ import { Icon } from "../icon/FaIcon";
 
 const Container = styled("div")`
   display: grid;
-  grid-template-columns: 110px 30px auto 1fr;
+  grid-template-columns: 110px 30px auto auto auto auto 1fr;
   align-items: flex-start;
   gap: 0 8px;
   padding: 3px 0;
@@ -43,10 +43,12 @@ const Right = styled("div")`
 export const DropdownOption = memo(
   ({
     conceptLabel,
+    connectorLabel,
     filterLabel,
     filterIdx,
   }: {
     conceptLabel: string;
+    connectorLabel?: string;
     filterLabel?: string;
     filterIdx?: number;
   }) => {
@@ -74,6 +76,9 @@ export const DropdownOption = memo(
         <Text bold={!hasDifferentFilterLabel}>{conceptLabel}</Text>
         {hasDifferentFilterLabel && (
           <>
+            <Text>&gt;</Text>
+            <Text>{connectorLabel}</Text>
+            <Text>&gt;</Text>
             <Text bold>{filterLabel}</Text>
           </>
         )}
-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    a
+    abc
+    b