From b170fc232eb65bbd3922ebd05d890c02ce960feb Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:52:55 +1000
Subject: [PATCH] tidy(ui): clearer component names for ip adapter

---
 .../components/CanvasEntityList.tsx              |  4 ++--
 .../IPAdapter/{IPA.tsx => IPAdapter.tsx}         |  8 ++++----
 ...magePreview.tsx => IPAdapterImagePreview.tsx} |  4 ++--
 .../{IPAEntityList.tsx => IPAdapterList.tsx}     |  8 ++++----
 .../{IPAMethod.tsx => IPAdapterMethod.tsx}       |  4 ++--
 .../{IPAModelCombobox.tsx => IPAdapterModel.tsx} |  4 ++--
 .../{IPASettings.tsx => IPAdapterSettings.tsx}   | 16 ++++++++--------
 .../RegionalGuidance/RGIPAdapterSettings.tsx     | 12 ++++++------
 8 files changed, 30 insertions(+), 30 deletions(-)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPA.tsx => IPAdapter.tsx} (86%)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPAImagePreview.tsx => IPAdapterImagePreview.tsx} (95%)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPAEntityList.tsx => IPAdapterList.tsx} (84%)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPAMethod.tsx => IPAdapterMethod.tsx} (92%)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPAModelCombobox.tsx => IPAdapterModel.tsx} (94%)
 rename invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/{IPASettings.tsx => IPAdapterSettings.tsx} (89%)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
index 1d309d4e12..710decfd0f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
@@ -3,7 +3,7 @@ import { Flex } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { ControlAdapterList } from 'features/controlLayers/components/ControlAdapter/ControlAdapterList';
 import { InpaintMask } from 'features/controlLayers/components/InpaintMask/InpaintMask';
-import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
+import { IPAdapterList } from 'features/controlLayers/components/IPAdapter/IPAdapterList';
 import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
 import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
 import { memo } from 'react';
@@ -15,7 +15,7 @@ export const CanvasEntityList = memo(() => {
         <InpaintMask />
         <RGEntityList />
         <ControlAdapterList />
-        <IPAEntityList />
+        <IPAdapterList />
         <LayerEntityList />
       </Flex>
     </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
similarity index 86%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
index a4befcdbdd..4b47536179 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
@@ -4,7 +4,7 @@ import { CanvasEntityDeleteButton } from 'features/controlLayers/components/comm
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { IPASettings } from 'features/controlLayers/components/IPAdapter/IPASettings';
+import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
@@ -13,7 +13,7 @@ type Props = {
   id: string;
 };
 
-export const IPA = memo(({ id }: Props) => {
+export const IPAdapter = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'ip_adapter' }), [id]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
@@ -26,10 +26,10 @@ export const IPA = memo(({ id }: Props) => {
           <Spacer />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
-        {isOpen && <IPASettings />}
+        {isOpen && <IPAdapterSettings />}
       </CanvasEntityContainer>
     </EntityIdentifierContext.Provider>
   );
 });
 
-IPA.displayName = 'IPA';
+IPAdapter.displayName = 'IPAdapter';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
similarity index 95%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAImagePreview.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
index 4dc44c9ae0..9e76aa1b91 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
@@ -22,7 +22,7 @@ type Props = {
   postUploadAction: PostUploadAction;
 };
 
-export const IPAImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppableData, postUploadAction }: Props) => {
+export const IPAdapterImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppableData, postUploadAction }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isConnected = useAppSelector((s) => s.system.isConnected);
@@ -97,4 +97,4 @@ export const IPAImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppa
   );
 });
 
-IPAImagePreview.displayName = 'IPAImagePreview';
+IPAdapterImagePreview.displayName = 'IPAdapterImagePreview';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
similarity index 84%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
index 5e04bc6162..348f525ae5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
@@ -2,7 +2,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityGroupTitle } from 'features/controlLayers/components/common/CanvasEntityGroupTitle';
-import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
+import { IPAdapter } from 'features/controlLayers/components/IPAdapter/IPAdapter';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
@@ -12,7 +12,7 @@ const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) =
   return canvasV2.ipAdapters.entities.map(mapId).reverse();
 });
 
-export const IPAEntityList = memo(() => {
+export const IPAdapterList = memo(() => {
   const { t } = useTranslation();
   const isSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'ip_adapter'));
   const ipaIds = useAppSelector(selectEntityIds);
@@ -29,11 +29,11 @@ export const IPAEntityList = memo(() => {
           isSelected={isSelected}
         />
         {ipaIds.map((id) => (
-          <IPA key={id} id={id} />
+          <IPAdapter key={id} id={id} />
         ))}
       </>
     );
   }
 });
 
-IPAEntityList.displayName = 'IPAEntityList';
+IPAdapterList.displayName = 'IPAdapterList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAMethod.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
similarity index 92%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAMethod.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
index 55c99fa6f7..1e1165fbc7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAMethod.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
@@ -12,7 +12,7 @@ type Props = {
   onChange: (method: IPMethodV2) => void;
 };
 
