Skip to content

Commit 4ed97b3

Browse files
kevinkim-ogppregnantboy
kevinkim-ogp
and
pregnantboy
authored
PLU-500: Pipe name is squished in smaller browsers / mobile view (#1203)
## Problem UI issue where pipe name is squished in smaller browsers / mobile view AND input is very small when in edit mode. <img width="429" height="152" alt="Screenshot 2025-09-10 at 5 26 08 PM" src="https://github.com/user-attachments/assets/cafd466e-fc22-47e2-9885-96a1abe6d912" /> <img width="389" height="115" alt="Screenshot 2025-09-10 at 5 26 21 PM" src="https://github.com/user-attachments/assets/11536db9-cb37-412a-b740-52f67fec5187" /> <img width="448" height="199" alt="Screenshot 2025-09-10 at 5 26 54 PM" src="https://github.com/user-attachments/assets/c23d758a-76d5-4b25-9b35-5e41df258b8c" /> ## Solution Fixed issue with input in edit mode. <img width="760" height="137" alt="Screenshot 2025-09-10 at 5 28 53 PM" src="https://github.com/user-attachments/assets/374000b0-6691-4422-8305-a285fdbc8e1c" /> <img width="760" height="152" alt="Screenshot 2025-09-10 at 5 29 02 PM" src="https://github.com/user-attachments/assets/87c619c2-eac7-479d-8df7-934342c5042d" /> Introduced a Menu item similar to Tiles for smaller browsers / mobile view. <img width="375" height="226" alt="Screenshot 2025-09-10 at 5 41 34 PM" src="https://github.com/user-attachments/assets/ef0f183f-c677-464b-aa9b-cebb3fe13491" /> <img width="372" height="199" alt="Screenshot 2025-09-10 at 5 41 54 PM" src="https://github.com/user-attachments/assets/a0d3ae7b-72bf-49bb-84eb-b95597cecad6" /> ## Tests - [ ] Can rename pipe - [ ] Can publish / unpublish pipe - [ ] Pipe name input does not overflow in small screens - [ ] Buttons still work in normal browser - [ ] Guide button links to guide - [ ] Settings button links to settings - [ ] Warning is shown if there are unsaved changes - [ ] Publish / unpublish works in the menu - [ ] Warning is shown if there are unsaved changes - [ ] Menu appears in small screens - [ ] Guide button links to guide - [ ] Settings button links to settings - [ ] Warning is shown if there are unsaved changes - [ ] Publish / unpublish works in the menu - [ ] Warning is shown if there are unsaved changes --------- Co-authored-by: Ian Chen <[email protected]>
1 parent 40eb6e7 commit 4ed97b3

File tree

7 files changed

+310
-180
lines changed

7 files changed

+310
-180
lines changed

‎packages/frontend/src/components/EditableInput/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface EditableInputProps {
99
onSave: (value: string) => Promise<void>
1010
readOnly?: boolean
1111
maxLength?: number
12-
width?: string | string[]
12+
maxWidth?: string | string[]
1313
editModeWrapper?: (children: React.ReactNode) => React.ReactNode
1414
readOnlyWrapper?: (children: React.ReactNode) => React.ReactNode
1515
componentWrapper?: (children: React.ReactNode) => React.ReactNode
@@ -22,7 +22,7 @@ export default function EditableInput({
2222
onSave,
2323
readOnly = false,
2424
maxLength = 64,
25-
width = ['100%', '300px', '400px', '500px'],
25+
maxWidth = ['100%', '300px', '400px', '500px'],
2626
editModeWrapper,
2727
readOnlyWrapper,
2828
componentWrapper,
@@ -68,7 +68,7 @@ export default function EditableInput({
6868
<Flex width="100%">
6969
<Input
7070
autoFocus
71-
w={width}
71+
w={maxWidth}
7272
maxLength={maxLength}
7373
variant="flushed"
7474
value={inputValue}
@@ -108,12 +108,12 @@ export default function EditableInput({
108108
}
109109
}}
110110
whiteSpace="nowrap"
111-
maxW={isMobile ? '80%' : '100%'}
112111
>
113112
<Text
114113
textOverflow="ellipsis"
115114
overflow="hidden"
116-
w={isMobile ? width : 'auto'}
115+
maxW={maxWidth}
116+
width="auto"
117117
>
118118
{initialValue}
119119
</Text>

‎packages/frontend/src/components/Editor/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const editorStyles = {
88
overflowX: 'hidden' as FlexProps['overflowX'],
99
justifyContent: 'center',
1010
pos: 'relative' as FlexProps['pos'],
11+
paddingX: 4,
1112
},
1213
stepHeaderContainer: {
1314
display: 'block',

‎packages/frontend/src/components/EditorLayout/EditorToolbar.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { IFlow } from '@plumber/types'
2+
3+
import { BiCog, BiInfoCircle } from 'react-icons/bi'
4+
import { HiOutlineDotsVertical } from 'react-icons/hi'
5+
import { Link } from 'react-router-dom'
6+
import { Hide, HStack, MenuButton, MenuList, Show } from '@chakra-ui/react'
7+
import {
8+
Button,
9+
IconButton,
10+
Menu,
11+
TouchableTooltip,
12+
} from '@opengovsg/design-system-react'
13+
14+
import * as URLS from '@/config/urls'
15+
16+
import PublishButton from './PublishButton'
17+
18+
const GuideItem = ({ type }: { type: 'icon' | 'button' }) => {
19+
if (type === 'button') {
20+
return (
21+
<Button
22+
variant="clear"
23+
aria-label="guide"
24+
colorScheme="secondary"
25+
target="_blank"
26+
as={Link}
27+
to={URLS.GUIDE_LINK}
28+
w="100%"
29+
>
30+
Guide
31+
</Button>
32+
)
33+
}
34+
return (
35+
<TouchableTooltip label="Guide" aria-label="guide tooltip">
36+
<IconButton
37+
as={Link}
38+
to={URLS.GUIDE_LINK}
39+
target="_blank"
40+
variant="clear"
41+
aria-label="guide"
42+
icon={<BiInfoCircle />}
43+
colorScheme="secondary"
44+
_hover={{
45+
color: 'primary.500',
46+
bg: 'interaction.muted.main.hover',
47+
}}
48+
/>
49+
</TouchableTooltip>
50+
)
51+
}
52+
53+
const SettingsItem = ({
54+
flowId,
55+
type,
56+
setLeaveToUrl,
57+
handleWarnOnLeave,
58+
}: {
59+
flowId: string
60+
type: 'icon' | 'button'
61+
setLeaveToUrl: (url: string) => void
62+
handleWarnOnLeave: (e: React.MouseEvent<HTMLButtonElement>) => void
63+
}) => {
64+
if (type === 'button') {
65+
return (
66+
<Button
67+
variant="clear"
68+
aria-label="settings"
69+
colorScheme="secondary"
70+
as={Link}
71+
to={URLS.FLOW_EDITOR_NOTIFICATIONS(flowId)}
72+
w="100%"
73+
onClick={(e) => {
74+
setLeaveToUrl(URLS.FLOW_EDITOR_NOTIFICATIONS(flowId))
75+
handleWarnOnLeave(e)
76+
}}
77+
>
78+
Settings
79+
</Button>
80+
)
81+
}
82+
return (
83+
<TouchableTooltip label="Settings" aria-label="settings tooltip">
84+
<IconButton
85+
as={Link}
86+
to={URLS.FLOW_EDITOR_NOTIFICATIONS(flowId)}
87+
variant="clear"
88+
aria-label="settings"
89+
icon={<BiCog />}
90+
colorScheme="secondary"
91+
_hover={{
92+
color: 'primary.500',
93+
bg: 'interaction.muted.main.hover',
94+
}}
95+
onClick={(e) => {
96+
setLeaveToUrl(URLS.FLOW_EDITOR_NOTIFICATIONS(flowId))
97+
handleWarnOnLeave(e)
98+
}}
99+
/>
100+
</TouchableTooltip>
101+
)
102+
}
103+
104+
interface EditorToolbarProps {
105+
flowId: string
106+
flow: IFlow
107+
isFlowIncomplete: boolean
108+
hasFlowTransfer: boolean
109+
loading: boolean
110+
shouldWarnOnLeave: boolean
111+
setShouldWarnOnPublish: (shouldWarnOnPublish: boolean) => void
112+
onFlowStatusUpdate: (active: boolean) => void
113+
setLeaveToUrl: (url: string) => void
114+
handleWarnOnLeave: (e: React.MouseEvent<HTMLButtonElement>) => void
115+
}
116+
117+
export default function EditorToolbar(props: EditorToolbarProps) {
118+
return (
119+
<>
120+
<Show above="md">
121+
<HStack>
122+
<GuideItem type="icon" />
123+
<SettingsItem {...props} type="icon" />
124+
<PublishButton {...props} />
125+
</HStack>
126+
</Show>
127+
<Hide above="md">
128+
<Menu>
129+
<MenuButton
130+
as={IconButton}
131+
colorScheme="secondary"
132+
variant="clear"
133+
icon={<HiOutlineDotsVertical />}
134+
/>
135+
<MenuList
136+
display="flex"
137+
flexDir="column"
138+
borderRadius="md"
139+
alignItems="start"
140+
gap={2}
141+
px={2}
142+
>
143+
<GuideItem type="button" />
144+
<SettingsItem {...props} type="button" />
145+
<PublishButton {...props} />
146+
</MenuList>
147+
</Menu>
148+
</Hide>
149+
</>
150+
)
151+
}

‎packages/frontend/src/components/EditorLayout/PublishButton.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { IFlow } from '@plumber/types'
2+
3+
import { Skeleton, Spinner, Text } from '@chakra-ui/react'
4+
import { Button, TouchableTooltip } from '@opengovsg/design-system-react'
5+
6+
export default function PublishButton({
7+
flow,
8+
hasFlowTransfer,
9+
isFlowIncomplete,
10+
loading,
11+
shouldWarnOnLeave,
12+
handleWarnOnLeave,
13+
onFlowStatusUpdate,
14+
setShouldWarnOnPublish,
15+
}: {
16+
flow: IFlow
17+
hasFlowTransfer: boolean
18+
isFlowIncomplete: boolean
19+
loading: boolean
20+
shouldWarnOnLeave: boolean
21+
handleWarnOnLeave: (e: React.MouseEvent<HTMLButtonElement>) => void
22+
onFlowStatusUpdate: (active: boolean) => void
23+
setShouldWarnOnPublish: (shouldWarnOnPublish: boolean) => void
24+
}) {
25+
return (
26+
<TouchableTooltip
27+
label={
28+
isFlowIncomplete
29+
? 'Set up for all steps must be completed before you can publish your pipe'
30+
: hasFlowTransfer
31+
? 'You cannot publish a pipe with a pending transfer'
32+
: ''
33+
}
34+
wrapperStyles={{ width: '100%' }}
35+
>
36+
<Button
37+
isDisabled={isFlowIncomplete || hasFlowTransfer}
38+
isLoading={loading}
39+
spinner={<Spinner fontSize={24} />}
40+
size="sm"
41+
minW="120px" // set this to avoid button width changing on publish/unpublish
42+
onClick={(e) => {
43+
if (shouldWarnOnLeave) {
44+
setShouldWarnOnPublish(true)
45+
handleWarnOnLeave(e)
46+
} else {
47+
onFlowStatusUpdate(!flow.active)
48+
}
49+
}}
50+
>
51+
<Skeleton isLoaded={!loading}>
52+
<Text textStyle="subhead-1">
53+
{flow?.active ? 'Unpublish' : 'Publish'}
54+
</Text>
55+
</Skeleton>
56+
</Button>
57+
</TouchableTooltip>
58+
)
59+
}

0 commit comments

Comments
 (0)