added add all button to scan models (#5811)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [X] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [X] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [ ] Yes
- [ ] No


## Description


## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Merge Plan

<!--
A merge plan describes how this PR should be handled after it is
approved.

Example merge plans:
- "This PR can be merged when approved"
- "This must be squash-merged when approved"
- "DO NOT MERGE - I will rebase and tidy commits before merging"
- "#dev-chat on discord needs to be advised of this change when it is
merged"

A merge plan is particularly important for large PRs or PRs that touch
the
database in any way.
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

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

@@ -692,6 +692,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">
-        <Flex flexDir="column-reverse" gap="2">
+        <ScrollableContent>
-          {data?.map((model) => <ImportQueueItem key={model.id} model={model} />)}
+          <Flex flexDir="column-reverse" gap="2">
-        </Flex>
+            {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, useInstallModelMutation } 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 [installModel] = useInstallModelMutation();
 
   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;
+      }
+      installModel({ source: result.path })
+        .unwrap()
+        .then((_) => {
+          dispatch(
+            addToast(
+              makeToast({
+                title: t('toast.modelAddedSimple'),
+                status: 'success',
+              })
+            )
+          );
+        })
+        .catch((error) => {
+          if (error) {
+            dispatch(
+              addToast(
+                makeToast({
+                  title: `${error.data.detail} `,
+                  status: 'error',
+                })
+              )
+            );
+          }
+        });
+    }
+  }, [installModel, filteredResults, dispatch, t]);
+
   return (
     <>
       <Divider mt={4} />
@@ -39,27 +86,32 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
           <Heading fontSize="md" as="h4">
             {t('modelManager.scanResults')}
           </Heading>
-          <InputGroup maxW="300px" size="xs">
+          <Flex alignItems="center" gap="4">
-            <Input
+            <Button onClick={handleAddAll} isDisabled={filteredResults.length === 0}>
-              placeholder={t('modelManager.search')}
+              {t('modelManager.addAll')}
-              value={searchTerm}
+            </Button>
-              data-testid="board-search-input"
+            <InputGroup maxW="300px" size="xs">
-              onChange={handleSearch}
+              <Input
-              size="xs"
+                placeholder={t('modelManager.search')}
-            />
+                value={searchTerm}
+                data-testid="board-search-input"
+                onChange={handleSearch}
+                size="xs"
+              />
 
-            {searchTerm && (
+              {searchTerm && (
-              <InputRightElement h="full" pe={2}>
+                <InputRightElement h="full" pe={2}>
-                <IconButton
+                  <IconButton
-                  size="sm"
+                    size="sm"
-                  variant="link"
+                    variant="link"
-                  aria-label={t('boards.clearSearch')}
+                    aria-label={t('boards.clearSearch')}
-                  icon={<PiXBold />}
+                    icon={<PiXBold />}
-                  onClick={clearSearch}
+                    onClick={clearSearch}
-                />
+                  />
-              </InputRightElement>
+                </InputRightElement>
-            )}
+              )}
-          </InputGroup>
+            </InputGroup>
+          </Flex>
         </Flex>
         <Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}>
           <ScrollableContent>