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">