some minor chnages to prepare for chnaging actions dropdown to buttons

spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx

@@ -8,6 +8,10 @@ type OwnProps = {
   onConfirmation: (..._args: any[]) => any;
   title?: string;
   confirmButtonLabel?: string;
+  kind?: string;
+  renderIcon?: boolean | null;
+  iconDescription?: string | null;
+  hasIconOnly?: boolean;
 };
 
 export default function ButtonWithConfirmation({
@@ -16,6 +20,10 @@ export default function ButtonWithConfirmation({
   onConfirmation,
   title = 'Are you sure?',
   confirmButtonLabel = 'OK',
+  kind = 'danger',
+  renderIcon = null,
+  iconDescription = null,
+  hasIconOnly = false,
 }: OwnProps) {
   const [showConfirmationPrompt, setShowConfirmationPrompt] = useState(false);
 
@@ -49,7 +57,13 @@ export default function ButtonWithConfirmation({
 
   return (
     <>
-      <Button onClick={handleShowConfirmationPrompt} kind="danger">
+      <Button
+        onClick={handleShowConfirmationPrompt}
+        kind={kind}
+        renderIcon={renderIcon}
+        iconDescription={iconDescription}
+        hasIconOnly={hasIconOnly}
+      >
         {buttonLabel}
       </Button>
       {confirmationDialog()}

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -211,7 +211,7 @@ export default function ProcessModelShow() {
 
         let actionDropDirection = 'bottom';
         if (index + 1 === processModel.files.length) {
-          actionDropDirection = 'top';
+          actionDropDirection = 'bottom';
         }
 
         // The dropdown will get covered up if it extends passed the table container.
@@ -401,6 +401,13 @@ export default function ProcessModelShow() {
             >
               Upload File
             </Button>
+            <Button
+              renderIcon={Add}
+              href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files?file_type=bpmn`}
+              size="sm"
+            >
+              New BPMN File
+            </Button>
             <Button
               renderIcon={Add}
               href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files?file_type=dmn`}
@@ -433,6 +440,7 @@ export default function ProcessModelShow() {
   if (processModel) {
     return (
       <>
+        {fileUploadModal()}
         <ProcessBreadcrumb
           processGroupId={processModel.process_group_id}
           processModelId={processModel.id}
@@ -450,9 +458,9 @@ export default function ProcessModelShow() {
             Edit process model
           </Button>
         </Stack>
-        {fileUploadModal()}
-        {processInstanceResultTag()}
         <br />
+        <br />
+        {processInstanceResultTag()}
         {processModelButtons()}
         <br />
         <br />