CE-704: updates to better handling selecting variants on 'integrations', or if not valid, etc.

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -34,6 +34,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import React, {useState} from "react";
 import {useNavigate} from "react-router-dom";
@@ -195,8 +196,17 @@ function GotoRecordDialog(props: Props): JSX.Element
 
    return (
       <Dialog open={props.isOpen} onClose={() => closeRequested} onKeyPress={(e) => keyPressed(e)} fullWidth maxWidth={"sm"}>
-         <DialogTitle>Go To...</DialogTitle>
+         <DialogTitle sx={{display: "flex"}}>
-
+            <Box sx={{display: "flex", flexGrow: 1}}>
+               Go To...
+            </Box>
+            <Box sx={{display: "flex"}}>
+               <IconButton onClick={() =>
+               {
+                  document.location.href = "/";
+               }}><Icon sx={{align: "right"}} fontSize="small">close</Icon></IconButton>
+            </Box>
+         </DialogTitle>
          <DialogContent>
             {props.subHeader}
             {

src/qqq/pages/records/query/RecordQuery.tsx

@@ -55,7 +55,7 @@ import {DataGridPro, GridCallbackDetails, GridColDef, GridColumnMenuContainer, G
 import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
 import FormData from "form-data";
 import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
-import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
+import {Navigate, NavigateFunction, useLocation, useNavigate, useSearchParams} from "react-router-dom";
 import QContext from "QContext";
 import {QActionsMenuButton, QCancelButton, QCreateNewButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import MenuButton from "qqq/components/buttons/MenuButton";
@@ -752,7 +752,42 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                console.log(`Received error for query ${thisQueryId}`);
                console.log(error);
 
+               ////////////////////////////////////////////////////////////////////////////////////
+               // special case for variant errors, if 500 and certain message, just clear out    //
+               // local storage of variant and reload the page (rather than black page of death) //
+               ////////////////////////////////////////////////////////////////////////////////////
                var errorMessage;
+               if(tableMetaData?.usesVariants)
+               {
+                  if (error.status == "500" && error.message.indexOf("Could not find Backend Variant") != -1)
+                  {
+                     if (table)
+                     {
+                        const tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${table.name}`;
+                        localStorage.removeItem(tableVariantLocalStorageKey);
+                     }
+                  }
+                  else
+                  {
+                     if (error && error.message)
+                     {
+                        errorMessage = error.message;
+                     }
+                     else if (error && error.response && error.response.data && error.response.data.error)
+                     {
+                        errorMessage = error.response.data.error;
+                     }
+                     else
+                     {
+                        errorMessage = "Unexpected error running query";
+                     }
+
+                     setAlertContent(errorMessage);
+                     setLoading(false);
+                  }
+               }
+               else
+               {
                   if (error && error.message)
                   {
                      errorMessage = error.message;
@@ -771,7 +806,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                   setReceivedQueryErrorTimestamp(new Date());
 
                   throw error;
-            });
+               }
+            })
       })();
    };
 
@@ -1889,7 +1925,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       {
          return (
             <BaseLayout>
-               <TableVariantDialog table={tableMetaData} isOpen={true} closeHandler={(value: QTableVariant) =>
+               <TableVariantDialog navigate={navigate} table={tableMetaData} isOpen={true} closeHandler={(value: QTableVariant) =>
                {
                   setTableVariantPromptOpen(false);
                   setTableVariant(value);
@@ -2059,7 +2095,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
             {
                tableMetaData &&
-               <TableVariantDialog table={tableMetaData} isOpen={tableVariantPromptOpen} closeHandler={(value: QTableVariant) =>
+               <TableVariantDialog navigate={navigate} table={tableMetaData} isOpen={tableVariantPromptOpen} closeHandler={(value: QTableVariant) =>
                {
                   setTableVariantPromptOpen(false);
                   setTableVariant(value);
@@ -2091,7 +2127,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 ////////////////////////////////////////////////////////////////////////////////////////////////////////
 // mini-component that is the dialog for the user to select a variant on tables with variant backends //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////
-function TableVariantDialog(props: {isOpen: boolean; table: QTableMetaData; closeHandler: (value?: QTableVariant) => void})
+function TableVariantDialog(props: {navigate: NavigateFunction, isOpen: boolean; table: QTableMetaData; closeHandler: (value?: QTableVariant) => void})
 {
    const [value, setValue] = useState(null)
    const [dropDownOpen, setDropDownOpen] = useState(false)
@@ -2140,7 +2176,17 @@ function TableVariantDialog(props: {isOpen: boolean; table: QTableMetaData; clos
 
    return variants && (
       <Dialog open={props.isOpen}  onKeyPress={(e) => keyPressed(e)}>
-         <DialogTitle>{props.table.variantTableLabel}</DialogTitle>
+         <DialogTitle sx={{display: "flex"}}>
+            <Box sx={{display: "flex", flexGrow: 1}}>
+               {props.table.variantTableLabel}
+            </Box>
+            <Box sx={{display: "flex"}}>
+               <IconButton onClick={() =>
+               {
+                  document.location.href = "/";
+               }}><Icon sx={{align: "right"}} fontSize="small">close</Icon></IconButton>
+            </Box>
+         </DialogTitle>
          <DialogContent>
             <DialogContentText>Select the {props.table.variantTableLabel} to be used on this table:</DialogContentText>
             <Autocomplete

src/qqq/pages/records/view/RecordView.tsx

@@ -441,6 +441,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             }
          }
 
+         if(record)
+         {
             setPageHeader(record.recordLabel);
 
             if(!launchingProcess)
@@ -454,6 +456,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                   console.error("Error pushing history: " + e);
                }
             }
+         }
 
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //