From bcd2375015d8f56f041ac439c4f2432a6e32a939 Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Sat, 20 Jul 2024 19:39:01 +0530 Subject: [PATCH 01/14] fix:Card height issue --- .../features/projects/Projects/ProjectCard.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx index 3531529..f57d178 100644 --- a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx +++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx @@ -3,7 +3,6 @@ import { Card, CardContent, CardDescription, - CardFooter, CardTitle, } from "@/components/ui/card"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; @@ -19,7 +18,6 @@ import { Dialog } from "@radix-ui/react-dialog"; import ManageBranchModal from "../Branch/ManageBranchModal"; import { ProjectWithBranch, ProjectData } from "../Projects"; import DeleteProjectModal from "./DeleteProjectModal"; -import { Badge } from "@/components/ui/badge"; export interface ProjectCardProps { project: ProjectWithBranch @@ -42,7 +40,7 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => { const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false) return ( - +
@@ -54,9 +52,14 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => {
-
+
- {project.display_name} +
+ {project.display_name} +
+ by {orgName} +
+
{isCreateAccess && @@ -95,10 +98,6 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => { - - - {orgName} - ); } From 35cc516c258c992905bdc68a1cee7cc18abbc81a Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Sat, 20 Jul 2024 20:38:06 +0530 Subject: [PATCH 02/14] fix:Card UI --- .../components/features/projects/Projects.tsx | 2 +- .../projects/Projects/ProjectCard.tsx | 82 +++++++++---------- 2 files changed, 38 insertions(+), 46 deletions(-) diff --git a/dashboard/src/components/features/projects/Projects.tsx b/dashboard/src/components/features/projects/Projects.tsx index 6be8e44..1510c8e 100644 --- a/dashboard/src/components/features/projects/Projects.tsx +++ b/dashboard/src/components/features/projects/Projects.tsx @@ -62,7 +62,7 @@ export const Projects = () => {
-
+
{data.message.map((org: ProjectData) => { const orgName = org.organization_name; return org.projects.map((project) => ( diff --git a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx index f57d178..d3e1171 100644 --- a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx +++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx @@ -11,13 +11,13 @@ import { AlertDialog } from "@/components/ui/alert-dialog"; import { KeyedMutator } from "swr"; import { useMemo, useState } from "react"; import { isSystemManager } from "@/utils/roles"; -import { RxDragHandleDots1 } from "react-icons/rx"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { BsThreeDotsVertical } from "react-icons/bs"; import { Dialog } from "@radix-ui/react-dialog"; import ManageBranchModal from "../Branch/ManageBranchModal"; import { ProjectWithBranch, ProjectData } from "../Projects"; import DeleteProjectModal from "./DeleteProjectModal"; +import { IoIosGitBranch } from "react-icons/io"; export interface ProjectCardProps { project: ProjectWithBranch @@ -40,54 +40,46 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => { const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false) return ( - - -
-
- - - - {appNameInitials} - - -
+ + + + + + {appNameInitials} + + -
-
-
- {project.display_name} -
- by {orgName} -
+
+
+
+ {project.display_name} +
+ by {orgName}
- {isCreateAccess && - - - - - {project.branches.length > 0 && - { setOpenManageModal(true) }}> - <> - - Manage Branches - - - } - setOpenDeleteDialogModal(true)}> - - Delete Project - - - - }
- - - {project.description} - + {isCreateAccess && + + + + + {project.branches.length > 0 && + { setOpenManageModal(true) }}> + <> + + Manage Branches + + + } + setOpenDeleteDialogModal(true)}> + + Delete Project + + + }
- - + + {project.description} +
From 407446a84159fbc3d6acb44bab6b3107ed5a321c Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Sat, 20 Jul 2024 20:52:05 +0530 Subject: [PATCH 03/14] fix:Your apps card UI fix --- .../features/meta_apps/YourApps.tsx | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/dashboard/src/components/features/meta_apps/YourApps.tsx b/dashboard/src/components/features/meta_apps/YourApps.tsx index 401e4e7..5bfccb4 100644 --- a/dashboard/src/components/features/meta_apps/YourApps.tsx +++ b/dashboard/src/components/features/meta_apps/YourApps.tsx @@ -1,14 +1,13 @@ import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "@/components/ui/card" +import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card" import { AvatarImage } from "@radix-ui/react-avatar" import { useFrappeGetCall } from "frappe-react-sdk" import { useMemo } from "react" import { BsDatabase } from "react-icons/bs" import { useNavigate } from "react-router-dom" import { YourAppAPIExplorer } from "./YourAppAPIExplorer" -import { Badge } from "@/components/ui/badge" export interface AppsData { app_name: string @@ -38,7 +37,7 @@ export const YourApps = () => { if (data && data.message) { return ( -
+
@@ -52,7 +51,7 @@ export const YourApps = () => {
-
+
{data.message.map((app: AppsData) => { return })} @@ -70,20 +69,28 @@ const AppsCard = ({ app }: { app: AppsData }) => { }, [app]) return ( - - - + + + - {appNameInitials} + + {appNameInitials} + - {app.app_name} - - {app.app_description} - +
+
+
+ {app.app_name} +
+ by {app.app_publisher} +
+
+
+ + {app.app_description} + +
- - {app.app_publisher} - ) } \ No newline at end of file From 18c0e1896bc53b1cc674712637934954a367f1f1 Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Sat, 20 Jul 2024 20:52:17 +0530 Subject: [PATCH 04/14] refactor: Update dialog content max width and height and removed avatar --- .../features/meta_apps/YourAppAPIExplorer.tsx | 12 ++---------- .../src/components/features/projects/APIExplorer.tsx | 12 ++---------- .../features/projects/ViewERDAppDialog.tsx | 12 ++---------- .../features/erd/meta/ERDDoctypeAndAppModal.tsx | 2 +- 4 files changed, 7 insertions(+), 31 deletions(-) diff --git a/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx b/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx index fcca4b4..3935a71 100644 --- a/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx +++ b/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx @@ -5,10 +5,9 @@ import { AppsData } from "./YourApps" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { AiOutlineApi } from "react-icons/ai" -import { useCallback, useMemo, useState } from "react" +import { useCallback, useState } from "react" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export const YourAppAPIExplorer = () => { @@ -55,7 +54,7 @@ export const ViewAPIExplorerContent = ({ data }: { data: AppsData[] }) => { }, [branch, navigate]) return ( - + Select Apps @@ -85,9 +84,6 @@ export interface ViewAPIExplorerProps { } export const ViewAPIExplorerCard = ({ app }: ViewAPIExplorerProps) => { - const appNameInitials = useMemo(() => { - return app.app_name.split('_').map((word) => word[0]).join('').toUpperCase() - }, [app]) return (
  • @@ -95,10 +91,6 @@ export const ViewAPIExplorerCard = ({ app }: ViewAPIExplorerProps) => {
    diff --git a/dashboard/src/components/features/projects/APIExplorer.tsx b/dashboard/src/components/features/projects/APIExplorer.tsx index 8b394a4..da92664 100644 --- a/dashboard/src/components/features/projects/APIExplorer.tsx +++ b/dashboard/src/components/features/projects/APIExplorer.tsx @@ -4,9 +4,8 @@ import { useFrappeGetCall } from "frappe-react-sdk" import { ProjectData, ProjectWithBranch } from "./Projects" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { AiOutlineApi } from "react-icons/ai" -import { useCallback, useMemo, useState } from "react" +import { useCallback, useState } from "react" import { useNavigate } from "react-router-dom" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch" @@ -56,7 +55,7 @@ export const ViewAPIExplorerContent = ({ data }: { data: ProjectData[] }) => { }, [branch, navigate]) return ( - + Select Apps @@ -93,19 +92,12 @@ export const ViewAPIExplorerCard = ({ project }: ViewERDProjectCardProps) => { const [branch, setBranch] = useState(project.branches[0]?.name) - const appNameInitials = useMemo(() => { - return project.display_name.split('_').map((word) => word[0]).join('').toUpperCase() - }, [project]) return (
  • diff --git a/dashboard/src/components/features/projects/ViewERDAppDialog.tsx b/dashboard/src/components/features/projects/ViewERDAppDialog.tsx index d98b5e9..b07fdb6 100644 --- a/dashboard/src/components/features/projects/ViewERDAppDialog.tsx +++ b/dashboard/src/components/features/projects/ViewERDAppDialog.tsx @@ -1,10 +1,9 @@ import { Button } from "@/components/ui/button" import { DialogHeader, DialogFooter, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog" -import { useState, useMemo } from "react" +import { useState } from "react" import { useNavigate } from "react-router-dom" import { ProjectData, ProjectWithBranch } from "./Projects" import { Checkbox } from "@/components/ui/checkbox" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch" @@ -23,7 +22,7 @@ export const ViewERDDialogContent = ({ data }: { data: ProjectData[] }) => { } return ( - + Select Apps @@ -57,9 +56,6 @@ export const ViewERDProjectCard = ({ project, apps, setApps }: ViewERDProjectCar const [branch, setBranch] = useState(project.branches[0]?.name) - const appNameInitials = useMemo(() => { - return project.display_name.split('_').map((word) => word[0]).join('').toUpperCase() - }, [project]) return (
  • @@ -76,10 +72,6 @@ export const ViewERDProjectCard = ({ project, apps, setApps }: ViewERDProjectCar } }} /> - - - {appNameInitials} -

    {project.display_name}

    diff --git a/dashboard/src/pages/features/erd/meta/ERDDoctypeAndAppModal.tsx b/dashboard/src/pages/features/erd/meta/ERDDoctypeAndAppModal.tsx index 50d2d50..1423384 100644 --- a/dashboard/src/pages/features/erd/meta/ERDDoctypeAndAppModal.tsx +++ b/dashboard/src/pages/features/erd/meta/ERDDoctypeAndAppModal.tsx @@ -76,7 +76,7 @@ export const ViewERDAppList = ({ apps, setApps, onClose }: { apps: string[], set onClose() } return ( - + Select Apps From bb384a14c516792a7a540049b9e4e521feb2d618 Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Thu, 25 Jul 2024 13:55:46 +0530 Subject: [PATCH 05/14] feat:Bruno tab --- commit/api/bruno.py | 51 ++++++------ .../CopyToClipboard/CopyToClipboard.tsx | 4 +- .../features/api_viewer/APIDetails.tsx | 83 +++++++++++++++---- .../projects/Branch/ManageBranchItem.tsx | 2 +- 4 files changed, 97 insertions(+), 43 deletions(-) diff --git a/commit/api/bruno.py b/commit/api/bruno.py index 904c0e7..4f5e258 100644 --- a/commit/api/bruno.py +++ b/commit/api/bruno.py @@ -1,7 +1,7 @@ import frappe @frappe.whitelist() -def generate_bruno_file(data): +def generate_bruno_file(data, return_type='download'): request_data = frappe.parse_json(data) """ Generates .bru file content for a single request based on the provided request data. @@ -35,32 +35,35 @@ def format_name(name): bru_files = {} - for request_type in request_types: - seq = 1 - request_type_upper = request_type.upper() - request_type_lower = request_type.lower() - url = f"{base_url_template}/{api_path}" - - query_string = '&'.join([f'{k}={v}' for k, v in params.items() if v]) - full_url = f'{url}?{query_string}' if query_string else url - - bru_content = [] + request_type = request_types[0] + seq = 1 + request_type_upper = request_type.upper() + request_type_lower = request_type.lower() + url = f"{base_url_template}/{api_path}" + + query_string = '&'.join([f'{k}={v}' for k, v in params.items() if v]) + full_url = f'{url}?{query_string}' if query_string else url - # Meta section - bru_content.append(f'meta {{\n name: {name}\n type: http\n seq: {seq}\n}}\n') + bru_content = [] - # Request section - bru_content.append(f'{request_type_lower} {{\n url: {full_url}\n body: none\n auth: none\n}}\n') + # Meta section + bru_content.append(f'meta {{\n name: {name}\n type: http\n seq: {seq}\n}}\n') - # Params section - if params: - bru_content.append(f'params:query {{\n') - for k, v in params.items(): - if v: - bru_content.append(f' {k}: {v}\n') - bru_content.append('}\n') + # Request section + bru_content.append(f'{request_type_lower} {{\n url: {full_url}\n body: none\n auth: none\n}}\n') - bru_files[request_type_upper] = '\n'.join(bru_content) + # Params section + if params: + bru_content.append(f'params:query {{\n') + for k, v in params.items(): + if v: + bru_content.append(f' {k}: {v}\n') + bru_content.append('}\n') + + bru_files[request_type_upper] = '\n'.join(bru_content) + if return_type == 'download': frappe.local.response.filename = f'{name} {request_type}.bru' if len(request_types) > 1 else f'{name}.bru' frappe.local.response.filecontent = bru_files[request_type_upper] - frappe.local.response.type = 'download' \ No newline at end of file + frappe.local.response.type = 'download' + else: + return bru_files[request_type_upper] \ No newline at end of file diff --git a/dashboard/src/components/common/CopyToClipboard/CopyToClipboard.tsx b/dashboard/src/components/common/CopyToClipboard/CopyToClipboard.tsx index 41e315f..0df317e 100644 --- a/dashboard/src/components/common/CopyToClipboard/CopyToClipboard.tsx +++ b/dashboard/src/components/common/CopyToClipboard/CopyToClipboard.tsx @@ -1,9 +1,9 @@ -import { Button } from "@/components/ui/button" +import { Button, ButtonProps } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { CheckIcon, CopyIcon } from "@radix-ui/react-icons" import { useEffect, useState } from "react" -interface CopyButtonProps extends React.HTMLAttributes { +interface CopyButtonProps extends ButtonProps { value: string } diff --git a/dashboard/src/components/features/api_viewer/APIDetails.tsx b/dashboard/src/components/features/api_viewer/APIDetails.tsx index 7f5829b..0401323 100644 --- a/dashboard/src/components/features/api_viewer/APIDetails.tsx +++ b/dashboard/src/components/features/api_viewer/APIDetails.tsx @@ -2,12 +2,14 @@ import CopyButton from "@/components/common/CopyToClipboard/CopyToClipboard" import { ErrorBanner } from "@/components/common/ErrorBanner/ErrorBanner" import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader" import { Tabs } from "@/components/common/Tabs" +import { Button } from "@/components/ui/button" import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { web_url } from "@/config/socket" import { APIData, Argument } from "@/types/APIData" import { XMarkIcon } from "@heroicons/react/24/outline" import { useFrappeGetCall } from "frappe-react-sdk" import { useMemo } from "react" +import { MdOutlineFileDownload } from "react-icons/md" import Markdown from "react-markdown" export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, setSelectedEndpoint, viewerType }: { project_branch: string, endpointData: APIData[], selectedEndpoint: string, setSelectedEndpoint: React.Dispatch>, viewerType: string }) => { @@ -17,10 +19,17 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set }, [endpointData, selectedEndpoint]) const tabs = [ - { name: 'Parameters', content: }, - { name: 'Code', content: }, - { name: 'Documentation', content: } + { + name: 'Parameters', content: + }, + { + name: 'Code', content: + }, + { + name: 'Bruno', content: + }, ] + data?.documentation && tabs.push({ name: 'Documentation', content: }) const requestTypeBgColor = (requestType: string) => { switch (requestType) { @@ -37,13 +46,6 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set } } - const rest = useMemo(() => { - if (data) { - const { allow_guest, xss_safe, documentation, block_end, block_start, index, ...rest } = data - return rest - } - }, [data]) - const requestTypeBorderColor = (requestType: string) => { switch (requestType) { case 'GET': @@ -64,11 +66,6 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set

    API Details

    - */} + + +
    +
    + 
    +                    {isLoading && }
+                    {data && 
    {data}
    }
+
    +     +
    + ) } \ No newline at end of file diff --git a/dashboard/src/components/features/projects/Branch/ManageBranchItem.tsx b/dashboard/src/components/features/projects/Branch/ManageBranchItem.tsx index ff6662d..5f013e4 100644 --- a/dashboard/src/components/features/projects/Branch/ManageBranchItem.tsx +++ b/dashboard/src/components/features/projects/Branch/ManageBranchItem.tsx @@ -92,7 +92,7 @@ const ManageBranchItem = ({ branch, mutate }: { branch: CommitProjectBranch, mut Fetch latest code - +
    • -
    +
    {data.message.map((org: ProjectData) => { const orgName = org.organization_name; return org.projects.map((project) => ( diff --git a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx index d3e1171..b6b4d7d 100644 --- a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx +++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx @@ -11,13 +11,13 @@ import { AlertDialog } from "@/components/ui/alert-dialog"; import { KeyedMutator } from "swr"; import { useMemo, useState } from "react"; import { isSystemManager } from "@/utils/roles"; +import { RxDragHandleDots1 } from "react-icons/rx"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { BsThreeDotsVertical } from "react-icons/bs"; import { Dialog } from "@radix-ui/react-dialog"; import ManageBranchModal from "../Branch/ManageBranchModal"; import { ProjectWithBranch, ProjectData } from "../Projects"; import DeleteProjectModal from "./DeleteProjectModal"; -import { IoIosGitBranch } from "react-icons/io"; export interface ProjectCardProps { project: ProjectWithBranch @@ -40,46 +40,52 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => { const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false) return ( - - - - - - {appNameInitials} - - + + +
    +
    + + + + {appNameInitials} + + +
    -
    -
    -
    - {project.display_name} -
    - by {orgName} +
    +
    +
    + {project.display_name} +
    + by {orgName} +
    -
    - {isCreateAccess && - - - - - {project.branches.length > 0 && - { setOpenManageModal(true) }}> - <> - - Manage Branches - + {isCreateAccess && + + + + + {project.branches.length > 0 && + { setOpenManageModal(true) }}> + <> + + Manage Branches + + + } + setOpenDeleteDialogModal(true)}> + + Delete Project - } - setOpenDeleteDialogModal(true)}> - - Delete Project - - - } + + + } +
    + + + {project.description} +
    - - {project.description} -
    From c9d5ccffb5b0f93e50b3f453969c22865fc525cc Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Thu, 25 Jul 2024 14:04:57 +0530 Subject: [PATCH 07/14] refactor: Update YourApps component UI layout and styling --- .../features/meta_apps/YourApps.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/dashboard/src/components/features/meta_apps/YourApps.tsx b/dashboard/src/components/features/meta_apps/YourApps.tsx index 5bfccb4..d74b27e 100644 --- a/dashboard/src/components/features/meta_apps/YourApps.tsx +++ b/dashboard/src/components/features/meta_apps/YourApps.tsx @@ -51,7 +51,7 @@ export const YourApps = () => {
    -
    +
    {data.message.map((app: AppsData) => { return })} @@ -69,27 +69,21 @@ const AppsCard = ({ app }: { app: AppsData }) => { }, [app]) return ( - - - + + + - - {appNameInitials} - + {appNameInitials} -
    -
    -
    - {app.app_name} -
    - by {app.app_publisher} -
    -
    +
    + {app.app_name} +
    + by {app.app_publisher}
    - - {app.app_description} -
    + + {app.app_description} + ) From fe9e969d42e2f32c757738e3a2707e7a15b6c59e Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Thu, 25 Jul 2024 14:19:57 +0530 Subject: [PATCH 08/14] refactor: Update avatar styling in YourApps and ProjectCard components --- .../src/components/features/meta_apps/YourApps.tsx | 14 +++++++++----- .../features/projects/Projects/ProjectCard.tsx | 8 ++++---- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/dashboard/src/components/features/meta_apps/YourApps.tsx b/dashboard/src/components/features/meta_apps/YourApps.tsx index d74b27e..38db22a 100644 --- a/dashboard/src/components/features/meta_apps/YourApps.tsx +++ b/dashboard/src/components/features/meta_apps/YourApps.tsx @@ -69,21 +69,25 @@ const AppsCard = ({ app }: { app: AppsData }) => { }, [app]) return ( - + - - - {appNameInitials} +
    + + + {appNameInitials} +
    +
    {app.app_name}
    - by {app.app_publisher} + {app.app_publisher}
    {app.app_description} +
    ) diff --git a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx index b6b4d7d..c890adc 100644 --- a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx +++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx @@ -44,9 +44,9 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => {
    - - - + + + {appNameInitials} @@ -57,7 +57,7 @@ const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => {
    {project.display_name}
    - by {orgName} + {orgName}
    {isCreateAccess && From 3be7362fe6fce829ff536a60411d3424c15b191e Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Thu, 25 Jul 2024 18:05:22 +0530 Subject: [PATCH 09/14] chore: Update npm dependencies and add html-to-image library and add functionality to download ERD --- dashboard/package.json | 3 +- dashboard/src/pages/features/erd/Graph.tsx | 23 +++++- dashboard/yarn.lock | 85 ++++++++++++---------- 3 files changed, 68 insertions(+), 43 deletions(-) diff --git a/dashboard/package.json b/dashboard/package.json index c127a0f..86e0a58 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -42,6 +42,7 @@ "cmdk": "^0.2.0", "downshift": "^9.0.6", "frappe-react-sdk": "^1.7.0", + "html-to-image": "^1.11.11", "install": "^0.13.0", "jotai": "^2.8.3", "lodash": "^4.17.21", @@ -54,7 +55,7 @@ "react-icons": "^5.2.1", "react-markdown": "^9.0.1", "react-router-dom": "^6.14.1", - "reactflow": "^11.7.4", + "reactflow": "^11.11.4", "rehype-raw": "^7.0.0", "remark-gfm": "^3.0.1", "shadcn-ui": "^0.8.0", diff --git a/dashboard/src/pages/features/erd/Graph.tsx b/dashboard/src/pages/features/erd/Graph.tsx index 9322228..f94438d 100644 --- a/dashboard/src/pages/features/erd/Graph.tsx +++ b/dashboard/src/pages/features/erd/Graph.tsx @@ -1,5 +1,5 @@ import dagre from '@dagrejs/dagre' -import { FC, useCallback, useEffect, useMemo, useState } from 'react' +import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react' import '../../../styles/flow.css' import ReactFlow, { Background, @@ -23,6 +23,8 @@ import { CgMaximizeAlt } from 'react-icons/cg' import { TbArrowsMinimize } from 'react-icons/tb' import { TableNode } from './TableNode' import { TableDrawer } from '../TableDrawer/TableDrawer' +import { toPng } from 'html-to-image' +import { BsDownload } from 'react-icons/bs' // import { set } from 'lodash' // ReactFlow is scaling everything by the factor of 2 @@ -312,7 +314,7 @@ const TablesGraph: FC<{ }, [tables, relationships, setNodes, setEdges, reactFlowInstance]) - + const flowRef = useRef(null) return ( <>
    @@ -321,6 +323,7 @@ const TablesGraph: FC<{ style={{ backgroundColor: '#F7FAFC', }} + ref={flowRef} nodes={nodes} edges={edges} onNodesChange={onNodesChange} @@ -355,6 +358,22 @@ const TablesGraph: FC<{ {!fullscreenOn && } {fullscreenOn && } + { + if (flowRef.current === null) return + toPng(flowRef.current, { + filter: node => !( + node?.classList?.contains('react-flow__minimap') || + node?.classList?.contains('react-flow__controls') + ), + }).then(dataUrl => { + const a = document.createElement('a'); + a.setAttribute('download', 'reactflow.png'); + a.setAttribute('href', dataUrl); + a.click(); + }); + }}> + + {/* */} {/* diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock index d91ef42..28e53fa 100644 --- a/dashboard/yarn.lock +++ b/dashboard/yarn.lock @@ -1330,28 +1330,28 @@ dependencies: "@babel/runtime" "^7.13.10" -"@reactflow/background@11.3.13": - version "11.3.13" - resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.3.13.tgz#a29bcdce01b5e881a330067bfd08c58c12fc7266" - integrity sha512-hkvpVEhgvfTDyCvdlitw4ioKCYLaaiRXnuEG+1QM3Np+7N1DiWF1XOv5I8AFyNoJL07yXEkbECUTsHvkBvcG5A== +"@reactflow/background@11.3.14": + version "11.3.14" + resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.3.14.tgz#778ca30174f3de77fc321459ab3789e66e71a699" + integrity sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA== dependencies: - "@reactflow/core" "11.11.3" + "@reactflow/core" "11.11.4" classcat "^5.0.3" zustand "^4.4.1" -"@reactflow/controls@11.2.13": - version "11.2.13" - resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.2.13.tgz#a05d86b82fc49e8ed0ca35d04c838a45f90f4f15" - integrity sha512-3xgEg6ALIVkAQCS4NiBjb7ad8Cb3D8CtA7Vvl4Hf5Ar2PIVs6FOaeft9s2iDZGtsWP35ECDYId1rIFVhQL8r+A== +"@reactflow/controls@11.2.14": + version "11.2.14" + resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.2.14.tgz#508ed2c40d23341b3b0919dd11e76fd49cf850c7" + integrity sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw== dependencies: - "@reactflow/core" "11.11.3" + "@reactflow/core" "11.11.4" classcat "^5.0.3" zustand "^4.4.1" -"@reactflow/core@11.11.3": - version "11.11.3" - resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.11.3.tgz#2cdc0c684931918125d505bec3cb94f115b87747" - integrity sha512-+adHdUa7fJSEM93fWfjQwyWXeI92a1eLKwWbIstoCakHpL8UjzwhEh6sn+mN2h/59MlVI7Ehr1iGTt3MsfcIFA== +"@reactflow/core@11.11.4": + version "11.11.4" + resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.11.4.tgz#89bd86d1862aa1416f3f49926cede7e8c2aab6a7" + integrity sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q== dependencies: "@types/d3" "^7.4.0" "@types/d3-drag" "^3.0.1" @@ -1363,12 +1363,12 @@ d3-zoom "^3.0.0" zustand "^4.4.1" -"@reactflow/minimap@11.7.13": - version "11.7.13" - resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.7.13.tgz#99396175065a1e2d058b8639883d13c71777764f" - integrity sha512-m2MvdiGSyOu44LEcERDEl1Aj6x//UQRWo3HEAejNU4HQTlJnYrSN8tgrYF8TxC1+c/9UdyzQY5VYgrTwW4QWdg== +"@reactflow/minimap@11.7.14": + version "11.7.14" + resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.7.14.tgz#298d7a63cb1da06b2518c99744f716560c88ca73" + integrity sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ== dependencies: - "@reactflow/core" "11.11.3" + "@reactflow/core" "11.11.4" "@types/d3-selection" "^3.0.3" "@types/d3-zoom" "^3.0.1" classcat "^5.0.3" @@ -1376,23 +1376,23 @@ d3-zoom "^3.0.0" zustand "^4.4.1" -"@reactflow/node-resizer@2.2.13": - version "2.2.13" - resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.2.13.tgz#83faf6e2977f40b528bf100c0da634e08f8fb51a" - integrity sha512-X7ceQ2s3jFLgbkg03n2RYr4hm3jTVrzkW2W/8ANv/SZfuVmF8XJxlERuD8Eka5voKqLda0ywIZGAbw9GoHLfUQ== +"@reactflow/node-resizer@2.2.14": + version "2.2.14" + resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz#1810c0ce51aeb936f179466a6660d1e02c7a77a8" + integrity sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA== dependencies: - "@reactflow/core" "11.11.3" + "@reactflow/core" "11.11.4" classcat "^5.0.4" d3-drag "^3.0.0" d3-selection "^3.0.0" zustand "^4.4.1" -"@reactflow/node-toolbar@1.3.13": - version "1.3.13" - resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.3.13.tgz#f15a2e6ed89287a33c4305d3bd7f3991b85db4af" - integrity sha512-aknvNICO10uWdthFSpgD6ctY/CTBeJUMV9co8T9Ilugr08Nb89IQ4uD0dPmr031ewMQxixtYIkw+sSDDzd2aaQ== +"@reactflow/node-toolbar@1.3.14": + version "1.3.14" + resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz#c6ffc76f82acacdce654f2160dc9852162d6e7c9" + integrity sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ== dependencies: - "@reactflow/core" "11.11.3" + "@reactflow/core" "11.11.4" classcat "^5.0.3" zustand "^4.4.1" @@ -2922,6 +2922,11 @@ hastscript@^8.0.0: property-information "^6.0.0" space-separated-tokens "^2.0.0" +html-to-image@^1.11.11: + version "1.11.11" + resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.11.11.tgz#c0f8a34dc9e4b97b93ff7ea286eb8562642ebbea" + integrity sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA== + html-url-attributes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz#fc4abf0c3fb437e2329c678b80abb3c62cff6f08" @@ -4513,17 +4518,17 @@ react@^18.2.0: dependencies: loose-envify "^1.1.0" -reactflow@^11.7.4: - version "11.11.3" - resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.11.3.tgz#5e8d8b395bd443c6d10d7cef2101866ed185a1e0" - integrity sha512-wusd1Xpn1wgsSEv7UIa4NNraCwH9syBtubBy4xVNXg3b+CDKM+sFaF3hnMx0tr0et4km9urIDdNvwm34QiZong== - dependencies: - "@reactflow/background" "11.3.13" - "@reactflow/controls" "11.2.13" - "@reactflow/core" "11.11.3" - "@reactflow/minimap" "11.7.13" - "@reactflow/node-resizer" "2.2.13" - "@reactflow/node-toolbar" "1.3.13" +reactflow@^11.11.4: + version "11.11.4" + resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.11.4.tgz#e3593e313420542caed81aecbd73fb9bc6576653" + integrity sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og== + dependencies: + "@reactflow/background" "11.3.14" + "@reactflow/controls" "11.2.14" + "@reactflow/core" "11.11.4" + "@reactflow/minimap" "11.7.14" + "@reactflow/node-resizer" "2.2.14" + "@reactflow/node-toolbar" "1.3.14" read-cache@^1.0.0: version "1.0.0" From b21e90cba1ca159070e14862bb1aaac4a62ba2b1 Mon Sep 17 00:00:00 2001 From: Sumit Jain Date: Thu, 25 Jul 2024 18:07:18 +0530 Subject: [PATCH 10/14] refactor: Improve UI layout and styling in YourApps and ProjectCard components --- .../src/components/features/meta_apps/YourApps.tsx | 1 + .../features/projects/Projects/ProjectCard.tsx | 2 +- .../features/projects/ViewERDAppDialog.tsx | 1 + dashboard/src/pages/features/erd/ERDViewer.tsx | 14 +++++++++++++- .../pages/features/erd/meta/CreateERDForMeta.tsx | 13 +++++++++++-- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/dashboard/src/components/features/meta_apps/YourApps.tsx b/dashboard/src/components/features/meta_apps/YourApps.tsx index 38db22a..6e663ef 100644 --- a/dashboard/src/components/features/meta_apps/YourApps.tsx +++ b/dashboard/src/components/features/meta_apps/YourApps.tsx @@ -43,6 +43,7 @@ export const YourApps = () => {
    */}
    + +
    ) } \ No newline at end of file diff --git a/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx b/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx index 3935a71..10db415 100644 --- a/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx +++ b/dashboard/src/components/features/meta_apps/YourAppAPIExplorer.tsx @@ -58,7 +58,7 @@ export const ViewAPIExplorerContent = ({ data }: { data: AppsData[] }) => { Select Apps - Select the apps to view ERD + Select the apps to view API's
      diff --git a/dashboard/src/components/features/projects/APIExplorer.tsx b/dashboard/src/components/features/projects/APIExplorer.tsx index da92664..31661a3 100644 --- a/dashboard/src/components/features/projects/APIExplorer.tsx +++ b/dashboard/src/components/features/projects/APIExplorer.tsx @@ -59,7 +59,7 @@ export const ViewAPIExplorerContent = ({ data }: { data: ProjectData[] }) => { Select Apps - Select the apps to view ERD + Select the apps to view API's
        diff --git a/dashboard/src/pages/features/erd/ERDForDoctypes.tsx b/dashboard/src/pages/features/erd/ERDForDoctypes.tsx index 8fd45c3..558e351 100644 --- a/dashboard/src/pages/features/erd/ERDForDoctypes.tsx +++ b/dashboard/src/pages/features/erd/ERDForDoctypes.tsx @@ -14,9 +14,10 @@ export interface Props { project_branch: string[] doctypes: { doctype: string, project_branch: string }[] setDocTypes: React.Dispatch> + flowRef: React.MutableRefObject } -export const ERDForDoctypes = ({ project_branch, doctypes, setDocTypes }: Props) => { +export const ERDForDoctypes = ({ project_branch, doctypes, setDocTypes, flowRef }: Props) => { const [data, setData] = useState(null) const { call, error, loading } = useFrappePostCall<{ message: SchemaData }>('commit.api.erd_viewer.get_erd_schema_for_doctypes') @@ -40,7 +41,7 @@ export const ERDForDoctypes = ({ project_branch, doctypes, setDocTypes }: Props) } if (data) { - return + return } return null diff --git a/dashboard/src/pages/features/erd/ERDViewer.tsx b/dashboard/src/pages/features/erd/ERDViewer.tsx index 5caffff..51303dc 100644 --- a/dashboard/src/pages/features/erd/ERDViewer.tsx +++ b/dashboard/src/pages/features/erd/ERDViewer.tsx @@ -5,7 +5,7 @@ import { AppModuleData } from "@/types/CommitProjectBranch" import { Dialog, Transition } from "@headlessui/react" import { XMarkIcon } from "@heroicons/react/20/solid" import { useFrappeGetCall } from "frappe-react-sdk" -import { Fragment, useEffect, useMemo, useState } from "react" +import { Fragment, useEffect, useMemo, useRef, useState } from "react" import { useLocation } from "react-router-dom" import { Header } from "@/components/common/Header" import { Input } from "@/components/ui/input" @@ -14,6 +14,8 @@ import { ERDForDoctypes } from "./ERDForDoctypes" import { Dialog as Dialog2 } from "@/components/ui/dialog" import { Popover, PopoverTrigger } from "@/components/ui/popover" import { DoctypeListPopover, ViewERDAppList } from "./meta/ERDDoctypeAndAppModal" +import { BsDownload } from "react-icons/bs" +import { toPng } from 'html-to-image' export const ERDViewer = () => { @@ -37,14 +39,34 @@ export const ERDViewer = () => { }, []) + const flowRef = useRef(null) + return (
        -
        diff --git a/dashboard/src/pages/features/erd/Graph.tsx b/dashboard/src/pages/features/erd/Graph.tsx index b0b7130..d6cfc92 100644 --- a/dashboard/src/pages/features/erd/Graph.tsx +++ b/dashboard/src/pages/features/erd/Graph.tsx @@ -1,5 +1,5 @@ import dagre from '@dagrejs/dagre' -import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { FC, useCallback, useEffect, useMemo, useState } from 'react' import '../../../styles/flow.css' import ReactFlow, { Background, @@ -22,14 +22,12 @@ import { CgMaximizeAlt } from 'react-icons/cg' import { TbArrowsMinimize } from 'react-icons/tb' import { TableNode } from './TableNode' import { TableDrawer } from '../TableDrawer/TableDrawer' -import { toPng } from 'html-to-image' -import { BsDownload } from 'react-icons/bs' // ReactFlow is scaling everything by the factor of 2 export const NODE_WIDTH = 320 export const NODE_ROW_HEIGHT = 40 -export const Graph = ({ tables, relationships, project_branch, setDoctypes, doctypes }: { +export const Graph = ({ tables, relationships, project_branch, setDoctypes, doctypes, flowRef }: { tables: PostgresTable[] relationships: PostgresRelationship[] project_branch: string[] @@ -41,10 +39,11 @@ export const Graph = ({ tables, relationships, project_branch, setDoctypes, doct doctype: string; project_branch: string; }[] + flowRef: React.MutableRefObject }) => { return ( - + ) } @@ -185,7 +184,8 @@ const TablesGraph: FC<{ doctype: string; project_branch: string; }[] -}> = ({ tables, relationships, setDoctypes, doctypes }) => { + flowRef: React.MutableRefObject +}> = ({ tables, relationships, setDoctypes, doctypes, flowRef }) => { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [fullscreenOn, setFullScreen] = useState(false); @@ -313,8 +313,6 @@ const TablesGraph: FC<{ }, [tables, relationships, setNodes, setEdges, reactFlowInstance]) - - const flowRef = useRef(null) return ( <>
        @@ -356,35 +354,19 @@ const TablesGraph: FC<{ {!fullscreenOn && } {fullscreenOn && } - { - if (flowRef.current === null) return - toPng(flowRef.current, { - filter: node => !( - node?.classList?.contains('react-flow__minimap') || - node?.classList?.contains('react-flow__controls') - ), - }).then(dataUrl => { - const a = document.createElement('a'); - a.setAttribute('download', 'reactflow.png'); - a.setAttribute('href', dataUrl); - a.click(); - }); - }}> - - -
        +
        -
        Table
        +
        Table
        -
        Child Table
        +
        Child Table
        -
        Custom Field
        +
        Custom Field
        diff --git a/dashboard/src/pages/features/erd/meta/CreateERDForMeta.tsx b/dashboard/src/pages/features/erd/meta/CreateERDForMeta.tsx index 257f58d..f3f9e21 100644 --- a/dashboard/src/pages/features/erd/meta/CreateERDForMeta.tsx +++ b/dashboard/src/pages/features/erd/meta/CreateERDForMeta.tsx @@ -1,7 +1,7 @@ import { Header } from "@/components/common/Header" import { Button } from "@/components/ui/button" import { Dialog, Transition } from "@headlessui/react" -import { Fragment, useEffect, useState } from "react" +import { Fragment, useEffect, useRef, useState } from "react" import { XMarkIcon } from "@heroicons/react/20/solid" import { ErrorBanner } from "@/components/common/ErrorBanner/ErrorBanner" import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader" @@ -13,6 +13,8 @@ import { useDebounce } from "@/hooks/useDebounce" import { ERDForMetaDoctypes } from "./ERDForMetaDoctype" import { Popover, PopoverTrigger } from "@/components/ui/popover" import { DoctypeListPopoverForMeta } from "./ERDDoctypeAndAppModal" +import { BsDownload } from "react-icons/bs" +import { toPng } from 'html-to-image' export const CreateERD = () => { const [open, setOpen] = useState(true) @@ -28,21 +30,41 @@ export const CreateERD = () => { }, []) + const flowRef = useRef(null) + return (
        -
        diff --git a/dashboard/src/pages/features/erd/meta/ERDForMetaDoctype.tsx b/dashboard/src/pages/features/erd/meta/ERDForMetaDoctype.tsx index 8dcf468..b604dd0 100644 --- a/dashboard/src/pages/features/erd/meta/ERDForMetaDoctype.tsx +++ b/dashboard/src/pages/features/erd/meta/ERDForMetaDoctype.tsx @@ -13,9 +13,10 @@ export interface SchemaData { export interface Props { doctypes: string[] setDocTypes: React.Dispatch> + flowRef: React.MutableRefObject } -export const ERDForMetaDoctypes = ({ doctypes, setDocTypes }: Props) => { +export const ERDForMetaDoctypes = ({ doctypes, setDocTypes, flowRef }: Props) => { const [data, setData] = useState(null) const { call, error, loading } = useFrappePostCall<{ message: SchemaData }>('commit.api.erd_viewer.get_meta_erd_schema_for_doctypes') @@ -38,7 +39,7 @@ export const ERDForMetaDoctypes = ({ doctypes, setDocTypes }: Props) => { } if (data) { - return + return } return null diff --git a/dashboard/src/pages/features/erd/meta/MetaGraph.tsx b/dashboard/src/pages/features/erd/meta/MetaGraph.tsx index 739a7ac..5d0a8e4 100644 --- a/dashboard/src/pages/features/erd/meta/MetaGraph.tsx +++ b/dashboard/src/pages/features/erd/meta/MetaGraph.tsx @@ -1,5 +1,5 @@ import dagre from '@dagrejs/dagre' -import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { FC, useCallback, useEffect, useMemo, useState } from 'react' import '../../../../styles/flow.css' import ReactFlow, { Background, @@ -22,22 +22,23 @@ import { CgMaximizeAlt } from 'react-icons/cg' import { TbArrowsMinimize } from 'react-icons/tb' import { TableNode } from '../TableNode' import { MetaTableDrawer } from '../../TableDrawer/MetaTableDrawer' -import { toPng } from 'html-to-image' -import { BsDownload } from 'react-icons/bs' +import { Button } from '@/components/ui/button' +import { DownloadIcon } from '@radix-ui/react-icons' // ReactFlow is scaling everything by the factor of 2 export const NODE_WIDTH = 320 export const NODE_ROW_HEIGHT = 40 -export const MetaGraph = ({ tables, relationships, setDoctypes, doctypes }: { +export const MetaGraph = ({ tables, relationships, setDoctypes, doctypes, flowRef }: { tables: PostgresTable[] relationships: PostgresRelationship[] setDoctypes: React.Dispatch> doctypes: string[] + flowRef: React.MutableRefObject }) => { return ( - + ) } @@ -172,7 +173,8 @@ const TablesGraph: FC<{ string[] >> doctypes: string[] -}> = ({ tables, relationships, setDoctypes }) => { + flowRef: React.MutableRefObject +}> = ({ tables, relationships, setDoctypes, flowRef }) => { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [fullscreenOn, setFullScreen] = useState(false); @@ -299,8 +301,6 @@ const TablesGraph: FC<{ }, [tables, relationships, setNodes, setEdges, reactFlowInstance]) - const flowRef = useRef(null) - return ( <>
        @@ -341,37 +341,26 @@ const TablesGraph: FC<{ {!fullscreenOn && } {fullscreenOn && } - { - if (flowRef.current === null) return - toPng(flowRef.current, { - filter: node => !( - node?.classList?.contains('react-flow__minimap') || - node?.classList?.contains('react-flow__controls') - ), - }).then(dataUrl => { - const a = document.createElement('a'); - a.setAttribute('download', 'reactflow.png'); - a.setAttribute('href', dataUrl); - a.click(); - }); - }}> - - -
        +
        -
        Table
        +
        Table
        -
        Child Table
        +
        Child Table
        -
        Custom Field
        +
        Custom Field
        +
        + +
        setSelectedDoctype(null)} doctype={selectedDoctype ?? ''} key={selectedDoctype} />