tidy(ui): clearer component names for regional guidance

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable i18next/no-literal-string */
 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 { IPAdapterList } from 'features/controlLayers/components/IPAdapter/IPAdapterList';
 import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
-import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
+import { RegionalGuidanceEntityList } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceEntityList';
 import { memo } from 'react';
 
 export const CanvasEntityList = memo(() => {
@@ -13,7 +12,7 @@ export const CanvasEntityList = memo(() => {
     <ScrollableContent>
       <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
         <InpaintMask />
-        <RGEntityList />
+        <RegionalGuidanceEntityList />
         <ControlAdapterList />
         <IPAdapterList />
         <LayerEntityList />

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx

@@ -4,21 +4,21 @@ 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 { RGActionsMenu } from 'features/controlLayers/components/RegionalGuidance/RGActionsMenu';
-import { RGBadges } from 'features/controlLayers/components/RegionalGuidance/RGBadges';
-import { RGSettings } from 'features/controlLayers/components/RegionalGuidance/RGSettings';
+import { RegionalGuidanceActionsMenu } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceActionsMenu';
+import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges';
+import { RegionalGuidanceSettings } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 
-import { RGMaskFillColorPicker } from './RGMaskFillColorPicker';
-import { RGSettingsPopover } from './RGSettingsPopover';
+import { RegionalGuidanceMaskFillColorPicker } from './RegionalGuidanceMaskFillColorPicker';
+import { RegionalGuidanceSettingsPopover } from './RegionalGuidanceSettingsPopover';
 
 type Props = {
   id: string;
 };
 
-export const RG = memo(({ id }: Props) => {
+export const RegionalGuidance = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'regional_guidance' }), [id]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
   return (
@@ -28,16 +28,16 @@ export const RG = memo(({ id }: Props) => {
           <CanvasEntityEnabledToggle />
           <CanvasEntityTitle />
           <Spacer />
-          <RGBadges />
-          <RGMaskFillColorPicker />
-          <RGSettingsPopover />
-          <RGActionsMenu />
+          <RegionalGuidanceBadges />
+          <RegionalGuidanceMaskFillColorPicker />
+          <RegionalGuidanceSettingsPopover />
+          <RegionalGuidanceActionsMenu />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
-        {isOpen && <RGSettings />}
+        {isOpen && <RegionalGuidanceSettings />}
       </CanvasEntityContainer>
     </EntityIdentifierContext.Provider>
   );
 });
 
-RG.displayName = 'RG';
+RegionalGuidance.displayName = 'RegionalGuidance';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceActionsMenu.tsx

@@ -15,7 +15,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
-export const RGActionsMenu = memo(() => {
+export const RegionalGuidanceActionsMenu = memo(() => {
   const { id } = useEntityIdentifierContext();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -59,4 +59,4 @@ export const RGActionsMenu = memo(() => {
   );
 });
 
-RGActionsMenu.displayName = 'RGActionsMenu';
+RegionalGuidanceActionsMenu.displayName = 'RegionalGuidanceActionsMenu';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges.tsx

@@ -5,7 +5,7 @@ import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const RGBadges = memo(() => {
+export const RegionalGuidanceBadges = memo(() => {
   const { id } = useEntityIdentifierContext();
   const { t } = useTranslation();
   const autoNegative = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).autoNegative);
@@ -21,4 +21,4 @@ export const RGBadges = memo(() => {
   );
 });
 
-RGBadges.displayName = 'RGBadges';
+RegionalGuidanceBadges.displayName = 'RegionalGuidanceBadges';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx

@@ -7,7 +7,7 @@ type Props = {
   onDelete: () => void;
 };
 
-export const RGDeletePromptButton = memo(({ onDelete }: Props) => {
+export const RegionalGuidanceDeletePromptButton = memo(({ onDelete }: Props) => {
   const { t } = useTranslation();
   return (
     <Tooltip label={t('controlLayers.deletePrompt')}>
@@ -21,4 +21,4 @@ export const RGDeletePromptButton = memo(({ onDelete }: Props) => {
   );
 });
 
-RGDeletePromptButton.displayName = 'RGDeletePromptButton';
+RegionalGuidanceDeletePromptButton.displayName = 'RegionalGuidanceDeletePromptButton';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceEntityList.tsx

@@ -1,7 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityGroupTitle } from 'features/controlLayers/components/common/CanvasEntityGroupTitle';
-import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
+import { RegionalGuidance } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidance';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
@@ -11,7 +11,7 @@ const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) =
   return canvasV2.regions.entities.map(mapId).reverse();
 });
 
-export const RGEntityList = memo(() => {
+export const RegionalGuidanceEntityList = memo(() => {
   const { t } = useTranslation();
   const isSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'regional_guidance'));
   const rgIds = useAppSelector(selectEntityIds);
@@ -28,11 +28,11 @@ export const RGEntityList = memo(() => {
           isSelected={isSelected}
         />
         {rgIds.map((id) => (
-          <RG key={id} id={id} />
+          <RegionalGuidance key={id} id={id} />
         ))}
       </>
     );
   }
 });
 
-RGEntityList.displayName = 'RGEntityList';
+RegionalGuidanceEntityList.displayName = 'RegionalGuidanceEntityList';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx

@@ -28,7 +28,7 @@ type Props = {
   ipAdapterNumber: number;
 };
 
-export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: Props) => {
+export const RegionalGuidanceIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: Props) => {
   const dispatch = useAppDispatch();
   const onDeleteIPAdapter = useCallback(() => {
     dispatch(rgIPAdapterDeleted({ id, ipAdapterId }));
@@ -136,4 +136,4 @@ export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: P
   );
 });
 
-RGIPAdapterSettings.displayName = 'RGIPAdapterSettings';
+RegionalGuidanceIPAdapterSettings.displayName = 'RegionalGuidanceIPAdapterSettings';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapters.tsx

@@ -1,6 +1,6 @@
 import { Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { RGIPAdapterSettings } from 'features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings';
+import { RegionalGuidanceIPAdapterSettings } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings';
 import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers';
 import { memo } from 'react';
 
@@ -8,7 +8,7 @@ type Props = {
   id: string;
 };
 
-export const RGIPAdapters = memo(({ id }: Props) => {
+export const RegionalGuidanceIPAdapters = memo(({ id }: Props) => {
   const ipAdapterIds = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).ipAdapters.map(({ id }) => id));
 
   if (ipAdapterIds.length === 0) {
@@ -24,11 +24,11 @@ export const RGIPAdapters = memo(({ id }: Props) => {
               <Divider />
             </Flex>
           )}
-          <RGIPAdapterSettings id={id} ipAdapterId={id} ipAdapterNumber={index + 1} />
+          <RegionalGuidanceIPAdapterSettings id={id} ipAdapterId={id} ipAdapterNumber={index + 1} />
         </Flex>
       ))}
     </>
   );
 });
 
-RGIPAdapters.displayName = 'RGLayerIPAdapterList';
+RegionalGuidanceIPAdapters.displayName = 'RegionalGuidanceLayerIPAdapterList';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMaskFillColorPicker.tsx

@@ -10,7 +10,7 @@ import { memo, useCallback } from 'react';
 import type { RgbColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
-export const RGMaskFillColorPicker = memo(() => {
+export const RegionalGuidanceMaskFillColorPicker = memo(() => {
   const entityIdentifier = useEntityIdentifierContext();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -46,4 +46,4 @@ export const RGMaskFillColorPicker = memo(() => {
   );
 });
 
-RGMaskFillColorPicker.displayName = 'RGMaskFillColorPicker';
+RegionalGuidanceMaskFillColorPicker.displayName = 'RegionalGuidanceMaskFillColorPicker';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceNegativePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { RGDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RGDeletePromptButton';
+import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
 import { rgNegativePromptChanged } from 'features/controlLayers/store/canvasV2Slice';
 import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@@ -14,7 +14,7 @@ type Props = {
   id: string;
 };
 
-export const RGNegativePrompt = memo(({ id }: Props) => {
+export const RegionalGuidanceNegativePrompt = memo(({ id }: Props) => {
   const prompt = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).negativePrompt ?? '');
   const dispatch = useAppDispatch();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -50,7 +50,7 @@ export const RGNegativePrompt = memo(({ id }: Props) => {
           fontSize="sm"
         />
         <PromptOverlayButtonWrapper>
-          <RGDeletePromptButton onDelete={onDeletePrompt} />
+          <RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
       </Box>
@@ -58,4 +58,4 @@ export const RGNegativePrompt = memo(({ id }: Props) => {
   );
 });
 
-RGNegativePrompt.displayName = 'RGNegativePrompt';
+RegionalGuidanceNegativePrompt.displayName = 'RegionalGuidanceNegativePrompt';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidancePositivePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { RGDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RGDeletePromptButton';
+import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
 import { rgPositivePromptChanged } from 'features/controlLayers/store/canvasV2Slice';
 import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@@ -14,7 +14,7 @@ type Props = {
   id: string;
 };
 
-export const RGPositivePrompt = memo(({ id }: Props) => {
+export const RegionalGuidancePositivePrompt = memo(({ id }: Props) => {
   const prompt = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).positivePrompt ?? '');
   const dispatch = useAppDispatch();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -50,7 +50,7 @@ export const RGPositivePrompt = memo(({ id }: Props) => {
           minH={28}
         />
         <PromptOverlayButtonWrapper>
-          <RGDeletePromptButton onDelete={onDeletePrompt} />
+          <RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
       </Box>
@@ -58,4 +58,4 @@ export const RGPositivePrompt = memo(({ id }: Props) => {
   );
 });
 
-RGPositivePrompt.displayName = 'RGPositivePrompt';
+RegionalGuidancePositivePrompt.displayName = 'RegionalGuidancePositivePrompt';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings.tsx

@@ -5,11 +5,11 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers';
 import { memo } from 'react';
 
-import { RGIPAdapters } from './RGIPAdapters';
-import { RGNegativePrompt } from './RGNegativePrompt';
-import { RGPositivePrompt } from './RGPositivePrompt';
+import { RegionalGuidanceIPAdapters } from './RegionalGuidanceIPAdapters';
+import { RegionalGuidanceNegativePrompt } from './RegionalGuidanceNegativePrompt';
+import { RegionalGuidancePositivePrompt } from './RegionalGuidancePositivePrompt';
 
-export const RGSettings = memo(() => {
+export const RegionalGuidanceSettings = memo(() => {
   const { id } = useEntityIdentifierContext();
   const hasPositivePrompt = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).positivePrompt !== null);
   const hasNegativePrompt = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).negativePrompt !== null);
@@ -18,11 +18,11 @@ export const RGSettings = memo(() => {
   return (
     <CanvasEntitySettings>
       {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons id={id} />}
-      {hasPositivePrompt && <RGPositivePrompt id={id} />}
-      {hasNegativePrompt && <RGNegativePrompt id={id} />}
-      {hasIPAdapters && <RGIPAdapters id={id} />}
+      {hasPositivePrompt && <RegionalGuidancePositivePrompt id={id} />}
+      {hasNegativePrompt && <RegionalGuidanceNegativePrompt id={id} />}
+      {hasIPAdapters && <RegionalGuidanceIPAdapters id={id} />}
     </CanvasEntitySettings>
   );
 });
 
-RGSettings.displayName = 'RGSettings';
+RegionalGuidanceSettings.displayName = 'RegionalGuidanceSettings';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettingsPopover.tsx

@@ -20,7 +20,7 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiGearSixBold } from 'react-icons/pi';
 
-export const RGSettingsPopover = memo(() => {
+export const RegionalGuidanceSettingsPopover = memo(() => {
   const entityIdentifier = useEntityIdentifierContext();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -60,4 +60,4 @@ export const RGSettingsPopover = memo(() => {
   );
 });
 
-RGSettingsPopover.displayName = 'RGSettingsPopover';
+RegionalGuidanceSettingsPopover.displayName = 'RegionalGuidanceSettingsPopover';