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

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();
+  });
 });

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>
   );
 };

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>

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,