Use environment variables from DB in published record data (#70)

* Publish environment variables of deployment

* Handle review changes

* Use dummy gray image for projects

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

README.md

@@ -34,7 +34,7 @@
   yarn db:load:fixtures
   ```
 
-- Set `githubOauth.clientId` and `githubOauth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
+- Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
   - Client ID and secret will be available after creating Github OAuth app
     - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
     - In "Homepage URL", type `http://localhost:3000`

packages/backend/package.json

@@ -36,7 +36,7 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "registry:init": "DEBUG=snowball:* ts-node scripts/initialize-registry.ts",
+    "registry:init": "DEBUG=snowball:* ts-node ./test/initialize-registry.ts",
     "db:load:fixtures": "DEBUG=snowball:* ts-node ./test/initialize-db.ts",
     "db:delete": "DEBUG=snowball:* ts-node ./test/delete-db.ts"
   },

packages/backend/src/database.ts

@@ -196,14 +196,15 @@ export class Database {
     return projectMembers;
   }
 
-  async getEnvironmentVariablesByProjectId (projectId: string): Promise<EnvironmentVariable[]> {
+  async getEnvironmentVariablesByProjectId (projectId: string, filter?: FindOptionsWhere<EnvironmentVariable>): Promise<EnvironmentVariable[]> {
     const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
 
     const environmentVariables = await environmentVariableRepository.find({
       where: {
         project: {
           id: projectId
-        }
+        },
+        ...filter
       }
     });
 

packages/backend/src/registry.ts

@@ -92,7 +92,8 @@ export class Registry {
   async createApplicationDeploymentRequest (data: {
     appName: string,
     commitHash: string,
-    repository: string
+    repository: string,
+    environmentVariables: { [key: string]: string }
   }): Promise<{
     registryRecordId: string,
     registryRecordData: ApplicationDeploymentRequest
@@ -118,9 +119,7 @@ export class Registry {
 
       // https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
       config: JSON.stringify({
-        env: {
-          CERC_WEBAPP_DEBUG: `${applicationRecord.attributes.app_version}`
-        }
+        env: data.environmentVariables
       }),
       meta: JSON.stringify({
         note: `Added by Snowball @ ${DateTime.utc().toFormat('EEE LLL dd HH:mm:ss \'UTC\' yyyy')}`,

packages/backend/src/service.ts

@@ -231,6 +231,7 @@ export class Service {
       recordData.repoUrl = repoDetails.html_url;
     }
 
+    // TODO: Set environment variables for each deployment (environment variables can`t be set in application record)
     const { registryRecordId, registryRecordData } = await this.registry.createApplicationRecord({
       packageJSON,
       appType: data.project!.template!,
@@ -318,12 +319,22 @@ export class Service {
       }
     );
 
+    const environmentVariables = await this.db.getEnvironmentVariablesByProjectId(project.id, { environment: Environment.Production });
+
+    const environmentVariablesObj = environmentVariables.reduce((acc, env) => {
+      acc[env.key] = env.value;
+
+      return acc;
+    }, {} as { [key: string]: string });
+
     const { registryRecordId, registryRecordData } = await this.registry.createApplicationDeploymentRequest(
       {
         appName: newDeployment.registryRecordData.name!,
         commitHash: latestCommit.sha,
-        repository: repoDetails.html_url
+        repository: repoDetails.html_url,
+        environmentVariables: environmentVariablesObj
       });
+
     await this.db.updateProjectById(project.id, {
       registryRecordId,
       registryRecordData
@@ -351,7 +362,8 @@ export class Service {
       if (
         !(err instanceof RequestError &&
         err.status === 422 &&
-        (err.response?.data as any).errors.some((err: any) => err.message === GITHUB_UNIQUE_WEBHOOK_ERROR))) {
+        (err.response?.data as any).errors.some((err: any) => err.message === GITHUB_UNIQUE_WEBHOOK_ERROR))
+      ) {
         throw err;
       }
 

packages/frontend/src/components/projects/ProjectCard.tsx

@@ -21,7 +21,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow">
       <div className="flex gap-2 p-2 items-center">
-        <Avatar variant="square" src={project.icon} />
+        <Avatar variant="rounded" src={project.icon || '/gray.png'} />
         <div className="grow">
           <Link to={`projects/${project.id}`}>
             <Typography>{project.name}</Typography>

packages/frontend/src/components/projects/ProjectSearchBar.tsx

@@ -87,7 +87,7 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
                   {...getItemProps({ item, index })}
                 >
                   <ListItemPrefix>
-                    <Avatar src={item.icon} variant="square" />
+                    <Avatar src={item.icon || '/gray.png'} variant="rounded" />
                   </ListItemPrefix>
                   <div>
                     <Typography variant="h6" color="blue-gray">

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -46,7 +46,7 @@ const CreateWithTemplate = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
-        <Avatar variant="square" />
+        <Avatar variant="rounded" src="/gray.png" />
         <div className="grow px-2">{template?.name}</div>
         <div>
           <a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -107,7 +107,7 @@ const OverviewTabPanel = () => {
     <div className="grid grid-cols-5">
       <div className="col-span-3 p-2">
         <div className="flex items-center gap-2 p-2 ">
-          <Avatar src={project.icon} variant="square" />
+          <Avatar src={project.icon || '/gray.png'} variant="rounded" />
           <div className="grow">
             <Typography>{project.name}</Typography>
             <Typography variant="small" color="gray">