chore: Merge branch 'main' into issue-184

2026-01-11 16:20:06 +00:00 · 2022-06-18 00:51:48 +05:00
parent 9023cf33b5 6de91618ff
commit b446baa822
23 changed files with 1418 additions and 125 deletions
--- a/api/src/routes/api/drive.ts
+++ b/api/src/routes/api/drive.ts
@@ -7,9 +7,12 @@ import { multerSingle } from '../../middlewares/multer'
 import { DriveController } from '../../controllers/'
 import {
  deployValidation,
+  extractJSONFromZip,
+  extractName,
  fileBodyValidation,
  fileParamValidation,
-  folderParamValidation
+  folderParamValidation,
+  isZipFile
 } from '../../utils'

 const controller = new DriveController()
@@ -49,7 +52,24 @@ driveRouter.post(
  async (req, res) => {
    if (!req.file) return res.status(400).send('"file" is not present.')

-    const fileContent = await readFile(req.file.path)
+    let fileContent: string = ''
+
+    const { value: zipFile } = isZipFile(req.file)
+    if (zipFile) {
+      fileContent = await extractJSONFromZip(zipFile)
+      const fileInZip = extractName(zipFile.originalname)
+
+      if (!fileContent) {
+        deleteFile(req.file.path)
+        return res
+          .status(400)
+          .send(
+            `No content present in ${fileInZip} of compressed file ${zipFile.originalname}`
+          )
+      }
+    } else {
+      fileContent = await readFile(req.file.path)
+    }

    let jsonContent
    try {
--- a/api/src/routes/api/group.ts
+++ b/api/src/routes/api/group.ts
@@ -1,7 +1,7 @@
 import express from 'express'
 import { GroupController } from '../../controllers/'
 import { authenticateAccessToken, verifyAdmin } from '../../middlewares'
-import { registerGroupValidation } from '../../utils'
+import { getGroupValidation, registerGroupValidation } from '../../utils'

 const groupRouter = express.Router()

@@ -18,7 +18,11 @@ groupRouter.post(
      const response = await controller.createGroup(body)
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      const statusCode = err.code
+
+      delete err.code
+
+      res.status(statusCode).send(err.message)
    }
  }
 )
@@ -29,7 +33,11 @@ groupRouter.get('/', authenticateAccessToken, async (req, res) => {
    const response = await controller.getAllGroups()
    res.send(response)
  } catch (err: any) {
-    res.status(403).send(err.toString())
+    const statusCode = err.code
+
+    delete err.code
+
+    res.status(statusCode).send(err.message)
  }
 })

@@ -41,10 +49,37 @@ groupRouter.get('/:groupId', authenticateAccessToken, async (req, res) => {
    const response = await controller.getGroup(parseInt(groupId))
    res.send(response)
  } catch (err: any) {
-    res.status(403).send(err.toString())
+    const statusCode = err.code
+
+    delete err.code
+
+    res.status(statusCode).send(err.message)
  }
 })

+groupRouter.get(
+  '/by/groupname/:name',
+  authenticateAccessToken,
+  async (req, res) => {
+    const { error, value: params } = getGroupValidation(req.params)
+    if (error) return res.status(400).send(error.details[0].message)
+
+    const { name } = params
+
+    const controller = new GroupController()
+    try {
+      const response = await controller.getGroupByGroupName(name)
+      res.send(response)
+    } catch (err: any) {
+      const statusCode = err.code
+
+      delete err.code
+
+      res.status(statusCode).send(err.message)
+    }
+  }
+)
+
 groupRouter.post(
  '/:groupId/:userId',
  authenticateAccessToken,
@@ -60,7 +95,11 @@ groupRouter.post(
      )
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      const statusCode = err.code
+
+      delete err.code
+
+      res.status(statusCode).send(err.message)
    }
  }
 )
@@ -80,7 +119,11 @@ groupRouter.delete(
      )
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      const statusCode = err.code
+
+      delete err.code
+
+      res.status(statusCode).send(err.message)
    }
  }
 )
@@ -97,7 +140,11 @@ groupRouter.delete(
      await controller.deleteGroup(parseInt(groupId))
      res.status(200).send('Group Deleted!')
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      const statusCode = err.code
+
+      delete err.code
+
+      res.status(statusCode).send(err.message)
    }
  }
 )
--- a/api/src/routes/api/spec/drive.spec.ts
+++ b/api/src/routes/api/spec/drive.spec.ts
@@ -3,6 +3,7 @@ import { Express } from 'express'
 import mongoose, { Mongoose } from 'mongoose'
 import { MongoMemoryServer } from 'mongodb-memory-server'
 import request from 'supertest'
