Merged in feature/SHIBUI-2188-filter-scroll-link (pull request #593)

Added filter scroll link to comparison view Approved-by: Dmitriy Kopylenko Approved-by: Bill Smith Former-commit-id: 5801699309024a1ebf2e08961e77456b3d7532ae
TIER · Jul 27, 2022 · 71ea444 · 71ea444
2 parents 554fb89 + 8c373d1
commit 71ea444
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 50 deletions.
diff --git a/backend/src/integration/resources/SHIBUI-1364-1.side b/backend/src/integration/resources/SHIBUI-1364-1.side
@@ -2330,13 +2330,22 @@
         ["xpath=//button[contains(.,'Compare Selected(2)')]", "xpath:innerText"]
       ],
       "value": ""
+    }, {
+      "id": "9ddfc4d9-0fbd-44f2-8584-4d7fcb6d0c6b",
+      "comment": "",
+      "command": "waitForElementEditable",
+      "target": "css=#filters > div:nth-child(3) > div:nth-child(2) > div > button",
+      "targets": [
+        ["css=.d-flex:nth-child(3) > .border-primary:nth-child(2) .svg-inline--fa", "css:finder"]
+      ],
+      "value": "30000"
     }, {
       "id": "2ff5a597-9fe0-46b4-9ca5-63123ddb3cef",
       "comment": "",
       "command": "click",
-      "target": "xpath=//section/div/div/div[4]/div[2]/div/button",
+      "target": "css=#filters > div:nth-child(3) > div:nth-child(2) > div > button",
       "targets": [
-        ["css=.border-primary:nth-child(2) .fa-square", "css:finder"]
+        ["css=.d-flex:nth-child(3) > .border-primary:nth-child(2) .svg-inline--fa", "css:finder"]
       ],
       "value": ""
     }, {
@@ -2356,23 +2365,23 @@
       "id": "d7b5550d-1db8-4fa5-800f-fde753413c13",
       "comment": "",
       "command": "assertText",
-      "target": "css=.mb-4:nth-child(8) .p-2 > div > div:nth-child(1) .d-block:nth-child(2)",
+      "target": "css=.bg-diff > .d-block:nth-child(2)",
       "targets": [
-        ["css=.mb-4:nth-child(8) .p-2 > div > div:nth-child(1) .d-block:nth-child(2)", "css:finder"],
-        ["xpath=//div[@id='root']/div/main/div/section/div/div/section[5]/div/div[2]/div[2]/div/div/span[2]", "xpath:idRelative"],
-        ["xpath=//section[5]/div/div[2]/div[2]/div/div/span[2]", "xpath:position"],
-        ["xpath=//span[contains(.,'Entity Attributes Filter')]", "xpath:innerText"]
+        ["css=.bg-diff > .d-block:nth-child(2)", "css:finder"],
+        ["xpath=//div[@id='filters']/section/div/div[2]/div[2]/div/div/span[2]", "xpath:idRelative"],
+        ["xpath=//div[2]/section/div/div[2]/div[2]/div/div/span[2]", "xpath:position"],
+        ["xpath=//span[contains(.,'Entity Attributes Filter Version 2')]", "xpath:innerText"]
       ],
       "value": "Entity Attributes Filter Version 2"
     }, {
       "id": "ad797f09-746e-4778-954e-6f92ac5934ea",
       "comment": "",
       "command": "assertText",
-      "target": "css=.mb-4:nth-child(8) .p-2 > div > div:nth-child(1) .d-block:nth-child(3)",
+      "target": "css=.bg-diff > .d-block:nth-child(3)",
       "targets": [
-        ["css=.mb-4:nth-child(8) .p-2 > div > div:nth-child(1) .d-block:nth-child(3)", "css:finder"],
-        ["xpath=//div[@id='root']/div/main/div/section/div/div/section[5]/div/div[2]/div[2]/div/div/span[3]", "xpath:idRelative"],
-        ["xpath=//section[5]/div/div[2]/div[2]/div/div/span[3]", "xpath:position"]
+        ["css=.bg-diff > .d-block:nth-child(3)", "css:finder"],
+        ["xpath=//div[@id='filters']/section/div/div[2]/div[2]/div/div/span[3]", "xpath:idRelative"],
+        ["xpath=//div[2]/section/div/div[2]/div[2]/div/div/span[3]", "xpath:position"]
       ],
       "value": "Entity Attributes Filter"
     }, {

diff --git a/backend/src/integration/resources/SHIBUI-1364-4.side b/backend/src/integration/resources/SHIBUI-1364-4.side
@@ -1417,23 +1417,14 @@
         ["xpath=//input", "xpath:position"]
       ],
       "value": ""
