Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(url): show full urls everywhere in UI #942

Merged
merged 8 commits into from
Dec 20, 2024
Merged

fix(url): show full urls everywhere in UI #942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
79d834d
chore: add full page url and use grid
seaerchin Dec 19, 2024
ff9713c
chore: add query for full permalink
seaerchin Dec 19, 2024
bb6f851
chore: use existing watch
seaerchin Dec 19, 2024
cb69142
fix: use full permalink
seaerchin Dec 19, 2024
4cf02f0
feat: suspend link
seaerchin Dec 19, 2024
0a63487
fix: use correct function for button
seaerchin Dec 19, 2024
1e910c2
fix: conditional fetch if root folder
seaerchin Dec 20, 2024
a48b24d
fix: remove double flicker
seaerchin Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 38 additions & 9 deletions apps/studio/src/features/dashboard/components/FolderSettingsModal/FolderSettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Suspense } from "react"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More on the UI - should we keep the existing look but add the parent path prefix as part of the gray box?

Screenshot 2024-12-19 at 11.30.42 PM.png

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

had a brief discussion with Chin and it seems like it will be too long, especially when considering the parent permalink

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually the figma design is to have the infobox and not this, refer to the figma here
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea that's fine. What I felt helped was having the <example.com>/ or the site domain in front

For now a simple fix would be to keep the your-site.gov.sg/ in front of the permalink

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we shuold change everything at once but idt that should be a blocker here

