[fix] fix a problem with pre selected values in inventory string value (

#61) * fix(inventory-form-filter-row-string-value): fix a problem with pre selected values * fix(inventory-form): fix row property UI
someengineering · Dec 12, 2023 · 79f5c56 · 79f5c56
1 parent ca7d6ac
commit 79f5c56
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
@@ -445,7 +445,6 @@ msgstr "Property"
 msgid "Recently added accounts"
 msgstr "Recently added accounts"
 
-
 #: src/pages/panel/inventory/utils/getAutoCompleteFromKey.tsx:88
 msgid "Regions"
 msgstr "Regions"

diff --git a/src/pages/panel/inventory/InventoryForm.tsx b/src/pages/panel/inventory/InventoryForm.tsx
@@ -202,7 +202,7 @@ export const InventoryForm = ({ searchCrit, kind, setKind, config, setConfig }:
         <Divider />
       </Box>
       <Grid container spacing={1} direction="row" mb={2}>
-        <Grid item xs={12} sm={6} md={3} lg={2}>
+        <Grid item xs={12} sm={6} lg={3} xl={2}>
           <Autocomplete
             size="small"
             disablePortal
@@ -212,7 +212,7 @@ export const InventoryForm = ({ searchCrit, kind, setKind, config, setConfig }:
             renderInput={(params) => <TextField {...params} label={<Trans>Kinds</Trans>} />}
           />
         </Grid>
-        <Grid item xs={12} sm={6} md={9} lg={10}>
+        <Grid item xs={12} sm={6} lg={9} xl={10}>
           <Stack spacing={1} direction="row">
             <Box>
               <Divider orientation="vertical" />

diff --git a/src/pages/panel/inventory/InventoryFormFilterRow.tsx b/src/pages/panel/inventory/InventoryFormFilterRow.tsx
@@ -115,12 +115,13 @@ export const InventoryFormFilterRow = ({
   const kinds = useMemo(() => preItems.kinds.map((i) => i.value), [preItems.kinds])
 
   return (
-    <Stack direction="row" spacing={1}>
+    <Stack direction={{ xs: 'column', lg: 'row' }} spacing={1}>
       <InventoryFormFilterRowProperty defaultValue={item.property} onChange={handleChange} selectedKind={kind} kinds={kinds} />
       {currentOpTypes ? (
         <>
           <Select
             size="small"
+            sx={{ width: 100 }}
             value={item.op && (currentOpTypes as readonly string[]).includes(item.op) ? item.op : ''}
             onChange={(e) => handleChange({ op: e.target.value as OPType })}
             autoFocus

diff --git a/src/pages/panel/inventory/InventoryFormFilterRowProperty.tsx b/src/pages/panel/inventory/InventoryFormFilterRowProperty.tsx
@@ -260,7 +260,7 @@ export const InventoryFormFilterRowProperty = ({ selectedKind, defaultValue, kin
           </ListItemButton>
         )
       }}
-      sx={{ width: 250 }}
+      sx={{ width: { xs: '100%', lg: 250 } }}
       slotProps={{
         popper: {
           sx: { width: 'fit-content!important' },

diff --git a/src/pages/panel/inventory/InventoryFormFilterRowStringValue.tsx b/src/pages/panel/inventory/InventoryFormFilterRowStringValue.tsx
@@ -37,7 +37,7 @@ export function InventoryFormFilterRowStringValue<Multiple extends boolean, Netw
 }: InventoryFormFilterRowStringValueProps<Multiple, NetworkDisabled>) {
   const { selectedWorkspace } = useUserProfile()
   const [hasFocus, setHasFocus] = useState(false)
-  const [typed, setTyped] = useState('')
+  const [typed, setTyped] = useState(value && !Array.isArray(value) ? value.label : '')
   const debouncedTyped = useDebounce(networkDisabled ? '' : typed, panelUI.fastInputChangeDebounce)
   const slectedTyped = useRef('')
   const {
@@ -114,7 +114,7 @@ export function InventoryFormFilterRowStringValue<Multiple extends boolean, Netw
 
   const hasError = Boolean(!hasFocus && typed && (Array.isArray(value) ? !value.length : !value))
 
-  const autoCompleteIsLoading = isLoading || debouncedTyped !== typed
+  const autoCompleteIsLoading = isLoading || (!networkDisabled && debouncedTyped !== typed)
 
   return (
     <Autocomplete