Merge pull request #338 from bcgov/fixing-application-page-error

Merging with latest formsflow web changes

Author: RyanBirtch-aot

forms-flow-ai/forms-flow-web/Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /forms-flow-web/app
 # expect a build-time variable
 ARG FORMFLOW_SOURCE_REPO_BRANCH
 # use the value to set the ENV var default
-ENV FORMFLOW_SOURCE_REPO_BRANCH master
+ENV FORMFLOW_SOURCE_REPO_BRANCH patch/v5.1.1
 # expect a build-time variable
 ARG FORMFLOW_SOURCE_REPO_URL
 # use the value to set the ENV var default

forms-flow-ai/forms-flow-web/src/components/Application/List.js

@@ -34,6 +34,7 @@ import overlayFactory from "react-bootstrap-table2-overlay";
 import { SpinnerSVG } from "../../containers/SpinnerSVG";
 import Head from "../../containers/Head";
 import { push } from "connected-react-router";
+import isValiResourceId from "../../helper/regExp/validResourceId";
 import { Button } from "react-bootstrap";
 export const ApplicationList = React.memo(() => {
   const { t } = useTranslation();
@@ -61,6 +62,8 @@ export const ApplicationList = React.memo(() => {
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
   const [lastModified, setLastModified] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [invalidFilters, setInvalidFilters] = React.useState({});
+
   useEffect(() => {
     setIsLoading(false);
   }, [applications]);
@@ -116,6 +119,16 @@ export const ApplicationList = React.memo(() => {
       </div>
     );
   };
+  const validateFilters = (newState) => {
+    if (
+      newState.filters?.id?.filterVal &&
+      !isValiResourceId(newState.filters?.id?.filterVal)
+    ) {
+      return setInvalidFilters({ ...invalidFilters, APPLICATION_ID: true });
+    } else {
+      return setInvalidFilters({ ...invalidFilters, APPLICATION_ID: false });
+    }
+  };
 
   const getReactDashboardURL = () =>{
     if(window.location.href.includes("localhost")){
@@ -128,6 +141,7 @@ export const ApplicationList = React.memo(() => {
   };
 
   const handlePageChange = (type, newState) => {
+    validateFilters(newState);
     if (type === "filter") {
       setfiltermode(true);
     } else if (type === "pagination") {
@@ -172,6 +186,7 @@ export const ApplicationList = React.memo(() => {
   if (!DRAFT_ENABLED) {
     headOptions.pop();
   }
+
   return (
     <ToolkitProvider
       bootstrap4
@@ -182,7 +197,8 @@ export const ApplicationList = React.memo(() => {
         lastModified,
         setLastModified,
         t,
-        redirectUrl
+        redirectUrl,
+        invalidFilters
       )}
       search
     >
@@ -193,34 +209,38 @@ export const ApplicationList = React.memo(() => {
           <Button className="" onClick={() =>{ window.location = getReactDashboardURL();}}>
                       Return To Dashboard</Button>
           <div>
-          {applicationCount > 0 || filtermode ? <BootstrapTable
-              remote={{ pagination: true, filter: true, sort: true }}
-              loading={isLoading}
-              filter={filterFactory()}
-              pagination={paginationFactory(
-                getoptions(applicationCount, page, countPerPage)
-              )}
-              onTableChange={handlePageChange}
-              filterPosition={"top"}
-              {...props.baseProps}
-              noDataIndication={() =>
-                !isLoading && getNoDataIndicationContent()
-              }
-              defaultSorted={defaultSortedBy}
-              overlay={overlayFactory({
-                spinner: <SpinnerSVG />,
-                styles: {
-                  overlay: (base) => ({
-                    ...base,
-                    background: "rgba(255, 255, 255)",
-                    height: `${
-                      countPerPage > 5 ? "100% !important" : "350px !important"
-                    }`,
-                    top: "65px",
-                  }),
-                },
-              })}
-            /> : iserror ? (
+            {applicationCount > 0 || filtermode ? (
+              <BootstrapTable
+                remote={{ pagination: true, filter: true, sort: true }}
+                loading={isLoading}
+                filter={filterFactory()}
+                pagination={paginationFactory(
+                  getoptions(applicationCount, page, countPerPage)
+                )}
+                onTableChange={handlePageChange}
+                filterPosition={"top"}
+                {...props.baseProps}
+                noDataIndication={() =>
+                  !isLoading && getNoDataIndicationContent()
+                }
+                defaultSorted={defaultSortedBy}
+                overlay={overlayFactory({
+                  spinner: <SpinnerSVG />,
+                  styles: {
+                    overlay: (base) => ({
+                      ...base,
+                      background: "rgba(255, 255, 255)",
+                      height: `${
+                        countPerPage > 5
+                          ? "100% !important"
+                          : "350px !important"
+                      }`,
+                      top: "65px",
+                    }),
+                  },
+                })}
+              />
+            ) : iserror ? (
               <Alert variant={"danger"}>{error}</Alert>
             ) : (
               <Nodata text={t("No Applications Found")} />
@@ -232,4 +252,4 @@ export const ApplicationList = React.memo(() => {
   );
 });
 
-export default ApplicationList;
+export default ApplicationList;