import {
Box,
chakra,
FormControl,
FormHelperText,
FormLabel,
Expand All @@ -14,6 +15,7 @@ import {
ModalHeader,
ModalOverlay,
Skeleton,
Text,
VStack,
} from "@chakra-ui/react"
import {
Expand All @@ -40,6 +42,29 @@ import {
folderSettingsModalAtom,
} from "../../atoms"

interface SuspendablePermalinkProps {
title: string
folderId: string
}
const SuspendablePermalink = ({
folderId,
title,
}: SuspendablePermalinkProps) => {
const [{ fullPermalink }] =
trpc.resource.getWithFullPermalink.useSuspenseQuery({
resourceId: folderId ? String(folderId) : "",
})

return (
<Text textStyle="subhead-2" overflow="hidden">
<chakra.span color="base.content.medium">
{fullPermalink.split("/").slice(0, -1).join("/")}
</chakra.span>
/{title}
</Text>
)
}

export const FolderSettingsModal = () => {
const { folderId } = useAtomValue(folderSettingsModalAtom)
const { siteId } = useQueryParse(sitePageSchema)
Expand Down Expand Up @@ -172,15 +197,19 @@ const SuspendableModalContent = ({
{errors.permalink?.message ? (
<FormErrorMessage>{errors.permalink.message}</FormErrorMessage>
) : (
<Box
mt="0.5rem"
py="0.5rem"
px="0.75rem"
bg="interaction.support.disabled"
>
<Icon mr="0.5rem" as={BiLink} />
{permalink}
</Box>
<Suspense fallback={<Skeleton w="100%" h="2rem" mt="0.5rem" />}>
<Box
mt="0.5rem"
py="0.5rem"
px="0.75rem"
bg="interaction.support.disabled"
display="flex"
alignItems="center"
>
<Icon mr="0.5rem" as={BiLink} />
<SuspendablePermalink title={title} folderId={folderId} />
</Box>
</Suspense>
)}

<FormHelperText mt="0.5rem" color="base.content.medium">
Expand Down
4 changes: 2 additions & 2 deletions apps/studio/src/features/dashboard/components/PageSettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,8 @@ const PageSettingsModalContent = ({
</ModalBody>

<ModalFooter>
<Button mr={3} variant="clear" onClick={onSubmit}>
Back to editing
<Button mr={3} variant="clear" onClick={onClose}>
Close
</Button>
<Button onClick={onSubmit}>Publish changes immediately</Button>
</ModalFooter>
Expand Down
7 changes: 6 additions & 1 deletion ...ing-experience/components/CreateCollectionPageModal/CreateCollectionPageWizardContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ const useCreateCollectionPageWizardContext = ({
})

const [type, title] = formMethods.watch(["type", "title"])
const { data, isLoading: isPermalinkLoading } =
trpc.resource.getWithFullPermalink.useQuery({
resourceId: collectionId ? String(collectionId) : "",
})

const pagePreviewJson: IsomerSchema = useMemo(() => {
const jsonPreview =
Expand Down Expand Up @@ -142,12 +146,13 @@ const useCreateCollectionPageWizardContext = ({
currentStep,
formMethods,
handleCreatePage,
isLoading,
isLoading: isLoading || isPermalinkLoading,
handleNextToDetailScreen,
handleBackToTypeScreen,
pagePreviewJson,
onClose,
currentType: type,
fullPermalink: data?.fullPermalink || "",
}
}

Expand Down
72 changes: 41 additions & 31 deletions ...io/src/features/editing-experience/components/CreateCollectionPageModal/DetailsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { useEffect } from "react"
import {
chakra,
Flex,
FormControl,
FormHelperText,
FormLabel,
Input,
InputGroup,
InputLeftAddon,
ListItem,
ModalBody,
ModalHeader,
Expand All @@ -15,9 +14,14 @@ import {
UnorderedList,
Wrap,
} from "@chakra-ui/react"
import { Button, FormErrorMessage } from "@opengovsg/design-system-react"
import {
Button,
FormErrorMessage,
Infobox,
} from "@opengovsg/design-system-react"
import { ResourceType } from "~prisma/generated/generatedEnums"
import { Controller } from "react-hook-form"
import { BiLink } from "react-icons/bi"

import { MAX_PAGE_URL_LENGTH, MAX_TITLE_LENGTH } from "~/schemas/page"
import { AppGrid } from "~/templates/AppGrid"
Expand All @@ -40,6 +44,7 @@ export const CreateCollectionPageDetailsScreen = () => {
handleBackToTypeScreen,
handleCreatePage,
isLoading,
fullPermalink,
} = useCreateCollectionPageWizard()

const {
Expand Down Expand Up @@ -179,34 +184,39 @@ export const CreateCollectionPageDetailsScreen = () => {
URL should be short and simple
</FormHelperText>
</FormLabel>
<InputGroup>
<InputLeftAddon
bg="interaction.support.disabled"
color="base.divider.strong"
>
your-site.gov.sg/
</InputLeftAddon>
<Controller
control={control}
name="permalink"
render={({ field: { onChange, ...field } }) => (
<Input
isDisabled={type === ResourceType.CollectionLink}
borderLeftRadius={0}
placeholder="URL will be autopopulated if left untouched"
{...field}
onChange={(e) => {
onChange(
generatePageUrl(e.target.value).slice(
0,
MAX_PAGE_URL_LENGTH,
),
)
}}
/>
)}
/>
</InputGroup>
<Controller
control={control}
name="permalink"
render={({ field: { onChange, ...field } }) => (
<Input
isDisabled={type === ResourceType.CollectionLink}
borderLeftRadius={0}
placeholder="URL will be autopopulated if left untouched"
{...field}
onChange={(e) => {
onChange(
generatePageUrl(e.target.value).slice(
0,
MAX_PAGE_URL_LENGTH,
),
)
}}
/>
)}
/>
<Infobox
my="0.5rem"
icon={<BiLink />}
variant="info-secondary"
size="sm"
>
<Text textStyle="subhead-2" overflow="hidden">
<chakra.span color="base.content.medium">
{fullPermalink}
</chakra.span>
/{url}
</Text>
</Infobox>

{errors.permalink?.message ? (
<FormErrorMessage>
Expand Down
12 changes: 10 additions & 2 deletions ...io/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ const useCreatePageWizardContext = ({
})

const [layout, title] = formMethods.watch(["layout", "title"])
const { data, isLoading: isPermalinkLoading } =
trpc.resource.getWithFullPermalink.useQuery(
{
resourceId: folderId ? String(folderId) : "",
},
{ enabled: !!folderId },
)

const layoutPreviewJson: IsomerSchema = useMemo(() => {
const jsonPreview =
Expand All @@ -84,7 +91,7 @@ const useCreatePageWizardContext = ({
await utils.resource.listWithoutRoot.invalidate()
onClose()
},
// TOOD: Error handling
// TODO: Error handling
})

const handleCreatePage = formMethods.handleSubmit((values) => {
Expand Down Expand Up @@ -126,12 +133,13 @@ const useCreatePageWizardContext = ({
currentStep,
formMethods,
handleCreatePage,
isLoading,
isLoading: isLoading || isPermalinkLoading,
handleNextToDetailScreen,
handleBackToLayoutScreen,
layoutPreviewJson,
onClose,
currentLayout: layout,
fullPermalink: !!folderId ? data?.fullPermalink : "",
}
}

Expand Down
84 changes: 49 additions & 35 deletions apps/studio/src/features/editing-experience/components/CreatePageModal/DetailsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import { useEffect } from "react"
import {
chakra,
Flex,
FormControl,
FormHelperText,
FormLabel,
Input,
InputGroup,
InputLeftAddon,
ModalBody,
ModalHeader,
Stack,
Text,
Wrap,
} from "@chakra-ui/react"
import { Button, FormErrorMessage } from "@opengovsg/design-system-react"
import {
Button,
FormErrorMessage,
Infobox,
} from "@opengovsg/design-system-react"
import { Controller } from "react-hook-form"
import { BiLink } from "react-icons/bi"

import { MAX_PAGE_URL_LENGTH, MAX_TITLE_LENGTH } from "~/schemas/page"
import { AppGrid } from "~/templates/AppGrid"
import { generateResourceUrl } from "../utils"
import { useCreatePageWizard } from "./CreatePageWizardContext"
import { PreviewLayout } from "./PreviewLayout"
Expand All @@ -28,6 +33,7 @@ export const CreatePageDetailsScreen = () => {
handleBackToLayoutScreen,
handleCreatePage,
isLoading,
fullPermalink,
} = useCreatePageWizard()

const {
Expand Down Expand Up @@ -101,8 +107,8 @@ export const CreatePageDetailsScreen = () => {
</Stack>
</ModalHeader>
<ModalBody p={0} overflow="hidden" bg="white">
<Flex height="100%">
<Stack height={0} minH="100%" overflow="auto">
<AppGrid height="100%" px={0}>
<Stack gridColumn="1 / 5" height={0} minH="100%" overflow="auto">
<Stack gap="2rem" px="3rem" pb="2rem" pt="10vh">
<Stack>
<Text as="h2" textStyle="h4">
Expand Down Expand Up @@ -142,35 +148,41 @@ export const CreatePageDetailsScreen = () => {
URL should be short and simple
</FormHelperText>
</FormLabel>
<InputGroup>
<InputLeftAddon
bg="interaction.support.disabled"
color="base.divider.strong"
>
your-site.gov.sg/
</InputLeftAddon>
<Controller
control={control}
name="permalink"
render={({ field: { onChange, ...field } }) => (
<Input
maxLength={MAX_PAGE_URL_LENGTH}
borderLeftRadius={0}
placeholder="URL will be autopopulated if left untouched"
{...field}
onChange={(e) => {
onChange(
generateResourceUrl(e.target.value).slice(
0,
MAX_PAGE_URL_LENGTH,
),
)
}}
/>
)}
/>
</InputGroup>
<Controller
control={control}
name="permalink"
render={({ field: { onChange, ...field } }) => (
<Input
minW="23rem"
maxLength={MAX_PAGE_URL_LENGTH}
borderLeftRadius={0}
placeholder="URL will be autopopulated if left untouched"
{...field}
onChange={(e) => {
onChange(
generateResourceUrl(e.target.value).slice(
0,
MAX_PAGE_URL_LENGTH,
),
)
}}
/>
)}
/>

<Infobox
my="0.5rem"
icon={<BiLink />}
variant="info-secondary"
size="sm"
>
<Text textStyle="subhead-2" overflow="hidden">
<chakra.span color="base.content.medium">
{fullPermalink}
</chakra.span>
/{url}
</Text>
</Infobox>
{errors.permalink?.message ? (
<FormErrorMessage>
{errors.permalink.message}
Expand All @@ -184,8 +196,10 @@ export const CreatePageDetailsScreen = () => {
</Stack>
</Stack>
</Stack>
<PreviewLayout />
</Flex>
<Flex gridColumn="5 / 13">
<PreviewLayout />
</Flex>
</AppGrid>
</ModalBody>
</>
)
Expand Down
Loading