Fixed Link media functionality (#2377)

Author: jsorohova

src/admin/media/mediaModal.tsx

@@ -22,6 +22,7 @@ interface MediaModalState {
     showImageDetailsModal: boolean,
     showNonImageDetailsModal: boolean,
     showDeleteConfirmation: boolean,
+    isLinking: boolean,
     isLoading: boolean
 }
 
@@ -56,6 +57,7 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
             showImageDetailsModal: false,
             showNonImageDetailsModal: false,
             showDeleteConfirmation: false,
+            isLinking: false,
             isLoading: false
         }
     }
@@ -98,7 +100,7 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
 
     linkMedia = async (): Promise<void> => {
         const newMediaFile = await this.mediaService.createMediaUrl('media.svg', 'https://cdn.paperbits.io/images/logo.svg');
-        this.setState({ selectedMediaFile: newMediaFile, showNonImageDetailsModal: true });
+        this.setState({ selectedMediaFile: newMediaFile, showNonImageDetailsModal: true, isLinking: true });
     }
 
     deleteMedia = async (): Promise<void> => {
@@ -235,8 +237,9 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
             {this.state.showNonImageDetailsModal &&
                 <NonImageDetailsModal
                     mediaItem={this.state.selectedMediaFile}
+                    isLinking={this.state.isLinking}
                     onDismiss={() => {
-                        this.setState({ showNonImageDetailsModal: false });
+                        this.setState({ showNonImageDetailsModal: false, isLinking: false });
                         this.searchMedia();
                     }}
                 />

src/admin/media/nonImageDetailsModal.tsx

@@ -16,6 +16,7 @@ interface NonImageDetailsModalState {
 
 interface NonImageDetailsModalProps {
     mediaItem: MediaContract,
+    isLinking?: boolean,
     onDismiss: () => void
 }
 
@@ -65,6 +66,19 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
         });
     }
 
+    onReferenceUrlChange = (): void => {
+        if (!this.state.errors['downloadUrl'] && this.state.mediaItem.fileName === 'media.svg') {
+            const newName = this.state.mediaItem.downloadUrl.split("/").pop();
+            this.setState({
+                mediaItem: {
+                    ...this.state.mediaItem,
+                    fileName: newName,
+                    permalink: '/content/' + newName
+                }
+            })
+        }
+    } 
+
     validatePermalink = async (permalink: string): Promise<string> => {
         if (permalink === this.props.mediaItem?.permalink) return '';
 
@@ -84,8 +98,6 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
             return;
         }
 
-        return;
-
         await this.mediaService.updateMedia(this.state.mediaItem);
         this.eventManager.dispatchEvent('onSaveChanges');
         this.props.onDismiss();
@@ -108,7 +120,13 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
                         />
                         <DefaultButton
                             text="Discard"
-                            onClick={this.props.onDismiss}
+                            onClick={async () => {
+                                if (this.props.isLinking) {
+                                    await this.mediaService.deleteMedia(this.state.mediaItem);
+                                    this.eventManager.dispatchEvent('onSaveChanges');
+                                }
+                                this.props.onDismiss();
+                            }}
                         />
                     </Stack>
                 </Stack>
@@ -129,11 +147,22 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
                         styles={textFieldStyles}
                         required
                     />
-                    <CopyableTextField
-                        fieldLabel="Reference URL"
-                        showLabel={true}
-                        copyableValue={this.state.mediaItem.downloadUrl}
-                    />
+                    {this.props.isLinking
+                        ? <TextField
+                            label="Reference URL"
+                            value={this.state.mediaItem.downloadUrl}
+                            onChange={(event, newValue) => this.onInputChange('downloadUrl', newValue, URL_REQUIRED)}
+                            errorMessage={this.state.errors['downloadUrl'] ?? ''}
+                            styles={textFieldStyles}
+                            required
+                            onBlur={() => this.onReferenceUrlChange()}
+                        />
+                        : <CopyableTextField
+                            fieldLabel="Reference URL"
+                            showLabel={true}
+                            copyableValue={this.state.mediaItem.downloadUrl}
+                        />
+                    }
                     <TextField
                         label="Description"
                         multiline