move button position

Author: ElinorW

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -145,6 +145,20 @@ const UnstyledResourceExplorer = (props: any) => {
         onChange={debouncedSearch}
         styles={searchBoxStyles}
       />
+      <DefaultButton onClick={openPreviewCollection}
+        iconProps={{iconName: 'AddBookmark'}}
+        ariaLabel={translateMessage('My API Collection')}
+        styles={styles.apiCollectionButton}
+        text={translateMessage('My API Collection')}
+      >
+        <Stack horizontal reversed verticalAlign="center" tokens={{ childrenGap: 8 }}>
+          <Stack.Item align='auto'>
+            <div style={styles.apiCollectionCount}>
+              {selectedLinks.length > 0 ? `(${selectedLinks.length})` : '0'}
+            </div>
+          </Stack.Item>
+        </Stack>
+      </DefaultButton>
       <Stack horizontal tokens={{ childrenGap: 10, padding: 10 }} horizontalAlign='space-between'>
         <Label styles={{ root: { position: 'relative'} }}>
           {translateMessage('Resources available')}
@@ -160,21 +174,6 @@ const UnstyledResourceExplorer = (props: any) => {
           </Label>
         </Stack>
       </Stack>
-      <DefaultButton onClick={openPreviewCollection}
-        iconProps={{iconName: 'AddBookmark'}}
-        ariaLabel={translateMessage('My API Collection')}
-        styles={styles.apiCollectionButton}
-        text={translateMessage('My API Collection')}
-      >
-        <Stack horizontal reversed verticalAlign="center" tokens={{ childrenGap: 8 }}>
-          <Stack.Item align='auto'>
-            <div style={styles.apiCollectionCount}>
-              {selectedLinks.length > 0 ? `(${selectedLinks.length})` : '0'}
-            </div>
-          </Stack.Item>
-        </Stack>
-      </DefaultButton>
-
       {
         items[0].links.length === 0 ? NoResultsFound('No resources found', { paddingBottom: '20px' }) :
           (<Nav

src/app/views/sidebar/resource-explorer/collection/APICollection.tsx

@@ -216,7 +216,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
         farItems={farItems}
       />
 
-<input
+      <input
         key={fileInputKey}
         type="file"
         id="file-input"

src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx

@@ -80,7 +80,7 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
 
   return (
     <>
-    <MessageBar isMultiline={true}>
+      <MessageBar isMultiline={true}>
         {translateMessage('list of permissions')}
         <Link
           target='_blank'
@@ -92,19 +92,19 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
         >
           {translateMessage('Microsoft Graph permissions reference')}
         </Link>
-    </MessageBar>
-    <div style={{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
-      <DetailsList
-        items={permissionsArray}
-        columns={columns}
-        groups={groups}
-        selectionMode={SelectionMode.none}
-      />
+      </MessageBar>
+      <div style={{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
+        <DetailsList
+          items={permissionsArray}
+          columns={columns}
+          groups={groups}
+          selectionMode={SelectionMode.none}
+        />
       </div>
       {permissions &&
         <DialogFooter styles={{
           actionsRight: { bottom: 0, justifyContent: 'start' }
-          }}>
+        }}>
           <PrimaryButton onClick={downloadPermissions}>
             {translateMessage('Download permissions')}
           </PrimaryButton>

src/app/views/sidebar/resource-explorer/resources.styles.ts

@@ -36,7 +36,8 @@ export const resourceExplorerStyles = (theme: ITheme) => {
         justifyContent: 'flex-start',
         backgroundColor: theme.palette.neutralLighterAlt,
         textAlign: 'left',
-        height: '40px'
+        height: '40px',
+        marginTop: '10px'
       },
       label: {
         marginLeft: '8px',