+import AdmZip from 'adm-zip'

 import {
  folderExists,
@@ -72,11 +73,52 @@ describe('drive', () => {
  })

  describe('deploy', () => {
-    const shouldFailAssertion = async (payload: any) => {
-      const res = await request(app)
-        .post('/SASjsApi/drive/deploy')
-        .auth(accessToken, { type: 'bearer' })
-        .send({ appLoc: '/Public', fileTree: payload })
+    const makeRequest = async (payload: any, type: string = 'payload') => {
+      const requestUrl =
+        type === 'payload'
+          ? '/SASjsApi/drive/deploy'
+          : '/SASjsApi/drive/deploy/upload'
+
+      if (type === 'payload') {
+        return await request(app)
+          .post(requestUrl)
+          .auth(accessToken, { type: 'bearer' })
+          .send({ appLoc: '/Public', fileTree: payload })
+      }
+      if (type === 'file') {
+        const deployContents = JSON.stringify({
+          appLoc: '/Public',
+          fileTree: payload
+        })
+        return await request(app)
+          .post(requestUrl)
+          .auth(accessToken, { type: 'bearer' })
+          .attach('file', Buffer.from(deployContents), 'deploy.json')
+      } else {
+        const deployContents = JSON.stringify({
+          appLoc: '/Public',
+          fileTree: payload
+        })
+        const zip = new AdmZip()
+        // add file directly
+        zip.addFile(
+          'deploy.json',
+          Buffer.from(deployContents, 'utf8'),
+          'entry comment goes here'
+        )
+
+        return await request(app)
+          .post(requestUrl)
+          .auth(accessToken, { type: 'bearer' })
+          .attach('file', zip.toBuffer(), 'deploy.json.zip')
+      }
+    }
+
+    const shouldFailAssertion = async (
+      payload: any,
+      type: string = 'payload'
+    ) => {
+      const res = await makeRequest(payload, type)

      expect(res.statusCode).toEqual(400)

@@ -176,6 +218,240 @@ describe('drive', () => {

      await deleteFolder(path.join(getFilesFolder(), 'public'))
    })
+
+    describe('upload', () => {
+      it('should respond with payload example if valid JSON file was not provided', async () => {
+        await shouldFailAssertion(null, 'file')
+        await shouldFailAssertion(undefined, 'file')
+        await shouldFailAssertion('data', 'file')
+        await shouldFailAssertion({}, 'file')
+        await shouldFailAssertion(
+          {
+            userId: 1,
+            title: 'test is cool'
+          },
+          'file'
+        )
+        await shouldFailAssertion(
+          {
+            membersWRONG: []
+          },
+          'file'
+        )
+        await shouldFailAssertion(
+          {
+            members: {}
+          },
+          'file'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                nameWRONG: 'jobs',
+                type: 'folder',
+                members: []
+              }
+            ]
+          },
+          'file'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                name: 'jobs',
+                type: 'WRONG',
+                members: []
+              }
+            ]
+          },
+          'file'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                name: 'jobs',
+                type: 'folder',
+                members: [
+                  {
+                    name: 'extract',
+                    type: 'folder',
+                    members: [
+                      {
+                        name: 'makedata1',
+                        type: 'service',
+                        codeWRONG: '%put Hello World!;'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          'file'
+        )
+      })
+
+      it('should successfully deploy if valid JSON file was provided', async () => {
+        const deployContents = JSON.stringify({
+          appLoc: '/public',
+          fileTree: getTreeExample()
+        })
+        const res = await request(app)
+          .post('/SASjsApi/drive/deploy/upload')
+          .auth(accessToken, { type: 'bearer' })
+          .attach('file', Buffer.from(deployContents), 'deploy.json')
+
+        expect(res.statusCode).toEqual(200)
+        expect(res.text).toEqual(
+          '{"status":"success","message":"Files deployed successfully to @sasjs/server."}'
+        )
+        await expect(folderExists(getFilesFolder())).resolves.toEqual(true)
+
+        const testJobFolder = path.join(
+          getFilesFolder(),
+          'public',
+          'jobs',
+          'extract'
+        )
+        await expect(folderExists(testJobFolder)).resolves.toEqual(true)
+
+        const exampleService = getExampleService()
+        const testJobFile =
+          path.join(testJobFolder, exampleService.name) + '.sas'
+
+        await expect(fileExists(testJobFile)).resolves.toEqual(true)
+
+        await expect(readFile(testJobFile)).resolves.toEqual(
+          exampleService.code
+        )
+
+        await deleteFolder(path.join(getFilesFolder(), 'public'))
+      })
+    })
+
+    describe('upload - zipped', () => {
+      it('should respond with payload example if valid Zipped file was not provided', async () => {
+        await shouldFailAssertion(null, 'zip')
+        await shouldFailAssertion(undefined, 'zip')
+        await shouldFailAssertion('data', 'zip')
+        await shouldFailAssertion({}, 'zip')
+        await shouldFailAssertion(
+          {
+            userId: 1,
+            title: 'test is cool'
+          },
+          'zip'
+        )
+        await shouldFailAssertion(
+          {
+            membersWRONG: []
+          },
+          'zip'
+        )
+        await shouldFailAssertion(
+          {
+            members: {}
+          },
+          'zip'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                nameWRONG: 'jobs',
+                type: 'folder',
+                members: []
+              }
+            ]
+          },
+          'zip'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                name: 'jobs',
+                type: 'WRONG',
+                members: []
+              }
+            ]
+          },
+          'zip'
+        )
+        await shouldFailAssertion(
+          {
+            members: [
+              {
+                name: 'jobs',
+                type: 'folder',
+                members: [
+                  {
+                    name: 'extract',
+                    type: 'folder',
+                    members: [
+                      {
+                        name: 'makedata1',
+                        type: 'service',
+                        codeWRONG: '%put Hello World!;'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          'zip'
+        )
+      })
+
+      it('should successfully deploy if valid Zipped file was provided', async () => {
+        const deployContents = JSON.stringify({
+          appLoc: '/public',
+          fileTree: getTreeExample()
+        })
+
+        const zip = new AdmZip()
+        // add file directly
+        zip.addFile(
+          'deploy.json',
+          Buffer.from(deployContents, 'utf8'),
+          'entry comment goes here'
+        )
+        const res = await request(app)
+          .post('/SASjsApi/drive/deploy/upload')
+          .auth(accessToken, { type: 'bearer' })
+          .attach('file', zip.toBuffer(), 'deploy.json.zip')
+
+        expect(res.statusCode).toEqual(200)
+        expect(res.text).toEqual(
+          '{"status":"success","message":"Files deployed successfully to @sasjs/server."}'
+        )
+        await expect(folderExists(getFilesFolder())).resolves.toEqual(true)
+
+        const testJobFolder = path.join(
+          getFilesFolder(),
+          'public',
+          'jobs',
+          'extract'
+        )
+        await expect(folderExists(testJobFolder)).resolves.toEqual(true)
+
+        const exampleService = getExampleService()
+        const testJobFile =
+          path.join(testJobFolder, exampleService.name) + '.sas'
+
+        await expect(fileExists(testJobFile)).resolves.toEqual(true)
+
+        await expect(readFile(testJobFile)).resolves.toEqual(
+          exampleService.code
+        )
+
+        await deleteFolder(path.join(getFilesFolder(), 'public'))
+      })
+    })
  })

  describe('folder', () => {
--- a/api/src/routes/api/spec/group.spec.ts
+++ b/api/src/routes/api/spec/group.spec.ts
@@ -23,7 +23,7 @@ const user = {
 }

 const group = {
-  name: 'DCGroup1',
+  name: 'dcgroup1',
  description: 'DC group for testing purposes.'
 }

@@ -70,6 +70,32 @@ describe('group', () => {
      expect(res.body.users).toEqual([])
    })

+    it('should respond with Conflict when group already exists with same name', async () => {
+      await groupController.createGroup(group)
+
+      const res = await request(app)
+        .post('/SASjsApi/group')
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send(group)
+        .expect(409)
+
+      expect(res.text).toEqual('Group name already exists.')
+      expect(res.body).toEqual({})
+    })
+
+    it('should respond with Bad Request when group name does not match the group name schema', async () => {
+      const res = await request(app)
+        .post('/SASjsApi/group')
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send({ ...group, name: 'Wrong Group Name' })
+        .expect(400)
+
+      expect(res.text).toEqual(
+        '"name" must only contain alpha-numeric characters'
+      )
+      expect(res.body).toEqual({})
+    })
+
    it('should respond with Unauthorized if access token is not present', async () => {
      const res = await request(app).post('/SASjsApi/group').send().expect(401)

@@ -125,14 +151,51 @@ describe('group', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if groupId is incorrect', async () => {
+    it(`should delete group's reference from users' groups array`, async () => {
+      const dbGroup = await groupController.createGroup(group)
+      const dbUser1 = await userController.createUser({
+        ...user,
+        username: 'deletegroup1'
+      })
+      const dbUser2 = await userController.createUser({
+        ...user,
+        username: 'deletegroup2'
+      })
+
+      await groupController.addUserToGroup(dbGroup.groupId, dbUser1.id)
+      await groupController.addUserToGroup(dbGroup.groupId, dbUser2.id)
+
+      await request(app)
+        .delete(`/SASjsApi/group/${dbGroup.groupId}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      const res1 = await request(app)
+        .get(`/SASjsApi/user/${dbUser1.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      expect(res1.body.groups).toEqual([])
+
+      const res2 = await request(app)
+        .get(`/SASjsApi/user/${dbUser2.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      expect(res2.body.groups).toEqual([])
+    })
+
+    it('should respond with Not Found if groupId is incorrect', async () => {
      const res = await request(app)
        .delete(`/SASjsApi/group/1234`)
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: No Group deleted!')
+      expect(res.text).toEqual('Group not found.')
      expect(res.body).toEqual({})
    })

@@ -216,16 +279,76 @@ describe('group', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if groupId is incorrect', async () => {
+    it('should respond with Not Found if groupId is incorrect', async () => {
      const res = await request(app)
        .get('/SASjsApi/group/1234')
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: Group not found.')
+      expect(res.text).toEqual('Group not found.')
      expect(res.body).toEqual({})
    })
+
+    describe('by group name', () => {
+      it('should respond with group', async () => {
+        const { name } = await groupController.createGroup(group)
+
+        const res = await request(app)
+          .get(`/SASjsApi/group/by/groupname/${name}`)
+          .auth(adminAccessToken, { type: 'bearer' })
+          .send()
+          .expect(200)
+
+        expect(res.body.groupId).toBeTruthy()
+        expect(res.body.name).toEqual(group.name)
+        expect(res.body.description).toEqual(group.description)
+        expect(res.body.isActive).toEqual(true)
+        expect(res.body.users).toEqual([])
+      })
+
+      it('should respond with group when access token is not of an admin account', async () => {
+        const accessToken = await generateSaveTokenAndCreateUser({
+          ...user,
+          username: 'getbyname' + user.username
+        })
+
+        const { name } = await groupController.createGroup(group)
+
+        const res = await request(app)
+          .get(`/SASjsApi/group/by/groupname/${name}`)
+          .auth(accessToken, { type: 'bearer' })
+          .send()
+          .expect(200)
+
+        expect(res.body.groupId).toBeTruthy()
+        expect(res.body.name).toEqual(group.name)
+        expect(res.body.description).toEqual(group.description)
+        expect(res.body.isActive).toEqual(true)
+        expect(res.body.users).toEqual([])
+      })
+
+      it('should respond with Unauthorized if access token is not present', async () => {
+        const res = await request(app)
+          .get('/SASjsApi/group/by/groupname/dcgroup')
+          .send()
+          .expect(401)
+
+        expect(res.text).toEqual('Unauthorized')
+        expect(res.body).toEqual({})
+      })
+
+      it('should respond with Not Found if groupname is incorrect', async () => {
+        const res = await request(app)
+          .get('/SASjsApi/group/by/groupname/randomCharacters')
+          .auth(adminAccessToken, { type: 'bearer' })
+          .send()
+          .expect(404)
+
+        expect(res.text).toEqual('Group not found.')
+        expect(res.body).toEqual({})
+      })
+    })
  })

  describe('getAll', () => {
@@ -245,8 +368,8 @@ describe('group', () => {
      expect(res.body).toEqual([
        {
          groupId: expect.anything(),
-          name: 'DCGroup1',
-          description: 'DC group for testing purposes.'
+          name: group.name,
+          description: group.description
        }
      ])
    })
@@ -267,8 +390,8 @@ describe('group', () => {
      expect(res.body).toEqual([
        {
          groupId: expect.anything(),
-          name: 'DCGroup1',
-          description: 'DC group for testing purposes.'
+          name: group.name,
+          description: group.description
        }
      ])
    })
@@ -309,6 +432,34 @@ describe('group', () => {
      ])
    })

+    it(`should add group to user's groups array`, async () => {
+      const dbGroup = await groupController.createGroup(group)
+      const dbUser = await userController.createUser({
+        ...user,
+        username: 'addUserToGroup'
+      })
+
+      await request(app)
+        .post(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      const res = await request(app)
+        .get(`/SASjsApi/user/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      expect(res.body.groups).toEqual([
+        {
+          groupId: expect.anything(),
+          name: group.name,
+          description: group.description
+        }
+      ])
+    })
+
    it('should respond with group without duplicating user', async () => {
      const dbGroup = await groupController.createGroup(group)
      const dbUser = await userController.createUser({
@@ -362,26 +513,26 @@ describe('group', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if groupId is incorrect', async () => {
+    it('should respond with Not Found if groupId is incorrect', async () => {
      const res = await request(app)
        .post('/SASjsApi/group/123/123')
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: Group not found.')
+      expect(res.text).toEqual('Group not found.')
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if userId is incorrect', async () => {
+    it('should respond with Not Found if userId is incorrect', async () => {
      const dbGroup = await groupController.createGroup(group)
      const res = await request(app)
        .post(`/SASjsApi/group/${dbGroup.groupId}/123`)
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: User not found.')
+      expect(res.text).toEqual('User not found.')
      expect(res.body).toEqual({})
    })
  })
@@ -412,6 +563,29 @@ describe('group', () => {
      expect(res.body.users).toEqual([])
    })

+    it(`should remove group from user's groups array`, async () => {
+      const dbGroup = await groupController.createGroup(group)
+      const dbUser = await userController.createUser({
+        ...user,
+        username: 'removeGroupFromUser'
+      })
+      await groupController.addUserToGroup(dbGroup.groupId, dbUser.id)
+
+      await request(app)
+        .delete(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      const res = await request(app)
+        .get(`/SASjsApi/user/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(200)
+
+      expect(res.body.groups).toEqual([])
+    })
+
    it('should respond with Unauthorized if access token is not present', async () => {
      const res = await request(app)
        .delete('/SASjsApi/group/123/123')
@@ -438,26 +612,26 @@ describe('group', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if groupId is incorrect', async () => {
+    it('should respond with Not Found if groupId is incorrect', async () => {
      const res = await request(app)
        .delete('/SASjsApi/group/123/123')
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: Group not found.')
+      expect(res.text).toEqual('Group not found.')
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if userId is incorrect', async () => {
+    it('should respond with Not Found if userId is incorrect', async () => {
      const dbGroup = await groupController.createGroup(group)
      const res = await request(app)
        .delete(`/SASjsApi/group/${dbGroup.groupId}/123`)
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: User not found.')
+      expect(res.text).toEqual('User not found.')
      expect(res.body).toEqual({})
    })
  })
--- a/api/src/routes/appStream/appStreamHtml.ts
+++ b/api/src/routes/appStream/appStreamHtml.ts
@@ -23,13 +23,21 @@ export const appStreamHtml = (appStreamConfig: AppStreamConfig) => `
    ${style}
  </head>
  <body>
-    <h1>App Stream</h1>
+    <header>
+      <a href="/"><img src="/logo.png" alt="logo" class="logo"></a>
+      <h1>App Stream</h1>
+    </header>
    <div class="app-container">
-      ${Object.entries(appStreamConfig)
-        .map(([streamServiceName, entry]) =>
-          singleAppStreamHtml(streamServiceName, entry.appLoc, entry.streamLogo)
-        )
-        .join('')}
+        ${Object.entries(appStreamConfig)
+          .map(([streamServiceName, entry]) =>
+            singleAppStreamHtml(
+              streamServiceName,
+              entry.appLoc,
+              entry.streamLogo
+            )
+          )
+          .join('')}
+
        <a class="app" title="Upload build.json">
          <input id="fileId" type="file" hidden />
          <button id="uploadButton" style="margin-bottom: 5px; cursor: pointer">
--- a/api/src/routes/appStream/style.ts
+++ b/api/src/routes/appStream/style.ts
@@ -5,18 +5,71 @@ export const style = `<style>
 .app-container {
  display: flex;
  flex-wrap: wrap;
-  align-items: baseline;
+  align-items: center;
  justify-content: center;
+  padding-top: 50px;
 }
 .app-container .app {
  width: 150px;
+  height: 180px;
  margin: 10px;
  overflow: hidden;
  text-align: center;
+
+  text-decoration: none;
+  color: black;
+
+  background: #efefef;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid #d7d7d7;
 }
 .app-container .app img{
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
 }
+#uploadButton {
+  border: 0
+}
+
+#uploadButton:focus {
+  outline: 0
+}
+
+#uploadMessage {
+  position: relative;
+  bottom: -5px;
+}
+
+header {
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px, rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  position: fixed;
+  top: 0px;
+  left: auto;
+  right: 0px;
+  background-color: rgb(0, 0, 0);
+  color: rgb(255, 255, 255);
+  z-index: 1201;
+}
+
+header h1 {
+  margin: 13px;
+  font-size: 20px;
+}
+
+header a {
+  align-self: center;
+}
+
+header .logo {
+  width: 35px;
+  margin-left: 10px;
+  align-self: center;
+}
 </style>`