From bc8f71fab52cfdc6fd5608e81d903e4dc2af09f3 Mon Sep 17 00:00:00 2001 From: Nabhag Motivaras <65061890+Nabhag8848@users.noreply.github.com> Date: Thu, 10 Apr 2025 20:32:55 +0530 Subject: [PATCH] wip: api playground fixes (#11345) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # ISSUE - closes #10926 - [x] fix paddings - [x] fix page change to playground animation - [x] fixes multiple skeletons issues --- - Also was showing multiple skeletons on reloading, **before**: https://github.com/user-attachments/assets/0cdef639-c121-4cbb-b056-b89e60862c54 --------- Co-authored-by: ehconitin Co-authored-by: Félix Malfait --- .../components/GraphQLPlayground.tsx | 31 ++++++++++----- .../playground/components/RestPlayground.tsx | 14 +++++++ .../components/FullScreenContainer.tsx | 39 +++++++------------ .../layout/page/components/DefaultLayout.tsx | 16 ++++---- .../ui/layout/page/components/PageHeader.tsx | 4 +- 5 files changed, 62 insertions(+), 42 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx index 0af04089f..ee4a56b86 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx @@ -1,5 +1,6 @@ import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState'; import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas'; +import styled from '@emotion/styled'; import { explorerPlugin } from '@graphiql/plugin-explorer'; import '@graphiql/plugin-explorer/dist/style.css'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; @@ -7,8 +8,8 @@ import { GraphiQL } from 'graphiql'; import 'graphiql/graphiql.css'; import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { ThemeContext } from 'twenty-ui/theme'; +import { REACT_APP_SERVER_BASE_URL } from '~/config'; type GraphQLPlaygroundProps = { onError(): void; @@ -20,6 +21,16 @@ export const schemaToPath = { [PlaygroundSchemas.METADATA]: 'metadata', }; +const StyledGraphiQLContainer = styled.div` + height: 100%; + width: 100%; + + .graphiql-container { + background: ${({ theme }) => theme.background.primary}; + border-radius: ${({ theme }) => theme.border.radius.md}; + } +`; + export const GraphQLPlayground = ({ onError, schema, @@ -43,13 +54,15 @@ export const GraphQLPlayground = ({ }); return ( - + + + ); }; diff --git a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx index 4ef48160a..4407350d8 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx @@ -10,9 +10,23 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; const StyledContainer = styled.div` + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.md}; height: 100%; overflow-y: scroll; width: 100%; + + .scalar-api-reference { + --scalar-background-1: ${({ theme }) => theme.background.primary}; + --scalar-background-2: ${({ theme }) => theme.background.secondary}; + --scalar-background-3: ${({ theme }) => theme.background.tertiary}; + --scalar-background-accent: ${({ theme }) => + theme.background.transparent.lighter}; + --scalar-border-color: ${({ theme }) => theme.border.color.medium}; + --scalar-color-1: ${({ theme }) => theme.font.color.primary}; + --scalar-color-2: ${({ theme }) => theme.font.color.secondary}; + --scalar-color-3: ${({ theme }) => theme.font.color.tertiary}; + } `; const ApiReferenceReact = lazy(() => diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx index 32ef91f6d..2974c70b1 100644 --- a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx @@ -7,9 +7,6 @@ import { BreadcrumbProps, } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import styled from '@emotion/styled'; -import { useLingui } from '@lingui/react/macro'; -import { IconButton } from 'twenty-ui/input'; -import { IconX } from 'twenty-ui/display'; import { useIsMobile } from 'twenty-ui/utilities'; type FullScreenContainerProps = { @@ -19,19 +16,22 @@ type FullScreenContainerProps = { }; const StyledFullScreen = styled.div` + background: ${({ theme }) => theme.background.noisy}; display: flex; flex-direction: column; - width: 100dvw; - height: 100dvh; - background: ${({ theme }) => theme.background.noisy}; + width: 100%; `; const StyledMainContainer = styled.div` - border-top: 1px solid ${({ theme }) => theme.border.color.medium}; height: calc( - 100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2)} + 100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 3)} ); - width: 100%; + padding: ${({ theme }) => + `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`}; +`; + +const StyledPageHeader = styled(PageHeader)` + padding-left: ${({ theme }) => theme.spacing(3)}; `; export const FullScreenContainer = ({ @@ -40,25 +40,14 @@ export const FullScreenContainer = ({ exitFullScreen, }: FullScreenContainerProps) => { const isMobile = useIsMobile(); - const { t } = useLingui(); - - const handleExitFullScreen = () => { - exitFullScreen(); - }; return ( - }> - - + } + hasClosePageButton={!isMobile} + onClosePage={exitFullScreen} + /> {children} ); diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index 72b57946f..571501de0 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx @@ -80,14 +80,16 @@ export const DefaultLayout = () => { void; Icon?: IconComponent; children?: ReactNode; + className?: string; }; export const PageHeader = ({ @@ -100,6 +101,7 @@ export const PageHeader = ({ onClosePage, Icon, children, + className, }: PageHeaderProps) => { const isMobile = useIsMobile(); const theme = useTheme(); @@ -108,7 +110,7 @@ export const PageHeader = ({ ); return ( - + {!isMobile && !isNavigationDrawerExpanded && (