fix: Type resolutions & Bug Fixes

- Fix checkpoint filter not working
- Resolve all typescript and undefined issues in Model Manager List / Edit Forms and main panel

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx

@@ -17,19 +17,23 @@ export default function ModelManagerPanel() {
   const renderModelEditTabs = () => {
     if (!openModel || !mainModels) return;
 
-    if (mainModels['entities'][openModel]['model_format'] === 'diffusers') {
+    const openedModelData = mainModels['entities'][openModel];
+
+    if (openedModelData && openedModelData.model_format === 'diffusers') {
       return (
         <DiffusersModelEdit
           modelToEdit={openModel}
-          retrievedModel={mainModels['entities'][openModel]}
+          retrievedModel={openedModelData}
           key={openModel}
         />
       );
-    } else {
+    }
+
+    if (openedModelData && openedModelData.model_format === 'checkpoint') {
       return (
         <CheckpointModelEdit
           modelToEdit={openModel}
-          retrievedModel={mainModels['entities'][openModel]}
+          retrievedModel={openedModelData}
           key={openModel}
         />
       );

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -45,7 +45,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
 
   const { modelToEdit, retrievedModel } = props;
 
-  const [updateMainModel, { error }] = useUpdateMainModelsMutation();
+  const [updateMainModel, { error, isLoading }] = useUpdateMainModelsMutation();
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -145,7 +145,11 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
               label={t('modelManager.config')}
               {...checkpointEditForm.getInputProps('config')}
             />
-            <IAIButton disabled={isProcessing} type="submit">
+            <IAIButton
+              disabled={isProcessing}
+              type="submit"
+              isLoading={isLoading}
+            >
               {t('modelManager.updateModel')}
             </IAIButton>
           </Flex>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -42,7 +42,7 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
   );
   const { retrievedModel, modelToEdit } = props;
 
-  const [updateMainModel, { error }] = useUpdateMainModelsMutation();
+  const [updateMainModel, { isLoading, error }] = useUpdateMainModelsMutation();
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -129,7 +129,11 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
             label={t('modelManager.vaeLocation')}
             {...diffusersEditForm.getInputProps('vae')}
           />
-          <IAIButton disabled={isProcessing} type="submit">
+          <IAIButton
+            disabled={isProcessing}
+            type="submit"
+            isLoading={isLoading}
+          >
             {t('modelManager.updateModel')}
           </IAIButton>
         </Flex>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx

@@ -50,7 +50,7 @@ const ModelList = () => {
 
   const [searchText, setSearchText] = useState<string>('');
   const [isSelectedFilter, setIsSelectedFilter] = useState<
-    'all' | 'ckpt' | 'diffusers'
+    'all' | 'checkpoint' | 'diffusers'
   >('all');
   const [_, startTransition] = useTransition();
 
@@ -73,35 +73,39 @@ const ModelList = () => {
     const modelList = mainModels.entities;
 
     Object.keys(modelList).forEach((model, i) => {
-      if (
-        modelList[model].name.toLowerCase().includes(searchText.toLowerCase())
-      ) {
+      const modelInfo = modelList[model];
+
+      // If no model info found for a model, ignore it
+      if (!modelInfo) return;
+
+      if (modelInfo.name.toLowerCase().includes(searchText.toLowerCase())) {
         filteredModelListItemsToRender.push(
           <ModelListItem
             key={i}
             modelKey={model}
-            name={modelList[model].name}
-            description={modelList[model].description}
+            name={modelInfo.name}
+            description={modelInfo.description}
           />
         );
-        if (modelList[model]?.model_format === isSelectedFilter) {
+        if (modelInfo?.model_format === isSelectedFilter) {
           localFilteredModelListItemsToRender.push(
             <ModelListItem
               key={i}
               modelKey={model}
-              name={modelList[model].name}
-              description={modelList[model].description}
+              name={modelInfo.name}
+              description={modelInfo.description}
             />
           );
         }
       }
-      if (modelList[model]?.model_format !== 'diffusers') {
+
+      if (modelInfo?.model_format !== 'diffusers') {
         ckptModelListItemsToRender.push(
           <ModelListItem
             key={i}
             modelKey={model}
-            name={modelList[model].name}
-            description={modelList[model].description}
+            name={modelInfo.name}
+            description={modelInfo.description}
           />
         );
       } else {
@@ -109,8 +113,8 @@ const ModelList = () => {
           <ModelListItem
             key={i}
             modelKey={model}
-            name={modelList[model].name}
-            description={modelList[model].description}
+            name={modelInfo.name}
+            description={modelInfo.description}
           />
         );
       }
@@ -170,7 +174,7 @@ const ModelList = () => {
           </Flex>
         )}
 
-        {isSelectedFilter === 'ckpt' && (
+        {isSelectedFilter === 'checkpoint' && (
           <Flex flexDirection="column" marginTop={4}>
             {ckptModelListItemsToRender}
           </Flex>
@@ -206,8 +210,8 @@ const ModelList = () => {
           />
           <ModelFilterButton
             label={t('modelManager.checkpointModels')}
-            onClick={() => setIsSelectedFilter('ckpt')}
-            isActive={isSelectedFilter === 'ckpt'}
+            onClick={() => setIsSelectedFilter('checkpoint')}
+            isActive={isSelectedFilter === 'checkpoint'}
           />
         </Flex>