-    }, {
-      "id": "e83dc2da-ad95-4e50-b969-57721eb8f1dc",
-      "comment": "",
-      "command": "click",
-      "target": "css=.d-flex:nth-child(5) > .border-primary:nth-child(2) .svg-inline--fa",
-      "targets": [
-        ["css=.d-flex:nth-child(5) > .border-primary:nth-child(2) .svg-inline--fa", "css:finder"]
-      ],
-      "value": ""
     }, {
       "id": "c2102a31-6e18-4d6c-8146-e23459403b65",
       "comment": "",
       "command": "assertText",
-      "target": "css=.border-primary:nth-child(2) > .bg-primary-light .mb-0:nth-child(1)",
+      "target": "css=.d-flex:nth-child(3) > .border-primary:nth-child(2) .mb-0:nth-child(1)",
       "targets": [
-        ["css=.border-primary:nth-child(2) > .bg-primary-light .mb-0:nth-child(1)", "css:finder"],
-        ["xpath=//div[@id='root']/div/main/div/section/div/div/div[4]/div[2]/div/div/p", "xpath:idRelative"],
+        ["css=.d-flex:nth-child(3) > .border-primary:nth-child(2) .mb-0:nth-child(1)", "css:finder"],
+        ["xpath=//div[@id='filters']/div[3]/div[2]/div/div/p", "xpath:idRelative"],
         ["xpath=//p", "xpath:position"],
         ["xpath=//p[contains(.,'Entity Attributes Filter V2')]", "xpath:innerText"]
       ],
@@ -1442,10 +1433,10 @@
       "id": "cac6c125-c81b-40af-ae21-2b717df9511e",
       "comment": "",
       "command": "assertText",
-      "target": "css=.border-primary:nth-child(3) > .bg-primary-light .mb-0:nth-child(1)",
+      "target": "css=.d-flex:nth-child(3) .bg-lighter .mb-0:nth-child(1)",
       "targets": [
-        ["css=.border-primary:nth-child(3) > .bg-primary-light .mb-0:nth-child(1)", "css:finder"],
-        ["xpath=//div[@id='root']/div/main/div/section/div/div/div[4]/div[3]/div/div/p", "xpath:idRelative"],
+        ["css=.d-flex:nth-child(3) .bg-lighter .mb-0:nth-child(1)", "css:finder"],
+        ["xpath=//div[@id='filters']/div[3]/div[3]/div/div/p", "xpath:idRelative"],
         ["xpath=//div[3]/div/div/p", "xpath:position"]
       ],
       "value": "Entity Attributes Filter"

diff --git a/backend/src/integration/resources/SHIBUI-1732-3.side b/backend/src/integration/resources/SHIBUI-1732-3.side
@@ -1325,13 +1325,9 @@
       "id": "2dd7992f-ee99-45a3-ad85-20488c4bd4b1",
       "comment": "",
       "command": "click",
-      "target": "xpath=//section/div/div/div[4]/div[2]/div/button",
+      "target": "css=#filters > div:nth-child(3) > div:nth-child(2) > div > button",
       "targets": [
-        ["css=.border-primary:nth-child(2) .mx-auto", "css:finder"],
-        ["xpath=(//button[@type='button'])[5]", "xpath:attributes"],
-        ["xpath=//div[@id='root']/div/main/div/section/div/div/div[4]/div[2]/div/button", "xpath:idRelative"],
-        ["xpath=//div[2]/div/button", "xpath:position"],
-        ["xpath=//button[contains(.,'Compare')]", "xpath:innerText"]
+        ["css=.border-primary:nth-child(2) .svg-inline--fa", "css:finder"]
       ],
       "value": ""
     }, {
@@ -1553,21 +1549,21 @@
         ["xpath=//ul[2]/li[2]/span", "xpath:position"]
       ],
       "value": "bar"
