feat: migrate components in collections (#3530)

* use common component

* update components

* update style

* fix far items

* add drawer to parent component

* fix style

* fix styling

* fix conflicts

* localize strings

* use tokens

* increase default drawer size

* remove multiple imports

* fix message bars

* update url styles

Author: Mnickii

…app/views/common/popups/PanelWrapper.tsx …pp/views/common/popups/DrawerWrapper.tsxsrc/app/views/common/popups/PanelWrapper.tsx renamed to src/app/views/common/popups/DrawerWrapper.tsx src/app/views/common/popups/PanelWrapper.tsx renamed to src/app/views/common/popups/DrawerWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Suspense } from 'react';
 import {
   Drawer,
@@ -7,17 +6,28 @@ import {
   DrawerHeader,
   DrawerHeaderTitle,
   Button,
-  Spinner
+  Spinner,
+  makeStyles
 } from '@fluentui/react-components';
 import { ArrowLeft24Regular, Dismiss24Regular } from '@fluentui/react-icons';
 
 import { translateMessage } from '../../../utils/translate-messages';
 import { WrapperProps } from './popups.types';
 
+const useDrawerStyles = makeStyles({
+  root: {
+    width: '1100px'
+  },
+  button: {
+    marginInlineEnd: '20px'
+  }
+});
+
 
 export function DrawerWrapper(props: WrapperProps) {
   const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
   const { title, renderFooter, width } = popupsProps.settings;
+  const drawerStyles = useDrawerStyles();
 
   const getDrawerSize = () => {
     switch (width) {
@@ -52,16 +62,9 @@ export function DrawerWrapper(props: WrapperProps) {
       position='end'
       type='overlay'
       size={getDrawerSize()}
+      className={drawerStyles.root}
     >
       <DrawerHeader>
-        {showBackButton && (
-          <Button
-            icon={<ArrowLeft24Regular />}
-            appearance='subtle'
-            onClick={() => dismissPopup()}
-            aria-label={translateMessage('Back')}
-          />
-        )}
         <DrawerHeaderTitle action={
           <Button
             icon={<Dismiss24Regular />}
@@ -71,6 +74,15 @@ export function DrawerWrapper(props: WrapperProps) {
           />
 
         }>
+          {showBackButton && (
+            <Button
+              icon={<ArrowLeft24Regular />}
+              appearance='subtle'
+              onClick={() => dismissPopup()}
+              aria-label={translateMessage('Back')}
+              className={drawerStyles.button}
+            />
+          )}
           {title || ''}
         </DrawerHeaderTitle>
       </DrawerHeader>

src/app/views/common/popups/PopupsWrapper.tsx

@@ -5,7 +5,7 @@ import {
 import ErrorBoundary from '../error-boundary/ErrorBoundary';
 import { DialogWrapper } from './DialogWrapper';
 import { ModalWrapper } from './ModalWrapper';
-import { DrawerWrapper } from './PanelWrapper';
+import { DrawerWrapper } from './DrawerWrapper';
 
 const PopupWrapper = () => {
 

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

@@ -118,7 +118,7 @@ const UnstyledResourceExplorer = (props: any) => {
     previewCollection({
       settings: {
         title: translateMessage('My API collection'),
-        width: 'xl'
+        width: 'lg'
       }
     })
   }

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

@@ -1,11 +1,17 @@
 import {
-  CommandBar,
-  DefaultButton,
+  Label,
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
   Dialog,
-  DialogFooter, DialogType, ICommandBarItemProps,
-  Label, MessageBarType, PrimaryButton
-} from '@fluentui/react';
-
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  Button
+} from '@fluentui/react-components';
+import { Delete20Regular, Key20Regular, ArrowUpload20Regular, List20Regular } from '@fluentui/react-icons';
 import { useAppDispatch, useAppSelector } from '../../../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../../../telemetry';
 import { PopupsComponent } from '../../../../services/context/popups-context';
@@ -19,6 +25,7 @@ import { useEffect, useState } from 'react';
 import { ResourcePath } from '../../../../../types/resources';
 import { setQueryResponseStatus } from '../../../../services/slices/query-status.slice';
 import { isGeneratedCollectionInCollection } from './upload-collection.util';
+import CommonCollectionsPanel from './CommonCollectionsPanel';
 
 export interface APICollection {
   version: string;
@@ -64,7 +71,6 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
     trackDownload(filename, componentNames.DOWNLOAD_POSTMAN_COLLECTION_BUTTON);
   }
 
-
   const handleFileSelect = (event: any) => {
     const file = event.target.files[0];
     if (file) {
@@ -155,7 +161,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
     showPopup({
       settings: {
         title: translateMessage('Edit Collection'),
-        width: 'xl'
+        width: 'lg'
       }
     });
   };
@@ -164,57 +170,82 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
     showEditScopePanel({
       settings: {
         title: translateMessage('Edit Scope'),
-        width: 'xl'
+        width: 'lg'
       }
     });
   };
 
-  const options: ICommandBarItemProps[] = [
+  const options = [
     {
       key: 'remove',
       text: translateMessage('Edit collection'),
-      iconProps: { iconName: 'Delete' },
+      icon: <Delete20Regular />,
       disabled: items.length === 0,
       onClick: openEditCollectionPanel
     },
     {
       key: 'set-scope',
       text: translateMessage('Edit scope'),
-      iconProps: { iconName: 'Permissions' },
+      icon: <Key20Regular />,
       disabled: items.length === 0,
       onClick: openEditScopePanel
     },
     {
       key: 'upload',
       text: translateMessage('Upload a new list'),
-      iconProps: { iconName: 'Upload' },
+      icon: <ArrowUpload20Regular />,
       onClick: () => document.getElementById('file-input')?.click()
     }
   ];
 
-  const farItems: ICommandBarItemProps[] = [
+  const farItems = [
     {
       key: 'preview-permissions',
       text: translateMessage('Preview permissions'),
-      iconProps: { iconName: 'ListMirrored' },
+      icon: <List20Regular />,
       disabled: items.length === 0,
       onClick: () => viewPermissions({
         settings: {
           title: translateMessage('Preview Permissions'),
-          width: 'xl'
+          width: 'lg'
         }
       })}
   ];
 
   return (
-    <>
-      <CommandBar
-        items={options}
-        ariaLabel='Selection actions'
-        primaryGroupAriaLabel='Selection actions'
-        farItemsGroupAriaLabel='More selection actions'
-        farItems={farItems}
-      />
+    <CommonCollectionsPanel
+      primaryButtonText='Download postman collection'
+      primaryButtonAction={generateCollection}
+      primaryButtonDisabled={items.length === 0}
+      closePopup={props.dismissPopup}
+    >
+      <Toolbar aria-label='Selection actions' style={{ justifyContent: 'space-between' }}>
+        <ToolbarGroup>
+          {options.map(option => (
+            <ToolbarButton
+              key={option.key}
+              icon={option.icon}
+              disabled={option.disabled}
+              onClick={option.onClick}
+              style={{ marginInlineEnd: '30px' }}
+            >
+              {option.text}
+            </ToolbarButton>
+          ))}
+        </ToolbarGroup>
+        <ToolbarGroup>
+          {farItems.map(item => (
+            <ToolbarButton
+              key={item.key}
+              icon={item.icon}
+              disabled={item.disabled}
+              onClick={item.onClick}
+            >
+              {item.text}
+            </ToolbarButton>
+          ))}
+        </ToolbarGroup>
+      </Toolbar>
 
       <input
         key={fileInputKey}
@@ -224,57 +255,45 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
         onChange={handleFileSelect}
       />
 
-      {!isDialogHidden && (
-        <Dialog
-          hidden={isDialogHidden}
-          onDismiss={() => setIsDialogHidden(true)}
-          dialogContentProps={{
-            type: DialogType.normal,
-            title: translateMessage('Upload collection'),
-            closeButtonAriaLabel: 'Close',
-            subText: translateMessage('You have an existing collection. Would you like to merge or replace it?')
-          }}
-        >
-          <DialogFooter>
-            <PrimaryButton onClick={mergeWithExistingCollection} text={translateMessage('Merge with existing')} />
-            <DefaultButton onClick={overwriteCollection} text={translateMessage('Replace existing')} />
-          </DialogFooter>
-        </Dialog>
-      )}
-
       {items && items.length > 0 ?
-        (<div style={{ height: '80vh' }}>
+        (<div>
           <Paths
             resources={items}
             columns={columns}
           />
         </div>
         ) :
         (
-          <Label
-            style={{ display: 'flex', width: '100%',
-              height: '80vh',
-              justifyContent: 'center',
-              alignItems: 'center' }}>
+          <Label style={{
+            height: '80vh',
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}>
             {translateMessage('Add queries in the API Explorer and History tab')}
           </Label>
         )}
-      <DialogFooter
-        styles={{
-          actionsRight: { bottom: 0, justifyContent: 'start' }
-        }}>
-        <PrimaryButton onClick={generateCollection} disabled={items.length === 0}>
-          {translateMessage('Download postman collection')}
-        </PrimaryButton>
 
-        <DefaultButton
-          onClick={
-            () => props.closePopup()
-          }>
-          {translateMessage('Close')}
-        </DefaultButton>
-      </DialogFooter>
-    </>
+      <Dialog open={!isDialogHidden} onOpenChange={toggleIsDialogHidden}>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>{translateMessage('Upload collection')}</DialogTitle>
+            <DialogContent>
+              {translateMessage('You have an existing collection. Would you like to merge or replace it?')}
+            </DialogContent>
+            <DialogActions>
+              <Button appearance="primary" onClick={mergeWithExistingCollection}>
+                {translateMessage('Merge with existing')}
+              </Button>
+              <Button onClick={overwriteCollection}>
+                {translateMessage('Replace existing')}
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </CommonCollectionsPanel>
   )
 }