From 0e2cab28382b7f6e85c1ff32455b2cc15dde413c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <xnpiochv@gmail.com>
Date: Mon, 9 Jun 2025 15:48:51 -0500
Subject: [PATCH] fix: Issue on the in-place editor when renaming library
 containers (#2101)

* fix: Rename icon size & make the button disappear while editing

* style: Use the correct type in useUpdateContainer
---
 .../InplaceTextEditor.test.tsx                | 21 ++++++++++++++++++
 src/generic/inplace-text-editor/index.tsx     | 22 ++++++++++---------
 .../LibraryAuthoringPage.tsx                  |  2 +-
 src/library-authoring/data/apiHooks.ts        |  2 +-
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/generic/inplace-text-editor/InplaceTextEditor.test.tsx b/src/generic/inplace-text-editor/InplaceTextEditor.test.tsx
index c4dbc4619..9b7a55c28 100644
--- a/src/generic/inplace-text-editor/InplaceTextEditor.test.tsx
+++ b/src/generic/inplace-text-editor/InplaceTextEditor.test.tsx
@@ -110,4 +110,25 @@ describe('<InplaceTextEditor />', () => {
     // Show original text
     expect(screen.getByText('Test text')).toBeInTheDocument();
   });
+
+  it('should disappear edit button while editing', async () => {
+    render(<InplaceTextEditor text="Test text" onSave={mockOnSave} />);
+
+    const title = screen.getByText('Test text');
+    expect(title).toBeInTheDocument();
+
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    expect(editButton).toBeInTheDocument();
+    fireEvent.click(editButton);
+
+    const textBox = screen.getByRole('textbox');
+    expect(editButton).not.toBeInTheDocument();
+
+    fireEvent.change(textBox, { target: { value: 'New text' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(textBox).not.toBeInTheDocument();
+    expect(mockOnSave).toHaveBeenCalledWith('New text');
+    expect(await screen.findByRole('button', { name: /edit/i })).toBeInTheDocument();
+  });
 });
diff --git a/src/generic/inplace-text-editor/index.tsx b/src/generic/inplace-text-editor/index.tsx
index 89c97a2a0..cb07d2ffa 100644
--- a/src/generic/inplace-text-editor/index.tsx
+++ b/src/generic/inplace-text-editor/index.tsx
@@ -92,17 +92,19 @@ export const InplaceTextEditor: React.FC<InplaceTextEditorProps> = ({
           />
         )
         : (
-          <Truncate className={textClassName}>
-            {text}
-          </Truncate>
+          <>
+            <Truncate className={textClassName}>
+              {text}
+            </Truncate>
+            <IconButton
+              src={Edit}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.editTextButtonAlt)}
+              onClick={handleEdit}
+              size="sm"
+            />
+          </>
         )}
-      <IconButton
-        src={Edit}
-        iconAs={Icon}
-        alt={intl.formatMessage(messages.editTextButtonAlt)}
-        onClick={handleEdit}
-        size="inline"
-      />
     </Stack>
   );
 };
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index ffdbae47d..796f7135f 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -114,7 +114,7 @@ export const SubHeaderTitle = ({ title }: { title: ReactNode }) => {
   const showReadOnlyBadge = readOnly && !componentPickerMode;
 
   return (
-    <Stack direction="vertical">
+    <Stack direction="vertical" className="mt-1.5">
       {title}
       {showReadOnlyBadge && (
         <div>
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 8573804ff..3098e3756 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -619,7 +619,7 @@ export const useUpdateContainer = (containerId: string) => {
   return useMutation({
     mutationFn: (data: api.UpdateContainerDataRequest) => api.updateContainerMetadata(containerId, data),
     onMutate: (data) => {
-      const previousData = queryClient.getQueryData(containerQueryKey) as api.CollectionMetadata;
+      const previousData = queryClient.getQueryData(containerQueryKey) as api.Container;
       queryClient.setQueryData(containerQueryKey, {
         ...previousData,
         ...data,