MM-62044: Always show title in create bookmark flow (#29476)

e2e-tests/cypress/tests/integration/channels/channel/channel_bookmarks_spec.ts

@@ -265,6 +265,8 @@ function createLinkBookmark({
     // # Enter link
     editTextInput('linkInput', link);
 
+    cy.wait(TIMEOUTS.HALF_SEC);
+
     if (displayName) {
         // # Enter displayname
         editTextInput('titleInput', displayName);

webapp/channels/src/components/channel_bookmarks/channel_bookmarks_create_modal.tsx

@@ -292,7 +292,6 @@ function ChannelBookmarkCreateModal({
 
         return undefined;
     })();
-    const showControls = type === 'file' || (isValid || bookmark);
 
     const cancel = useCallback(() => {
         if (type === 'file') {
@@ -375,8 +374,8 @@ function ChannelBookmarkCreateModal({
             className='channel-bookmarks-create-modal'
             modalHeaderText={formatMessage(bookmark ? msg.editHeading : msg.heading)}
             confirmButtonText={formatMessage(bookmark ? msg.saveText : msg.addBookmarkText)}
-            handleCancel={(showControls && cancel) || undefined}
+            handleCancel={cancel}
-            handleConfirm={(showControls && confirm) || undefined}
+            handleConfirm={confirm}
             handleEnterKeyPress={(!confirmDisabled && confirm) || undefined}
             onExited={handleOnExited}
             compassDesign={true}
@@ -452,30 +451,28 @@ function ChannelBookmarkCreateModal({
 
                 )}
 
-                {showControls && (
+                <TitleWrapper>
-                    <TitleWrapper>
+                    <FieldLabel>
-                        <FieldLabel>
+                        <FormattedMessage
-                            <FormattedMessage
+                            id='channel_bookmarks.create.title_input.label'
-                                id='channel_bookmarks.create.title_input.label'
+                            defaultMessage='Title'
-                                defaultMessage='Title'
-                            />
-                        </FieldLabel>
-                        <CreateModalNameInput
-                            maxLength={MAX_TITLE_LENGTH}
-                            type={type}
-                            imageUrl={icon}
-                            fileInfo={pendingFile || fileInfo}
-                            emoji={emoji}
-                            setEmoji={setEmoji}
-                            displayName={displayName?.substring(0, MAX_TITLE_LENGTH)}
-                            placeholder={displayNameValue?.substring(0, MAX_TITLE_LENGTH)}
-                            setDisplayName={setDisplayName}
-                            onAddCustomEmojiClick={onHide}
-                            showEmojiPicker={showEmojiPicker}
-                            setShowEmojiPicker={setShowEmojiPicker}
                         />
-                    </TitleWrapper>
+                    </FieldLabel>
-                )}
+                    <CreateModalNameInput
+                        maxLength={MAX_TITLE_LENGTH}
+                        type={type}
+                        imageUrl={icon}
+                        fileInfo={pendingFile || fileInfo}
+                        emoji={emoji}
+                        setEmoji={setEmoji}
+                        displayName={displayName?.substring(0, MAX_TITLE_LENGTH)}
+                        placeholder={displayNameValue?.substring(0, MAX_TITLE_LENGTH)}
+                        setDisplayName={setDisplayName}
+                        onAddCustomEmojiClick={onHide}
+                        showEmojiPicker={showEmojiPicker}
+                        setShowEmojiPicker={setShowEmojiPicker}
+                    />
+                </TitleWrapper>
             </>
         </GenericModal>
     );