This repository has been archived by the owner on Sep 16, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: only create apps that are needed by a developer (#553)
* init * feat(ui): adds loading button on right * feat(ui): created AddIntegration Modal UI * feat(ui) show all the created apps * feat: created createApp endpoint and handled already created cards with ui * fix: creation endpoint and made ui use float units * feat: remove unused imports * fix(ui): border red colour * fix: remove asana from currently available apps * fix add asana incase to avoid failure on local data * fix: navbar and selector on left * feat: onSelect Creation * fix: create button on open to not show * fix: cursor pointers * fix(ui): naming conventions
- Loading branch information
1 parent
eb7d02b
commit 3d33240
Showing
12 changed files
with
462 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { TP_ID } from '@prisma/client'; | ||
| import prisma from '../prisma/client'; | ||
|
|
||
| class AppService { | ||
| async createRevertAppForAccount({ | ||
| accountId, | ||
| tpId, | ||
| environment, | ||
| }: { | ||
| accountId: string; | ||
| tpId: TP_ID; | ||
| environment: string; | ||
| }): Promise<any> { | ||
| const id = `${tpId}_${accountId}_${environment}`; | ||
| const environmentId = `${accountId}_${environment}`; | ||
| try { | ||
| const createdApp = await prisma.apps.create({ | ||
| data: { | ||
| id, | ||
| tp_id: tpId, | ||
| scope: [], | ||
| is_revert_app: true, | ||
| environmentId, | ||
| }, | ||
| }); | ||
| return createdApp; | ||
| } catch (error: any) { | ||
| return { error: 'Something went wrong while creating app' }; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default new AppService(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
packages/client/src/features/integration/AddIntegration.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { Box } from '@mui/material'; | ||
| import Modal from '@mui/material/Modal'; | ||
| import React, { useState } from 'react'; | ||
| import { appsInfo } from './enums/metadata'; | ||
| import { LoadingButton } from '@mui/lab'; | ||
|
|
||
| function AddIntegration({ | ||
| values, | ||
| }: { | ||
| values: { | ||
| init: boolean; | ||
| setInit: React.Dispatch<React.SetStateAction<boolean>>; | ||
| handleCreation: (id: string) => Promise<void>; | ||
| apps: any; | ||
| }; | ||
| }) { | ||
| const [selected, setSelected] = useState<string>(''); | ||
| const { init, setInit, handleCreation, apps } = values; | ||
| const appsId = apps.map((app) => app.tp_id); | ||
| return ( | ||
| <Modal | ||
| open={init} | ||
| onClose={() => { | ||
| setInit(false); | ||
| setSelected(''); | ||
| }} | ||
| aria-labelledby="modal-modal-title" | ||
| aria-describedby="modal-modal-description" | ||
| sx={{ backgroundColor: '#293347', width: '70vw', margin: '10vh 20vw 10vh 20vw', maxHeight: '74vh' }} | ||
| className="rounded-xl overflow-hidden" | ||
| > | ||
| <> | ||
| <div className="overflow-hidden"> | ||
| <Box component="div" sx={{ width: '70vw', padding: '2rem 3rem 0rem 3rem', marginBottom: '1.6rem' }}> | ||
| <h1 className="text-3xl font-bold text-[#fff]">Create App</h1> | ||
| <span className="text-[#b1b8ba]"> | ||
| Select and click add to configure a new app for an integration | ||
| </span> | ||
| </Box> | ||
| <div className="pt-4 h-[36rem] overflow-scroll"> | ||
| <div className="grid grid-cols-4 gap-8 justify-center content-center mx-8 "> | ||
| {Object.keys(appsInfo).map((app, index) => { | ||
| const isAppExist = appsId.includes(app); | ||
| return ( | ||
| <Box | ||
| key={index} | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| pointerEvents: isAppExist ? 'none' : 'initial', | ||
| cursor: isAppExist ? 'not-allowed' : 'pointer', | ||
| backgroundColor: isAppExist && '#181d28', | ||
| }} | ||
| > | ||
| <div | ||
| className="flex w-full justify-around items-center px-8 py-8 rounded-lg" | ||
| style={{ | ||
| boxShadow: | ||
| app === selected | ||
| ? '0 0 0 3px #fff' | ||
| : isAppExist | ||
| ? '0 0 0 1px #ffa8a8' | ||
| : '0 0 0 1px #ced4da', | ||
| }} | ||
| onClick={() => setSelected(app)} | ||
| > | ||
| <img | ||
| width={100} | ||
| style={{ | ||
| height: 40, | ||
| objectFit: 'scale-down', | ||
| }} | ||
| alt={`${appsInfo[app].name} logo`} | ||
| src={appsInfo[app].logo} | ||
| /> | ||
| </div> | ||
| </Box> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-end mr-8"> | ||
| <LoadingButton | ||
| variant="contained" | ||
| style={{ | ||
| background: '#293347', | ||
| padding: '0.6rem 1.2rem', | ||
| }} | ||
| disabled={selected === ''} | ||
| onClick={() => { | ||
| handleCreation(selected); | ||
| }} | ||
| > | ||
| Add | ||
| </LoadingButton> | ||
| </div> | ||
| </div> | ||
| </> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| export default AddIntegration; |
85 changes: 85 additions & 0 deletions
85
packages/client/src/features/integration/CreatedIntegration.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React from 'react'; | ||
| import { Box, IconButton } from '@mui/material'; | ||
| import SettingsIcon from '@mui/icons-material/Settings'; | ||
| import { appsInfo } from './enums/metadata'; | ||
|
|
||
| function CreatedIntegration({ | ||
| values, | ||
| }: { | ||
| values: { | ||
| apps: any; | ||
| handleOpen: (appId: string) => void; | ||
| }; | ||
| }) { | ||
| const { handleOpen, apps } = values; | ||
|
|
||
| if (!apps.length) { | ||
| return ( | ||
| <div className="flex flex-col justify-center items-center h-[77vh] w-[80vw]"> | ||
| <p>No apps have been created; create and configure your first app for an integration</p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="grid grid-cols-4 gap-8"> | ||
| {apps.map((app, index) => { | ||
| const type = appsInfo?.[app.tp_id]; | ||
| return ( | ||
| <Box | ||
| key={index} | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| padding: '2rem 0rem', | ||
| maxWidth: '22rem', | ||
| maxHeight: '12.5rem', | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| padding: 30, | ||
| border: '1px #3E3E3E solid', | ||
| borderRadius: 10, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'flex-start', | ||
| height: 200, | ||
| justifyContent: 'flex-end', | ||
| position: 'relative', | ||
| }} | ||
| > | ||
| <img | ||
| width={100} | ||
| style={{ | ||
| maxHeight: 40, | ||
| objectFit: 'scale-down', | ||
| objectPosition: 'left', | ||
| }} | ||
| alt={`${type?.name} logo`} | ||
| src={type?.logo} | ||
| /> | ||
| <p className="font-bold mt-4">{type?.name}</p> | ||
| <span className="text-[#b1b8ba]">{type?.description}</span> | ||
| <IconButton | ||
| onClick={() => handleOpen(app.tp_id)} | ||
| style={{ | ||
| color: '#94a3b8', | ||
| fontSize: 12, | ||
| position: 'absolute', | ||
| top: 10, | ||
| right: 10, | ||
| }} | ||
| > | ||
| <SettingsIcon /> | ||
| </IconButton> | ||
| </div> | ||
| </Box> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default CreatedIntegration; |
Oops, something went wrong.