[fix] Add an alert that something extra is in the query than forms (#208

)
someengineering · May 13, 2024 · 860abab · 860abab
1 parent da0b3c0
commit 860abab
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 13 deletions.
diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po
@@ -124,6 +124,10 @@ msgstr "<0>Datenschutzerklärung</0> | <1>Allgemeine Geschäftsbedingungen</1>"
 msgid "<0>Step 1: Scan the QR Code</0><1>First up, see this QR code on your screen? Grab your phone and open your favorite authenticator app (like Google Authenticator).</1><2>Step 2: Add a New Account</2><3>In the app, tap on \"Add\" or \"+\" to set up a new account. Select \"Scan a QR Code\" and point your phone's camera at the QR code displayed here. This will link your account to the app.</3><4><5/></4><6>Step 3: Enter the Code</6><7>Once linked, the app will display a 6-digit code. It changes every 30 seconds, so it's super fresh! Enter that code in the box below and hit \"Activate\". And voilà, you're all set!</7>"
 msgstr "<0>Schritt 1: Scannen Sie den QR-Code</0><1>Zuerst, sehen Sie diesen QR-Code auf Ihrem Bildschirm? Nehmen Sie Ihr Handy und öffnen Sie Ihre bevorzugte Authenticator-App (wie Google Authenticator).</1><2>Schritt 2: Ein neues Konto hinzufügen</2><3>In der App, tippen Sie auf \"Hinzufügen\" oder \"+\", um ein neues Konto einzurichten. Wählen Sie \"QR-Code scannen\" und richten Sie die Kamera Ihres Handys auf den hier angezeigten QR-Code. Dies verknüpft Ihr Konto mit der App.</3><4><5/></4><6>Schritt 3: Geben Sie den Code ein</6><7>Sobald verknüpft, zeigt die App einen 6-stelligen Code an. Er ändert sich alle 30 Sekunden, also ist er super aktuell! Geben Sie diesen Code in das Feld unten ein und klicken Sie auf \"Aktivieren\". Und voilà, Sie sind fertig!</7>"
 
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:133
+msgid "<0>This search is complex.</0>The combo boxes below may not display all filter details but can help narrow your results. For full control, please use the Advanced tab."
+msgstr ""
+
 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsEmailService.tsx:81
 msgid "<0>To ensure you receive timely alerts and notifications directly to your email, we require your email address.<1/>Please note that it is possible to define multiple email addresses.</0>"
 msgstr "<0>Um sicherzustellen, dass Sie zeitnahe Benachrichtigungen und Benachrichtigungen direkt an Ihre E-Mail-Adresse erhalten, benötigen wir Ihre E-Mail-Adresse.<1/>Bitte beachten Sie, dass es möglich ist, mehrere E-Mail-Adressen zu definieren.</0>"
@@ -249,11 +253,11 @@ msgstr "Konten hinzugefügt"
 msgid "Admin"
 msgstr "Admin"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:108
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:157
 msgid "Advanced"
 msgstr ""
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:130
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:182
 msgid "Advanced search query"
 msgstr "Erweiterte Suchabfrage"
 
@@ -850,7 +854,8 @@ msgstr "Passwort vergessen? Klicken Sie hier, um Ihr Passwort zurückzusetzen."
 msgid "Forgot Password"
 msgstr "Passwort vergessen"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:104
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:145
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:148
 msgid "Form"
 msgstr ""
 
@@ -1205,7 +1210,7 @@ msgstr "Einmal"
 msgid "Oops, the username or password doesn't seem to match our records. Please try again."
 msgstr "Hoppla, der Benutzername oder das Passwort scheinen nicht mit unseren Aufzeichnungen übereinzustimmen. Bitte versuche es erneut."
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:161
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:213
 msgid "Oops! It looks like your query didn't match our format. Please check and try again."
 msgstr "Ups! Ihre Eingabe entspricht nicht unserem Format. Bitte überprüfen Sie sie und versuchen Sie es erneut."
 

diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
@@ -124,6 +124,10 @@ msgstr "<0>Privacy policy</0> | <1>Terms and conditions</1>"
 msgid "<0>Step 1: Scan the QR Code</0><1>First up, see this QR code on your screen? Grab your phone and open your favorite authenticator app (like Google Authenticator).</1><2>Step 2: Add a New Account</2><3>In the app, tap on \"Add\" or \"+\" to set up a new account. Select \"Scan a QR Code\" and point your phone's camera at the QR code displayed here. This will link your account to the app.</3><4><5/></4><6>Step 3: Enter the Code</6><7>Once linked, the app will display a 6-digit code. It changes every 30 seconds, so it's super fresh! Enter that code in the box below and hit \"Activate\". And voilà, you're all set!</7>"
 msgstr "<0>Step 1: Scan the QR Code</0><1>First up, see this QR code on your screen? Grab your phone and open your favorite authenticator app (like Google Authenticator).</1><2>Step 2: Add a New Account</2><3>In the app, tap on \"Add\" or \"+\" to set up a new account. Select \"Scan a QR Code\" and point your phone's camera at the QR code displayed here. This will link your account to the app.</3><4><5/></4><6>Step 3: Enter the Code</6><7>Once linked, the app will display a 6-digit code. It changes every 30 seconds, so it's super fresh! Enter that code in the box below and hit \"Activate\". And voilà, you're all set!</7>"
 
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:133
+msgid "<0>This search is complex.</0>The combo boxes below may not display all filter details but can help narrow your results. For full control, please use the Advanced tab."
+msgstr "<0>This search is complex.</0>The combo boxes below may not display all filter details but can help narrow your results. For full control, please use the Advanced tab."
+
 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsEmailService.tsx:81
 msgid "<0>To ensure you receive timely alerts and notifications directly to your email, we require your email address.<1/>Please note that it is possible to define multiple email addresses.</0>"
 msgstr "<0>To ensure you receive timely alerts and notifications directly to your email, we require your email address.<1/>Please note that it is possible to define multiple email addresses.</0>"
