Merge branch 'master' into fui/master-merge

src/admin/media/mediaSelectionItemModal.tsx

@@ -9,6 +9,7 @@ import { MediaContract } from '@paperbits/common/media/mediaContract';
 import { DefaultButton, IIconProps, Image, ImageFit, IOverflowSetItemProps, Link, Modal, SearchBox, Stack, Text } from '@fluentui/react';
 import { createSearchQuery, getAllValues } from '../utils/helpers';
 import { NonImageDetailsModal } from './nonImageDetailsModal';
+import { MimeTypes } from '@paperbits/common';
 
 interface MediaSelectionItemModalState {
     media: MediaContract[],
@@ -30,7 +31,7 @@ export class MediaSelectionItemModal extends React.Component<MediaSelectionItemM
 
     @Resolve('eventManager')
     public eventManager: EventManager;
-    
+
     @Resolve('viewManager')
     public viewManager: ViewManager;
 
@@ -70,7 +71,7 @@ export class MediaSelectionItemModal extends React.Component<MediaSelectionItemM
     }
 
     linkMedia = async (): Promise<void> => {
-        const newMediaFile = await this.mediaService.createMediaUrl('media.svg', 'https://cdn.paperbits.io/images/logo.svg');
+        const newMediaFile = await this.mediaService.createMediaUrl('media.svg', 'https://cdn.paperbits.io/images/logo.svg', MimeTypes.imageSvg);
         this.setState({ selectedMediaFile: newMediaFile, showNonImageDetailsModal: true });
     }
 
@@ -103,14 +104,14 @@ export class MediaSelectionItemModal extends React.Component<MediaSelectionItemM
 
     renderMediaItem = (mediaItem: MediaContract): JSX.Element => {
         const thumbnailUrl: string = this.getThumbnailUrl(mediaItem);
-        
+
         return (
             <div className="media-box media-selection-block" onClick={() => this.props.selectMedia(mediaItem)} key={mediaItem.key}>
                 <Image
                     src={thumbnailUrl ?? '/assets/images/no-preview.png'}
                     imageFit={ImageFit.centerCover}
                     styles={{ root: { flexGrow: 1, marginTop: 10, marginBottom: 20 } }}
-                /> 
+                />
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
                     <Text>{mediaItem.fileName}</Text>
                 </Stack>

src/admin/media/nonImageDetailsModal.tsx

@@ -9,6 +9,7 @@ import { CopyableTextField } from '../utils/components/copyableTextField';
 import { REQUIRED, UNIQUE_REQUIRED, URL_REQUIRED, validateField } from '../utils/validator';
 import { reservedPermalinks } from '../../constants';
 import { MimeTypes } from '@paperbits/common';
+import { getType } from "mime";
 
 interface NonImageDetailsModalState {
     mediaItem: MediaContract,
@@ -40,13 +41,16 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
-        this.setState({
-            mediaItem: {
-                ...this.state.mediaItem,
-                [field]: newValue
-            }
-        });
+        const newStateMediaItem: MediaContract = { ...this.state.mediaItem, [field]: newValue };
 
+        if (field === 'downloadUrl') {
+            const newMimeType: string = getType(newValue);
+            if (newMimeType) {
+                newStateMediaItem.mimeType = newMimeType;
+            }
+        }
+
+        this.setState({ mediaItem: newStateMediaItem });
         this.runValidation(field, newValue, validationType);
     }
 

src/components/operations/operation-details/ko/runtime/operation-console.html

@@ -391,12 +391,14 @@
                 </summary>
 
                 <!-- ko ifnot: operation().request.isFormData() -->
-                <select aria-label="Programming language" id="requestLanguages" class="form-control"
-                    data-bind="value: $component.selectedLanguage">
-                    <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
-                    <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
-                    <!-- /ko -->
-                </select>
+                <div class="form-group">
+                    <select aria-label="Programming language" id="requestLanguages" class="form-control"
+                        data-bind="value: $component.selectedLanguage">
+                        <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
+                        <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
+                        <!-- /ko -->
+                    </select>
+                </div>
 
                 <div class="code-snippet">
                     <div class="code-snippet-heading">

src/components/operations/operation-list/ko/runtime/operation-list.html

@@ -19,7 +19,7 @@
 
 <!-- ko ifnot: apiType() === 'websocket' || apiType() === 'graphql'-->
 <div class="form-inline max-w-500">
-    <div class="d-block flex-grow mw-170">
+    <div class="form-group d-block flex-grow mw-170">
         <input type="search" class="form-control form-control-light" aria-label="Search operations"
             placeholder="Search operations" spellcheck="false" data-bind="textInput: pattern" />
         <tag-input params="{ scope: $component.tagScope, onChange: onTagsChange }"></tag-input>

src/themes/website/styles/forms.scss

@@ -251,4 +251,4 @@ input[type=search] {
         border-left: solid white 1px;
         pointer-events: none;
     }
-}
+}

src/themes/website/styles/navs.scss

@@ -29,6 +29,8 @@
 
     &.show {
         display: block;
+        max-height: 500px;
+        overflow-x: auto;
     }
 }
 

src/themes/website/styles/reboot.scss

@@ -3,7 +3,6 @@
 ::before {
     box-sizing: border-box;
     min-width: 0;
-    min-height: 0;
 }
 html {
     font-family: sans-serif;