Feature/create app

src/tapis-api/apps/createApp.ts

@@ -0,0 +1,20 @@
+import { Apps } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const createApp = (
+  createAppVersionRequest: Apps.CreateAppVersionRequest,
+  basepath: string,
+  jwt: string
+) => {
+  const api: Apps.ApplicationsApi = apiGenerator<Apps.ApplicationsApi>(
+    Apps,
+    Apps.ApplicationsApi,
+    basepath,
+    jwt
+  );
+  return errorDecoder<Apps.RespBasic>(() =>
+    api.createAppVersion(createAppVersionRequest)
+  );
+};
+
+export default createApp;

src/tapis-api/apps/index.ts

@@ -1,2 +1,3 @@
 export { default as list } from './list';
 export { default as detail } from './detail';
+export { default as createApp } from './createApp';

src/tapis-app/Apps/_Layout/Layout.tsx

@@ -6,13 +6,15 @@ import {
   LayoutHeader,
   LayoutNavWrapper,
 } from 'tapis-ui/_common';
+import AppsToolbar from '../_components/AppsToolbar';
 
 import { Router } from '../_Router';
 
 const Layout: React.FC = () => {
   const header = (
     <LayoutHeader>
       <div>Apps</div>
+      <AppsToolbar />
     </LayoutHeader>
   );
 

src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.module.scss

@@ -0,0 +1,20 @@
+.toolbar-wrapper {
+  padding: 0;
+  margin: 0;
+  margin-top: 0.5em;
+  display: flex !important;
+}
+
+.toolbar-btn {
+  height: 2rem;
+  align-items: center;
+  margin-left: 0.5em;
+  font-size: 0.7em !important;
+  border-radius: 0 !important;
+  background-color: #f4f4f4 !important;
+  color: #333333 !important;
+}
+
+.toolbar-btn:disabled {
+  color: #999999 !important;
+}

src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Button } from 'reactstrap';
+import { Icon } from 'tapis-ui/_common';
+import styles from './AppsToolbar.module.scss';
+import { useLocation } from 'react-router-dom';
+import CreateAppModal from './CreateAppModal';
+
+type ToolbarButtonProps = {
+  text: string;
+  icon: string;
+  onClick: () => void;
+  disabled: boolean;
+};
+
+export type ToolbarModalProps = {
+  toggle: () => void;
+};
+
+export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+  text,
+  icon,
+  onClick,
+  disabled = true,
+  ...rest
+}) => {
+  return (
+    <div>
+      <Button
+        disabled={disabled}
+        onClick={onClick}
+        className={styles['toolbar-btn']}
+        {...rest}
+      >
+        <Icon name={icon}></Icon>
+        <span> {text}</span>
+      </Button>
+    </div>
+  );
+};
+
+const AppsToolbar: React.FC = () => {
+  const [modal, setModal] = useState<string | undefined>(undefined);
+  const { pathname } = useLocation();
+
+  const toggle = () => {
+    setModal(undefined);
+  };
+  return (
+    <div id="file-operation-toolbar">
+      {pathname && (
+        <div className={styles['toolbar-wrapper']}>
+          <ToolbarButton
+            text="Create a New App"
+            icon="add"
+            disabled={false}
+            onClick={() => setModal('createApp')}
+            aria-label="createApp"
+          />
+
+          {modal === 'createApp' && <CreateAppModal toggle={toggle} />}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppsToolbar;

src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.module.scss

@@ -0,0 +1,24 @@
+.modal-settings {
+  max-height: 38rem;
+  overflow-y: scroll;
+}
+
+.item {
+  border: 1px dotted lightgray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 1em;
+}
+
+.array {
+  border: 1px solid gray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.hidden {
+  display: none;
+}
+
+.section-divider {
+  margin-bottom: 100px;
+}