@@ -249,11 +253,11 @@ msgstr "Added accounts"
 msgid "Admin"
 msgstr "Admin"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:108
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:157
 msgid "Advanced"
 msgstr "Advanced"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:130
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:182
 msgid "Advanced search query"
 msgstr "Advanced search query"
 
@@ -850,7 +854,8 @@ msgstr "Forget your password? Click here to reset your password."
 msgid "Forgot Password"
 msgstr "Forgot Password"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:104
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:145
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:148
 msgid "Form"
 msgstr "Form"
 
@@ -1205,7 +1210,7 @@ msgstr "One time"
 msgid "Oops, the username or password doesn't seem to match our records. Please try again."
 msgstr "Oops, the username or password doesn't seem to match our records. Please try again."
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:161
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:213
 msgid "Oops! It looks like your query didn't match our format. Please check and try again."
 msgstr "Oops! It looks like your query didn't match our format. Please check and try again."
 

diff --git a/src/pages/panel/inventory/InventoryAdvanceSearch.tsx b/src/pages/panel/inventory/InventoryAdvanceSearch.tsx
@@ -1,10 +1,24 @@
 import { Trans } from '@lingui/macro'
 import CloseIcon from '@mui/icons-material/Close'
+import InfoIcon from '@mui/icons-material/Info'
 import ListAltIcon from '@mui/icons-material/ListAlt'
 import ManageSearchIcon from '@mui/icons-material/ManageSearch'
 import SearchIcon from '@mui/icons-material/Search'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
-import { Box, Collapse, FormHelperText, IconButton, Stack, Tab, TextField, Typography } from '@mui/material'
+import {
+  Alert,
+  AlertTitle,
+  Badge,
+  Box,
+  Collapse,
+  FormHelperText,
+  IconButton,
+  Stack,
+  Tab,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import { ChangeEvent, Suspense, useCallback, useEffect, useRef, useState } from 'react'
 import { panelUI } from 'src/shared/constants'
 import { ErrorBoundaryFallback, NetworkErrorBoundary } from 'src/shared/error-boundary-fallback'
@@ -29,9 +43,11 @@ export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError,
       current: { updateQuery, reset },
     },
     error,
+    uiSimpleQuery,
     q,
   } = useFixQueryParser()
   const [searchCritValue, setSearchCritValue] = useState(!searchCrit && searchCrit !== 'all' ? '' : searchCrit)
+  const hasSomethingExtra = !!q && q !== 'all' && !uiSimpleQuery()
 
   const timeoutRef = useRef<number>()
 
@@ -96,16 +112,52 @@ export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError,
     <Box mb={2}>
       <TabContext value={error ? 'advance' : tab}>
         <Stack alignItems={{ xs: 'center', sm: 'end' }} borderColor="divider" borderBottom={1}>
-          <TabList onChange={(_, val) => setTab(val as TabsType)} sx={{ minHeight: 0 }}>
+          <TabList onChange={(_, val) => setTab(val as TabsType)} sx={{ minHeight: 'initial' }}>
             <Tab
               disabled={!!error}
               icon={<ListAltIcon />}
               iconPosition="start"
-              label={<Trans>Form</Trans>}
+              label={
+                hasSomethingExtra ? (
+                  <Badge
+                    slotProps={{
+                      badge: {
+                        style: { left: -30 },
+                      },
+                    }}
+                    anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
+                    badgeContent={
+                      <Tooltip
+                        title={
+                          <Alert color="info" variant="outlined">
+                            <Trans>
+                              <AlertTitle>This search is complex.</AlertTitle>
+                              The combo boxes below may not display all filter details but can help narrow your results. For full control,
+                              please use the Advanced tab.
+                            </Trans>
+                          </Alert>
+                        }
+                      >
+                        <InfoIcon color="info" />
+                      </Tooltip>
+                    }
+                  >
+                    <Trans>Form</Trans>
+                  </Badge>
+                ) : (
+                  <Trans>Form</Trans>
+                )
+              }
               value="form"
-              sx={{ minHeight: 0 }}
+              sx={{ minHeight: 'initial' }}
+            />
+            <Tab
+              icon={<ManageSearchIcon />}
+              iconPosition="start"
+              label={<Trans>Advanced</Trans>}
+              value="advance"
+              sx={{ minHeight: 'initial' }}
             />
-            <Tab icon={<ManageSearchIcon />} iconPosition="start" label={<Trans>Advanced</Trans>} value="advance" sx={{ minHeight: 0 }} />
           </TabList>
         </Stack>
         <TabPanel value="form" sx={{ p: 0 }}>