-export const IPAMethod = memo(({ method, onChange }: Props) => {
+export const IPAdapterMethod = memo(({ method, onChange }: Props) => {
   const { t } = useTranslation();
   const options: { label: string; value: IPMethodV2 }[] = useMemo(
     () => [
@@ -41,4 +41,4 @@ export const IPAMethod = memo(({ method, onChange }: Props) => {
   );
 });
 
-IPAMethod.displayName = 'IPAMethod';
+IPAdapterMethod.displayName = 'IPAdapterMethod';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAModelCombobox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx
similarity index 94%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAModelCombobox.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx
index 34e215dde7..80e322d7f4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAModelCombobox.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx
@@ -22,7 +22,7 @@ type Props = {
   onChangeCLIPVisionModel: (clipVisionModel: CLIPVisionModelV2) => void;
 };
 
-export const IPAModelCombobox = memo(({ modelKey, onChangeModel, clipVisionModel, onChangeCLIPVisionModel }: Props) => {
+export const IPAdapterModel = memo(({ modelKey, onChangeModel, clipVisionModel, onChangeCLIPVisionModel }: Props) => {
   const { t } = useTranslation();
   const currentBaseModel = useAppSelector((s) => s.canvasV2.params.model?.base);
   const [modelConfigs, { isLoading }] = useIPAdapterModels();
@@ -95,4 +95,4 @@ export const IPAModelCombobox = memo(({ modelKey, onChangeModel, clipVisionModel
   );
 });
 
-IPAModelCombobox.displayName = 'IPAModelCombobox';
+IPAdapterModel.displayName = 'IPAdapterModel';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
similarity index 89%
rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
index 5121bc27dc..a8d331bde9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
 import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
 import { Weight } from 'features/controlLayers/components/common/Weight';
-import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
+import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
   ipaBeginEndStepPctChanged,
@@ -19,10 +19,10 @@ import type { IPAImageDropData } from 'features/dnd/types';
 import { memo, useCallback, useMemo } from 'react';
 import type { ImageDTO, IPAdapterModelConfig, IPALayerImagePostUploadAction } from 'services/api/types';
 
-import { IPAImagePreview } from './IPAImagePreview';
-import { IPAModelCombobox } from './IPAModelCombobox';
+import { IPAdapterImagePreview } from './IPAdapterImagePreview';
+import { IPAdapterModel } from './IPAdapterModel';
 
-export const IPASettings = memo(() => {
+export const IPAdapterSettings = memo(() => {
   const dispatch = useAppDispatch();
   const { id } = useEntityIdentifierContext();
   const ipAdapter = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id));
@@ -77,7 +77,7 @@ export const IPASettings = memo(() => {
       <Flex flexDir="column" gap={4} position="relative" w="full">
         <Flex gap={3} alignItems="center" w="full">
           <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
-            <IPAModelCombobox
+            <IPAdapterModel
               modelKey={ipAdapter.model?.key ?? null}
               onChangeModel={onChangeModel}
               clipVisionModel={ipAdapter.clipVisionModel}
@@ -87,12 +87,12 @@ export const IPASettings = memo(() => {
         </Flex>
         <Flex gap={4} w="full" alignItems="center">
           <Flex flexDir="column" gap={3} w="full">
-            <IPAMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
+            <IPAdapterMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
             <Weight weight={ipAdapter.weight} onChange={onChangeWeight} />
             <BeginEndStepPct beginEndStepPct={ipAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
           </Flex>
           <Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
-            <IPAImagePreview
+            <IPAdapterImagePreview
               image={ipAdapter.imageObject?.image ?? null}
               onChangeImage={onChangeImage}
               ipAdapterId={ipAdapter.id}
@@ -106,4 +106,4 @@ export const IPASettings = memo(() => {
   );
 });
 
-IPASettings.displayName = 'IPASettings';
+IPAdapterSettings.displayName = 'IPAdapterSettings';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings.tsx
index 0a79a4368a..325fb48266 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings.tsx
@@ -2,9 +2,9 @@ import { Box, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
 import { Weight } from 'features/controlLayers/components/common/Weight';
-import { IPAImagePreview } from 'features/controlLayers/components/IPAdapter/IPAImagePreview';
-import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
-import { IPAModelCombobox } from 'features/controlLayers/components/IPAdapter/IPAModelCombobox';
+import { IPAdapterImagePreview } from 'features/controlLayers/components/IPAdapter/IPAdapterImagePreview';
+import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
+import { IPAdapterModel } from 'features/controlLayers/components/IPAdapter/IPAdapterModel';
 import {
   rgIPAdapterBeginEndStepPctChanged,
   rgIPAdapterCLIPVisionModelChanged,
@@ -107,7 +107,7 @@ export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: P
       <Flex flexDir="column" gap={4} position="relative" w="full">
         <Flex gap={3} alignItems="center" w="full">
           <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
-            <IPAModelCombobox
+            <IPAdapterModel
               modelKey={ipAdapter.model?.key ?? null}
               onChangeModel={onChangeModel}
               clipVisionModel={ipAdapter.clipVisionModel}
@@ -117,12 +117,12 @@ export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: P
         </Flex>
         <Flex gap={4} w="full" alignItems="center">
           <Flex flexDir="column" gap={3} w="full">
-            <IPAMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
+            <IPAdapterMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
             <Weight weight={ipAdapter.weight} onChange={onChangeWeight} />
             <BeginEndStepPct beginEndStepPct={ipAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
           </Flex>
           <Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
-            <IPAImagePreview
+            <IPAdapterImagePreview
               image={ipAdapter.imageObject?.image ?? null}
               onChangeImage={onChangeImage}
               ipAdapterId={ipAdapter.id}