added add all button to scan models

invokeai/frontend/web/public/locales/en.json

@@ -691,6 +691,7 @@
     },
     "modelManager": {
         "active": "active",
+        "addAll": "Add All",
         "addCheckpointModel": "Add Checkpoint / Safetensor Model",
         "addDifference": "Add Difference",
         "addDiffuserModel": "Add Diffusers",

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ImportQueue/ImportQueue.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Flex, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { t } from 'i18next';
@@ -57,9 +58,11 @@ export const ImportQueue = () => {
         </Button>
       </Flex>
       <Box mt={3} layerStyle="first" p={3} borderRadius="base" w="full" h="full">
+        <ScrollableContent>
           <Flex flexDir="column-reverse" gap="2">
             {data?.map((model) => <ImportQueueItem key={model.id} model={model} />)}
           </Flex>
+        </ScrollableContent>
       </Box>
     </Flex>
   );

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ImportQueue/ImportQueueItem.tsx

@@ -121,7 +121,7 @@ export const ImportQueueItem = (props: ModelListItemProps) => {
       </Box>
 
       <Box minW="20px">
-        {(model.status === 'downloading' || model.status === 'waiting') && (
+        {(model.status === 'downloading' || model.status === 'waiting' || model.status === 'running') && (
           <IconButton
             isRound={true}
             size="xs"

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx

@@ -1,10 +1,22 @@
-import { Divider, Flex, Heading, IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library';
+import {
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import type { ChangeEventHandler } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
-import type { ScanFolderResponse } from 'services/api/endpoints/models';
+import { type ScanFolderResponse, useImportMainModelsMutation } from 'services/api/endpoints/models';
 
 import { ScanModelResultItem } from './ScanModelResultItem';
 
@@ -15,6 +27,9 @@ type ScanModelResultsProps = {
 export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
+  const dispatch = useAppDispatch();
+
+  const [importMainModel] = useImportMainModelsMutation();
 
   const filteredResults = useMemo(() => {
     return results.filter((result) => {
@@ -31,6 +46,38 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
     setSearchTerm('');
   }, []);
 
+  const handleAddAll = useCallback(() => {
+    for (const result of filteredResults) {
+      if (result.is_installed) {
+        continue;
+      }
+      importMainModel({ source: result.path, config: undefined })
+        .unwrap()
+        .then((_) => {
+          dispatch(
+            addToast(
+              makeToast({
+                title: t('toast.modelAddedSimple'),
+                status: 'success',
+              })
+            )
+          );
+        })
+        .catch((error) => {
+          if (error) {
+            dispatch(
+              addToast(
+                makeToast({
+                  title: `${error.data.detail} `,
+                  status: 'error',
+                })
+              )
+            );
+          }
+        });
+    }
+  }, [importMainModel, filteredResults, dispatch, t]);
+
   return (
     <>
       <Divider mt={4} />
@@ -39,6 +86,10 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
           <Heading fontSize="md" as="h4">
             {t('modelManager.scanResults')}
           </Heading>
+          <Flex alignItems="center" gap="4">
+            <Button onClick={handleAddAll} isDisabled={filteredResults.length === 0}>
+              {t('modelManager.addAll')}
+            </Button>
             <InputGroup maxW="300px" size="xs">
               <Input
                 placeholder={t('modelManager.search')}
@@ -61,6 +112,7 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
               )}
             </InputGroup>
           </Flex>
+        </Flex>
         <Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}>
           <ScrollableContent>
             <Flex flexDir="column" gap={3}>