From 5ef87ef2a63e738b024bf8e527b2b85a9aebe512 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 19 Jan 2024 15:00:45 +1100
Subject: [PATCH] fix(ui): tidy component/props naming in
 `ClearQueueIconButton.tsx`

---
 .../queue/components/ClearQueueIconButton.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index 6924aa73a8..e42daedcb5 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -9,12 +9,16 @@ import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
-type Props = Omit<InvIconButtonProps, 'aria-label'>;
+type ClearQueueButtonProps = Omit<InvIconButtonProps, 'aria-label'>;
 
-const ClearQueueIconButton = ({
+type ClearQueueIconButtonProps = ClearQueueButtonProps & {
+  onOpen: () => void;
+};
+
+const ClearAllQueueIconButton = ({
   onOpen,
   ...props
-}: Props & { onOpen: () => void }) => {
+}: ClearQueueIconButtonProps) => {
   const { t } = useTranslation();
   const { isLoading, isDisabled } = useClearQueue();
 
@@ -33,7 +37,7 @@ const ClearQueueIconButton = ({
   );
 };
 
-const ClearSingleQueueItemIconButton = (props: Props) => {
+const ClearSingleQueueItemIconButton = (props: ClearQueueButtonProps) => {
   const { t } = useTranslation();
   const { cancelQueueItem, isLoading, isDisabled } =
     useCancelCurrentQueueItem();
@@ -53,17 +57,16 @@ const ClearSingleQueueItemIconButton = (props: Props) => {
   );
 };
 
-export const ClearQueueButton = (props: Props) => {
+export const ClearQueueIconButton = (props: ClearQueueButtonProps) => {
   // Show the single item clear button when shift is pressed
   // Otherwise show the clear queue button
   const shift = useStore($shift);
-
   const disclosure = useDisclosure();
 
   return (
     <>
       {shift ? (
-        <ClearQueueIconButton {...props} onOpen={disclosure.onOpen} />
+        <ClearAllQueueIconButton {...props} onOpen={disclosure.onOpen} />
       ) : (
         <ClearSingleQueueItemIconButton {...props} />
       )}
@@ -72,4 +75,4 @@ export const ClearQueueButton = (props: Props) => {
   );
 };
 
-export default ClearQueueButton;
+export default ClearQueueIconButton;