Add transfer functionality to AppBox and ApplicationList components

proofzero · Oct 19, 2023 · 36dd1ae · 36dd1ae
1 parent 5786ec4
commit 36dd1ae
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/apps/console/app/components/AppBox/index.tsx b/apps/console/app/components/AppBox/index.tsx
@@ -27,6 +27,7 @@ type AppBoxProps = {
   createLink: string
   onCreate: () => void
   navigate: (clientId: string) => void
+  transfer: (clientId: string) => void
 }
 
 export default function AppBox(props: AppBoxProps) {
@@ -50,6 +51,7 @@ export default function AppBox(props: AppBoxProps) {
         applications={mappedApps}
         onCreate={props.onCreate}
         navigate={props.navigate}
+        transfer={props.transfer}
       />
     </div>
   )

diff --git a/apps/console/app/components/Applications/ApplicationList.tsx b/apps/console/app/components/Applications/ApplicationList.tsx
@@ -16,12 +16,14 @@ type ApplicationListProps = {
   applications: ApplicationListItemProps[]
   onCreate: () => void
   navigate: (clientId: string) => void
+  transfer: (clientId: string) => void
 }
 
 export const ApplicationList = ({
   applications,
   onCreate,
   navigate,
+  transfer,
 }: ApplicationListProps) => {
   const [actionApp, setActionApp] = useState<
     | {
@@ -91,6 +93,7 @@ export const ApplicationList = ({
             <ApplicationListItem
               key={ali.id}
               navigate={navigate}
+              transfer={transfer}
               {...ali}
               onDeleteApplication={(clientId, appName, hasCustomDomain) => {
                 setActionApp({
@@ -122,6 +125,7 @@ export const ApplicationList = ({
               <ApplicationListItem
                 key={ali.id}
                 navigate={navigate}
+                transfer={transfer}
                 {...ali}
                 onDeleteApplication={(clientId, appName, hasCustomDomain) => {
                   setActionApp({

diff --git a/apps/console/app/components/Applications/ApplicationListItem.tsx b/apps/console/app/components/Applications/ApplicationListItem.tsx
@@ -5,6 +5,7 @@ import { ServicePlanType } from '@proofzero/types/billing'
 import { Fragment } from 'react'
 import { HiDotsVertical, HiOutlineCog } from 'react-icons/hi'
 import { HiOutlineTrash } from 'react-icons/hi2'
+import { TbArrowsTransferUp } from 'react-icons/tb'
 
 type ApplicationListItemPublishedStateProps = {
   published?: boolean
@@ -47,6 +48,7 @@ export type ApplicationListItemProps = {
   groupID?: string
   groupPaymentFailed?: boolean
   navigate?: (clientId: string) => void
+  transfer?: (clientId: string) => void
   onDeleteApplication?: (
     clientId: string,
     appName: string,
@@ -62,6 +64,7 @@ export const ApplicationListItem = ({
   hasCustomDomain,
   onDeleteApplication,
   navigate,
+  transfer,
   appPlan,
 }: ApplicationListItemProps) => (
   <article className="flex justify-center items-center border border-gray-200 shadow-sm rounded bg-white">
@@ -140,6 +143,26 @@ export const ApplicationListItem = ({
               </div>
             </div>
 
+            <div className="p-1 ">
+              <div
+                onClick={() => {
+                  if (transfer) transfer(id)
+                }}
+                className="cursor-pointer"
+              >
+                <Menu.Item
+                  as="div"
+                  className="py-2 px-4 flex items-center space-x-3 cursor-pointer
+                  hover:rounded-[6px] hover:bg-gray-100"
+                >
+                  <TbArrowsTransferUp className="text-xl font-normal text-gray-400" />
+                  <Text size="sm" weight="normal" className="text-gray-700">
+                    Transfer Application
+                  </Text>
+                </Menu.Item>
+              </div>
+            </div>
+
             <div className="p-1">
               <Menu.Item
                 as="div"

diff --git a/apps/console/app/routes/__layout/dashboard.tsx b/apps/console/app/routes/__layout/dashboard.tsx
@@ -74,6 +74,9 @@ export default () => {
               navigate('/apps/new')
             }}
             navigate={(clientId: string) => navigate(`/apps/${clientId}`)}
+            transfer={(clientId: string) =>
+              navigate(`/apps/${clientId}/transfer`)
+            }
             apps={apps.map((app) => ({
               ...app,
               groupPaymentFailed: Boolean(