feat(domains): DomainCard and WebhookCard styling start

README.md

@@ -21,4 +21,3 @@ yarn build --ignore frontend
 ### Environment variables, running the development server, and deployment
 
 Follow the instructions in the README.md files of the [backend](packages/backend/README.md) and [frontend](packages/frontend/README.md) packages.
-

packages/backend/README.md

@@ -44,7 +44,7 @@ yarn start
 
 ## Deployment
 
-Clone the [deployer repository](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments):
+Clone the deployer repository:
 
 ```zsh
 git clone git@git.vdb.to:cerc-io/snowballtools-base-api-deployments.git

packages/backend/environments/local.toml.example

@@ -3,7 +3,7 @@
   port = 8000
   gqlPath = "/graphql"
   [server.session]
-    secret = ""
+    secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi"
     appOriginUrl = "http://localhost:3000"
     trustProxy = false
     domain = "localhost"
@@ -17,16 +17,6 @@
     clientId = ""
     clientSecret = ""
 
-[google]
-  clientId = ""
-  clientSecret = ""
-
-[turnkey]
-  apiBaseUrl = "https://api.turnkey.com"
-  apiPrivateKey = ""
-  apiPublicKey = ""
-  defaultOrganizationId = ""
-
 [registryConfig]
   fetchDeploymentRecordDelay = 5000
   restEndpoint = "http://localhost:1317"

packages/backend/src/routes/staging.ts

@@ -3,7 +3,7 @@ import { Router } from 'express';
 const router = Router();
 
 router.get('/version', async (req, res) => {
-  return res.send({ version: '0.0.9' });
+  return res.send({ version: '0.0.8' });
 });
 
 export default router;

packages/deployer/staging-records/application-deployment-request.yml

@@ -19,6 +19,6 @@ record:
       LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
       LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
   meta:
-    note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024
+    note: Added by Snowball @ Sat Jun 22 02:49:45 UTC 2024
     repository: "https://git.vdb.to/cerc-io/snowballtools-base"
     repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601

packages/frontend/README.md

@@ -44,9 +44,7 @@ yarn dev
 
 ## Deployment
 
-From the root of the project,
-
-- check if the [gittea repository mirror](https://git.vdb.to/cerc-io/snowballtools-base) is up to date
+From the root of the project, run:
 
 ### Staging
 

packages/frontend/package.json

@@ -62,6 +62,7 @@
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
+    "react-hot-toast": "^2.4.1",
     "react-oauth-popup": "^1.0.5",
     "react-router-dom": "^6.20.1",
     "react-timer-hook": "^3.0.7",

packages/frontend/src/components/shared/index.ts

@@ -1,27 +0,0 @@
-export { Avatar } from './Avatar';
-export { Badge } from './Badge';
-export { Button } from './Button';
-export { Calendar } from './Calendar';
-export { Checkbox } from './Checkbox';
-export { DatePicker } from './DatePicker';
-export { DotBorder } from './DotBorder';
-export { Heading } from './Heading';
-export { IconWithFrame } from './IconWithFrame';
-export { InlineNotification } from './InlineNotification';
-export { Input } from './Input';
-export { Modal } from './Modal';
-export { OverflownText } from './OverflownText';
-export { Radio } from './Radio';
-export { SegmentedControls } from './SegmentedControls';
-export { Select } from './Select';
-export { Sidebar } from './Sidebar';
-export { Step } from './Steps';
-export { Switch } from './Switch';
-export { Table } from './Table';
-export { Tabs } from './Tabs';
-export { Tag } from './Tag';
-export { useToast } from './Toast';
-export { Tooltip } from './Tooltip';
-export { UserSelect } from './UserSelect';
-export { VerifyCodeInput } from './VerifyCodeInput';
-export { WavyBorder } from './WavyBorder';

packages/frontend/src/index.tsx

@@ -16,7 +16,8 @@ import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
 import { baseUrl } from 'utils/constants';
 
-console.log(`v-0.0.9`);
+// @ts-ignore
+console.log(`v-${__VERSION__}`);
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,

packages/frontend/src/pages/org-slug/index.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-
-import { ProjectCard } from 'components/projects/ProjectCard';
-import { Heading, Badge, Button } from 'components/shared';
-import { PlusIcon } from 'components/shared/CustomIcon';
-import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
+import { Button } from 'components/shared/Button';
+
+import { PlusIcon } from 'components/shared/CustomIcon';
+import { ProjectCard } from 'components/projects/ProjectCard';
+import { Heading } from 'components/shared/Heading';
+import { Badge } from 'components/shared/Badge';
+import { useGQLClient } from 'context/GQLClientContext';
 
 const Projects = () => {
   const client = useGQLClient();
@@ -26,7 +28,6 @@ const Projects = () => {
   return (
     <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
       {/* Header */}
-
       <div className="flex items-center">
         <div className="grow">
           <div className="flex gap-4 items-center">

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

@@ -1,11 +1,14 @@
 import { useEffect, useState } from 'react';
+import { Domain, DomainStatus } from 'gql-client';
 import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import { useOctokit } from 'context/OctokitContext';
+import { useOctokit } from '../../../../context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
-import { useGQLClient } from 'context/GQLClientContext';
-import { Button, Heading, Avatar, Tag } from 'components/shared';
+import { useGQLClient } from '../../../../context/GQLClientContext';
+import { Button } from 'components/shared/Button';
+import { Heading } from 'components/shared/Heading';
+import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
 import {
   BranchStrokeIcon,
@@ -15,12 +18,12 @@ import {
   GithubStrokeIcon,
   GlobeIcon,
   LinkIcon,
-  CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
+import { Tag } from 'components/shared/Tag';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
+import { CalendarDaysIcon } from 'components/shared/CustomIcon/CalendarDaysIcon';
 import { relativeTimeMs } from 'utils/time';
-import { Domain, DomainStatus } from 'gql-client';
 
 const COMMITS_PER_PAGE = 4;
 

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

@@ -1,12 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
+import { Environment, EnvironmentVariable } from 'gql-client';
 
 import { Collapse } from '@snowballtools/material-tailwind-react-fork';
 
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
-import { useGQLClient } from 'context/GQLClientContext';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
 import { EnvironmentVariablesFormValues } from '../../../../../types';
 import HorizontalLine from 'components/HorizontalLine';
 import { Heading } from 'components/shared/Heading';
@@ -15,13 +17,10 @@ import { Checkbox } from 'components/shared/Checkbox';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
-import { useToast } from 'components/shared/Toast';
-import { Environment, EnvironmentVariable } from 'gql-client';
 
 export const EnvironmentVariablesTabPanel = () => {
   const { id } = useParams();
   const client = useGQLClient();
-  const { toast, dismiss } = useToast();
 
   const [environmentVariables, setEnvironmentVariables] = useState<
     EnvironmentVariable[]
@@ -119,25 +118,13 @@ export const EnvironmentVariablesTabPanel = () => {
 
         fetchEnvironmentVariables(id);
 
-        toast({
-          id:
-            createFormData.variables.length > 1
-              ? 'env_variable_added'
-              : 'env_variables_added',
-          title:
-            createFormData.variables.length > 1
-              ? `${createFormData.variables.length} variables added`
-              : `Variable added`,
-          variant: 'success',
-          onDismiss: dismiss,
-        });
+        toast.success(
+          createFormData.variables.length > 1
+            ? `${createFormData.variables.length} variables added`
+            : `Variable added`,
+        );
       } else {
-        toast({
-          id: 'env_variables_not_added',
-          title: 'Environment variables not added',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
+        toast.error('Environment variables not added');
       }
     },
     [id, client],

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -1,12 +1,12 @@
+import toast from 'react-hot-toast';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
-import { useGQLClient } from 'context/GQLClientContext';
+import { useGQLClient } from '../../../../../../../context/GQLClientContext';
 import { Table } from 'components/shared/Table';
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
-import { useToast } from 'components/shared/Toast';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -14,26 +14,15 @@ const Config = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const primaryDomainName = searchParams.get('name');
-  const { toast, dismiss } = useToast();
 
   const handleSubmitDomain = async () => {
     if (primaryDomainName === null) {
-      toast({
-        id: 'unresolvable_domain_name',
-        title: 'Cannot resolve domain name',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Cannot resolve domain name');
       return;
     }
 
     if (id === undefined) {
-      toast({
-        id: 'domain_cannot_find_project',
-        title: 'Cannot find project',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Cannot find project');
       return;
     }
 
@@ -42,20 +31,10 @@ const Config = () => {
     });
 
     if (isAdded) {
-      toast({
-        id: 'domain_added_successfully',
-        title: 'Domain added successfully',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Domain added successfully');
       navigate(`/${orgSlug}/projects/${id}/settings/domains`);
     } else {
-      toast({
-        id: 'generic_error_adding_domain',
-        title: 'Error adding domaint',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Error adding domain');
     }
   };
 

packages/frontend/vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
       context: '/src/context',
       components: '/src/components',
       pages: '/src/pages',
+      types: '/src/types',
     },
   },
   define: {

yarn.lock

@@ -11264,6 +11264,11 @@ globby@11.1.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 google-protobuf@^3.19.4:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
@@ -15323,6 +15328,13 @@ react-hook-form@^7.49.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"
   integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-inspector@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"