-    },{
-            "id": "4ec2c493-85e4-403b-9b09-031c5728f498",
-            "comment": "",
-            "command": "open",
-            "target": "/api/heheheheheheheWipeout",
-            "targets": [],
-            "value": ""
-          }, {
-            "id": "e074980a-8f21-4c22-8412-c4b6fcdcd1a4",
-            "comment": "",
-            "command": "assertText",
-            "target": "css=body",
-            "targets": [],
-            "value": "yes, you did it"
-          }]
+    }, {
+      "id": "4ec2c493-85e4-403b-9b09-031c5728f498",
+      "comment": "",
+      "command": "open",
+      "target": "/api/heheheheheheheWipeout",
+      "targets": [],
+      "value": ""
+    }, {
+      "id": "e074980a-8f21-4c22-8412-c4b6fcdcd1a4",
+      "comment": "",
+      "command": "assertText",
+      "target": "css=body",
+      "targets": [],
+      "value": "yes, you did it"
+    }]
   }],
   "suites": [{
     "id": "575d414c-556d-45f7-b2f2-c9971ad51348",

diff --git a/ui/src/app/metadata/view/MetadataComparison.js b/ui/src/app/metadata/view/MetadataComparison.js
@@ -4,20 +4,29 @@ import {
     ArrayParam,
     withDefault
 } from 'use-query-params';
+import { scroller } from 'react-scroll';
 import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 import { MetadataVersionsLoader } from '../hoc/MetadataVersionsLoader';
 import { Configuration } from '../hoc/Configuration';
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
 import { Link, useParams } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHistory } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faHistory } from '@fortawesome/free-solid-svg-icons';
 import Translate from '../../i18n/components/translate';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from '../../i18n/hooks';
 import { MetadataFilterVersionList } from '../domain/filter/component/MetadataFilterVersionList';
 import { MetadataFilterVersionContext } from '../domain/filter/component/MetadataFilterVersionContext';
 import { useMetadataSchema } from '../hooks/schema';
 import { FilterableProviders } from '../domain/provider';
+import Button from 'react-bootstrap/Button';
+const onScrollTo = (element, offset = 0) => {
+        scroller.scrollTo(element, {
+            duration: 500,
+            smooth: true,
+            offset
+        });
+    };
 
 export function MetadataComparison () {
 
@@ -54,6 +63,12 @@ export function MetadataComparison () {
                                             <FontAwesomeIcon icon={faHistory} />&nbsp;
                                             <Translate value="action.version-history">Version History</Translate>
                                         </Link>
+                                        {type === 'provider' && canFilter &&
+                                            <Button variant="link" onClick={() => onScrollTo('filters')}>
+                                                <FontAwesomeIcon icon={faArrowDown} />&nbsp;
+                                                <Translate value="label.filters">Filters</Translate>
+                                            </Button>
+                                        }
                                     </div>
                                     <Form.Check type="switch"
                                         id="toggleLimited"
@@ -65,7 +80,7 @@ export function MetadataComparison () {
                                 <MetadataConfiguration configuration={config} />
 
                                 {type === 'provider' && canFilter && v &&
-                                <React.Fragment>
+                                <div id="filters">
                                     <div className="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
                                         <h2 className="title h4 m-0 flex-grow-1">
                                             <span className="text ms-2"><Translate value="label.metadata-filter">Metadata Filter</Translate></span>
@@ -74,7 +89,7 @@ export function MetadataComparison () {
                                     <MetadataFilterVersionContext models={v} dates={config.dates}>
                                         {(c) => <MetadataFilterVersionList configuration={c} columns={ c.dates.length } limited={limited}/>}
                                     </MetadataFilterVersionContext>
-                                </React.Fragment>
+                                </div>
                                 }
                             </div>
                         }