Set record data with repo commit hash and package.json content (#65)

* Get latest commit hash from repo when adding project

* Update UI/UX

* Fill registry record with data from package.json

* Add package json type

* Correct record data based on laconic console

* Update README

---------

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

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

@@ -7,6 +7,7 @@ import {
   MenuList,
   MenuItem,
   Typography,
+  Avatar,
 } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../utils/time';
@@ -20,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">
-        <div>{project.icon}</div>
+        <Avatar variant="square" src={project.icon} />
         <div className="grow">
           <Link to={`projects/${project.id}`}>
             <Typography>{project.name}</Typography>
@@ -42,10 +43,10 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
       </div>
       <div className="border-t-2 border-solid p-4 bg-gray-50">
         <Typography variant="small" color="gray">
-          {project.latestCommit.message}
+          ^ {project.latestCommit.message}
         </Typography>
         <Typography variant="small" color="gray">
-          {relativeTimeISO(project.latestCommit.createdAt)} on{' '}
+          {relativeTimeISO(project.latestCommit.createdAt)} on ^&nbsp;
           {project.latestCommit.branch}
         </Typography>
       </div>

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

@@ -9,6 +9,7 @@ import {
   ListItemPrefix,
   Card,
   Typography,
+  Avatar,
 } from '@material-tailwind/react';
 
 import SearchBar from '../SearchBar';
@@ -86,7 +87,7 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
                   {...getItemProps({ item, index })}
                 >
                   <ListItemPrefix>
-                    <i>^</i>
+                    <Avatar src={item.icon} variant="square" />
                   </ListItemPrefix>
                   <div>
                     <Typography variant="h6" color="blue-gray">

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -32,8 +32,9 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
       <div>
         <p>Connect to your git account</p>
         <p>
-          Once connected, you can create projects by importing repositories
-          under the account
+          Once connected, you can import a repository from your
+          <br />
+          account or start with one of our templates.
         </p>
       </div>
       <div className="mt-2 flex">

packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx

@@ -22,12 +22,12 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
       <DialogBody>
         In order to assign a domain to your production deployments, configure it
         in the{' '}
-        {/* TODO: Navigate to settings tab panel after clicking on project settings */}
-        <Link to="" className="text-light-blue-800 inline">
+        <Link to="../settings/domains" className="text-light-blue-800 inline">
           project settings{' '}
         </Link>
         (recommended). If you want to assign to this specific deployment,
         however, you can do so using our command-line interface:
+        {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
         <CopyBlock
           text="snowball alias <deployment> <domain>"
           language=""

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -18,6 +18,7 @@ import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import AssignDomainDialog from './AssignDomainDialog';
 import { DeploymentDetails } from '../../../../types/project';
 import { useGQLClient } from '../../../../context/GQLClientContext';
+import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 
 interface DeployDetailsCardProps {
   deployment: DeploymentDetails;
@@ -101,12 +102,13 @@ const DeploymentDetailsCard = ({
       <div className="col-span-1">
         <Typography color="gray">^ {deployment.branch}</Typography>
         <Typography color="gray">
-          ^ {deployment.commitHash} {deployment.commit.message}
+          ^ {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
+          {deployment.commit.message}
         </Typography>
       </div>
       <div className="col-span-1 flex items-center">
         <Typography color="gray" className="grow">
-          {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}
+          ^ {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}
         </Typography>
         <Menu placement="bottom-start">
           <MenuHandler>

packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx

@@ -4,6 +4,7 @@ import { Typography, Chip, Card } from '@material-tailwind/react';
 import { color } from '@material-tailwind/react/types/components/chip';
 import { DeploymentDetails } from '../../../../types/project';
 import { relativeTimeMs } from '../../../../utils/time';
+import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 
 interface DeploymentDialogBodyCardProps {
   deployment: DeploymentDetails;
@@ -31,7 +32,8 @@ const DeploymentDialogBodyCard = ({
         {deployment.url}
       </Typography>
       <Typography variant="small">
-        ^ {deployment.branch} ^ {deployment.commitHash}{' '}
+        ^ {deployment.branch} ^{' '}
+        {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
         {deployment.commit.message}
       </Typography>
       <Typography variant="small">

packages/frontend/src/constants.ts

@@ -8,3 +8,5 @@ export const ORGANIZATION_ID = '2379cf1f-a232-4ad2-ae14-4d881131cc26';
 
 export const GIT_TEMPLATE_LINK =
   'https://git.vdb.to/cerc-io/test-progressive-web-app';
+
+export const SHORT_COMMIT_HASH_LENGTH = 8;

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

@@ -30,8 +30,9 @@ const Import = () => {
         <div>^</div>
         <div className="grow">{repoName}</div>
       </div>
-
-      <Deploy />
+      <div className="w-5/6 p-6">
+        <Deploy />
+      </div>
     </div>
   );
 };

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

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
 
+import { Avatar } from '@material-tailwind/react';
+
 import Stepper from '../../../../components/Stepper';
 import templateDetails from '../../../../assets/templates.json';
 import { GIT_TEMPLATE_LINK } from '../../../../constants';
@@ -29,12 +31,12 @@ 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">
-        <div>^</div>
-        <div className="grow">{template?.name}</div>
+      <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
+        <Avatar variant="square" />
+        <div className="grow px-2">{template?.name}</div>
         <div>
           <a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">
-            cerc-io/test-progressive-web-app
+            ^ cerc-io/test-progressive-web-app
           </a>
         </div>
       </div>

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Domain, DomainStatus } from 'gql-client';
 import { useOutletContext } from 'react-router-dom';
 
-import { Typography, Button, Chip } from '@material-tailwind/react';
+import { Typography, Button, Chip, Avatar } from '@material-tailwind/react';
 
 import ActivityCard from '../../../../components/projects/project/ActivityCard';
 import { relativeTimeMs } from '../../../../utils/time';
@@ -96,7 +96,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 ">
-          <div>^</div>
+          <Avatar src={project.icon} variant="square" />
           <div className="grow">
             <Typography>{project.name}</Typography>
             <Typography variant="small" color="gray">
@@ -137,7 +137,7 @@ const OverviewTabPanel = () => {
           <>
             <div className="flex justify-between p-2 text-sm">
               <p>^ Source</p>
-              <p>{project.deployments[0]?.branch}</p>
+              <p>^ {project.deployments[0]?.branch}</p>
             </div>
             <div className="flex justify-between p-2 text-sm">
               <p>^ Deployment</p>