Initial dev for container copy

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -0,0 +1,31 @@
+import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import React from "react";
+import { StyleConstants } from "../../../Common/StyleConstants";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarUtil from "../../Menus/CommandBar/CommandBarUtil";
+import { ContainerCopyProps } from "../Types";
+import { getCommandBarButtons } from "./Utils";
+
+const backgroundColor = StyleConstants.BaseLight;
+const rootStyle = {
+    root: {
+        backgroundColor: backgroundColor,
+    },
+};
+
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ container }) => {
+    const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(container);
+    const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
+
+    return (
+        <div className="commandBarContainer">
+            <FluentCommandBar
+                ariaLabel="Use left and right arrow keys to navigate between commands"
+                styles={rootStyle}
+                items={controlButtons}
+            />
+        </div>
+    );
+}
+
+export default CopyJobCommandBar;

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -0,0 +1,56 @@
+import AddIcon from "../../../../images/Add.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import RefreshIcon from "../../../../images/refresh-cosmos.svg";
+import { configContext, Platform } from "../../../ConfigContext";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import * as Actions from "../Actions/CopyJobActions";
+import ContainerCopyMessages from "../ContainerCopyMessages";
+import { CopyJobCommandBarBtnType } from "../Types";
+
+function getCopyJobBtns(): CopyJobCommandBarBtnType[] {
+    const buttons: CopyJobCommandBarBtnType[] = [
+        {
+            key: "createCopyJob",
+            iconSrc: AddIcon,
+            label: ContainerCopyMessages.createCopyJobButtonLabel,
+            ariaLabel: ContainerCopyMessages.createCopyJobButtonAriaLabel,
+            onClick: Actions.openCreateCopyJobPanel,
+        },
+        {
+            key: "refresh",
+            iconSrc: RefreshIcon,
+            label: ContainerCopyMessages.refreshButtonLabel,
+            ariaLabel: ContainerCopyMessages.refreshButtonAriaLabel,
+            onClick: () => { },
+        },
+    ];
+    if (configContext.platform === Platform.Portal) {
+        buttons.push({
+            key: "feedback",
+            iconSrc: FeedbackIcon,
+            label: ContainerCopyMessages.feedbackButtonLabel,
+            ariaLabel: ContainerCopyMessages.feedbackButtonAriaLabel,
+            onClick: () => { },
+        });
+    }
+    return buttons;
+}
+
+function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProps {
+    return {
+        iconSrc: config.iconSrc,
+        iconAlt: config.label,
+        onCommandClick: config.onClick,
+        commandButtonLabel: undefined as string | undefined,
+        ariaLabel: config.ariaLabel,
+        tooltipText: config.label,
+        hasPopup: false,
+        disabled: config.disabled ?? false,
+    };
+}
+
+export function getCommandBarButtons(_container: Explorer): CommandButtonComponentProps[] {
+    return getCopyJobBtns().map(btnMapper);
+}
+