From aa40ed7700a14f0027e46fdb4caee4ec0b302ac8 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 2 Aug 2023 11:52:12 +0800 Subject: [PATCH] Add disabled and empty state for branch management page --- .../BranchManagement/BranchManagement.tsx | 47 +++++++++++++++++-- .../EnableBranchingButton.tsx | 17 +++---- studio/state/app.ts | 14 ++++++ 3 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 studio/state/app.ts diff --git a/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/studio/components/interfaces/BranchManagement/BranchManagement.tsx index e77266525d0..e2381426677 100644 --- a/studio/components/interfaces/BranchManagement/BranchManagement.tsx +++ b/studio/components/interfaces/BranchManagement/BranchManagement.tsx @@ -1,4 +1,5 @@ import { partition } from 'lodash' +import Link from 'next/link' import { useRouter } from 'next/router' import { useState } from 'react' import { @@ -7,6 +8,7 @@ import { Alert_Shadcn_, Button, IconAlertTriangle, + IconGitBranch, IconSearch, Input, Modal, @@ -14,19 +16,20 @@ import { import { useParams } from 'common' import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' +import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' import AlertError from 'components/ui/AlertError' +import ConfirmationModal from 'components/ui/ConfirmationModal' import TextConfirmModal from 'components/ui/Modals/TextConfirmModal' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation' +import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation' import { Branch, useBranchesQuery } from 'data/branches/branches-query' import { useSelectedProject, useStore } from 'hooks' import { MainBranchPanel } from './BranchPanels' import CreateBranchSidePanel from './CreateBranchSidePanel' import PreviewBranches from './PreviewBranches' import PullRequests from './PullRequests' -import ConfirmationModal from 'components/ui/ConfirmationModal' -import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation' -import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' +import { useAppUiStateSnapshot } from 'state/app' const BranchManagement = () => { const { ui } = useStore() @@ -34,11 +37,15 @@ const BranchManagement = () => { const { ref } = useParams() const projectDetails = useSelectedProject() + // [Joshen TODO] To be dynamic + const isBranchingAllowed = true + const isBranch = projectDetails?.parent_project_ref !== undefined const hasBranchEnabled = projectDetails?.has_branch_enabled const projectRef = projectDetails !== undefined ? (isBranch ? projectDetails.parent_project_ref : ref) : undefined + const snap = useAppUiStateSnapshot() const [showCreateBranch, setShowCreateBranch] = useState(false) const [showDisableBranching, setShowDisableBranching] = useState(false) const [selectedBranchToDelete, setSelectedBranchToDelete] = useState() @@ -86,7 +93,39 @@ const BranchManagement = () => { if (!hasBranchEnabled) { // [Joshen] Some empty state here - return World + return ( + +

+ {isBranchingAllowed + ? 'Create preview branches to experiment changes to your database schema in a safe, non-destructible environment.' + : "Register for early access and you'll be contacted by email when your organization is enrolled in database branching."} +

+ {isBranchingAllowed ? ( +
+ +
+ ) : ( +
+ + + + + + + + + + +
+ )} + + ) } return ( diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx index 3e3d77e05b2..a828a715e4a 100644 --- a/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx +++ b/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx @@ -11,19 +11,20 @@ import { IntegrationName } from 'data/integrations/integrations.types' import { useBranchCreateMutation } from 'data/branches/branch-create-mutation' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import AlertError from 'components/ui/AlertError' +import { useAppUiStateSnapshot } from 'state/app' const EnableBranchingButton = () => { const { ui } = useStore() const { ref } = useParams() - const [open, setOpen] = useState(false) const selectedOrg = useSelectedOrganization() + const snap = useAppUiStateSnapshot() const [selectedBranch, setSelectedBranch] = useState() const [addConnectionType, setAddConnectionType] = useState() useEffect(() => { - if (open) setSelectedBranch(undefined) - }, [open]) + if (snap.showEnableBranchingModal) setSelectedBranch(undefined) + }, [snap.showEnableBranchingModal]) const { data: integrations, @@ -38,11 +39,11 @@ const EnableBranchingButton = () => { const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({ onSuccess: () => { ui.setNotification({ category: 'success', message: `Successfully created new branch` }) - setOpen(false) + snap.setShowEnableBranchingModal(false) }, }) - // [Joshen] To be dynamic + // [Joshen TODO] To be dynamic const isBranchingAllowed = true const githubIntegration = integrations?.find( @@ -74,14 +75,14 @@ const EnableBranchingButton = () => { setOpen(false)} + visible={snap.showEnableBranchingModal} + onCancel={() => snap.setShowEnableBranchingModal(false)} className="!bg" size="medium" > diff --git a/studio/state/app.ts b/studio/state/app.ts new file mode 100644 index 00000000000..f6f7d9ab9a9 --- /dev/null +++ b/studio/state/app.ts @@ -0,0 +1,14 @@ +import { proxy, snapshot, useSnapshot } from 'valtio' + +export const appUiState = proxy({ + showEnableBranchingModal: false, + + setShowEnableBranchingModal: (value: boolean) => { + appUiState.showEnableBranchingModal = value + }, +}) + +export const getAppUiStateSnapshot = () => snapshot(appUiState) + +export const useAppUiStateSnapshot = (options?: Parameters[1]) => + useSnapshot(appUiState, options)