conditional rendering (#7704)

This commit is contained in:
Jack Kavanagh 2024-07-12 12:44:23 +02:00 committed by GitHub
parent 895d45f51e
commit 5a370a7174
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 30 deletions

View File

@ -153,19 +153,21 @@ export const MockServerSettingsModal = ({ onClose }: { onClose: () => void }) =>
To learn more about self hosting. <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className='underline'>Click here</Link>
</span>
</div>
<TextField
name="mockServerUrl"
className={`group relative flex-1 flex flex-col gap-2 ${serverType === 'cloud' ? 'disabled' : ''}`}
>
<Label className='text-sm text-[--hl]'>
Self-hosted mock server URL
</Label>
<Input
disabled={serverType === 'cloud'}
placeholder={serverType === 'cloud' ? '' : 'https://example.com'}
className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
/>
</TextField>
{!isSelfHostedDisabled && (
<TextField
name="mockServerUrl"
className={`group relative flex-1 flex flex-col gap-2 ${serverType === 'cloud' ? 'disabled' : ''}`}
>
<Label className='text-sm text-[--hl]'>
Self-hosted mock server URL
</Label>
<Input
disabled={serverType === 'cloud'}
placeholder={serverType === 'cloud' ? '' : 'https://example.com'}
className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
/>
</TextField>
)}
<div className="flex justify-end gap-2 items-center">
<div className='flex items-center gap-2'>
<Button

View File

@ -26,6 +26,8 @@ interface Props {
export const WorkspaceSettingsModal = ({ workspace, mockServer, onClose }: Props) => {
const isScratchpadWorkspace = isScratchpad(workspace);
const { currentPlan } = useRouteLoaderData('/organization') as OrganizationLoaderData;
const isEnterprise = currentPlan?.type.includes('enterprise');
const isSelfHostedDisabled = !isEnterprise;
const activeWorkspaceName = workspace.name;
@ -129,7 +131,6 @@ export const WorkspaceSettingsModal = ({ workspace, mockServer, onClose }: Props
name="mockServerType"
defaultValue={mockServer?.useInsomniaCloud ? 'cloud' : 'self-hosted'}
onChange={value => {
const isEnterprise = currentPlan?.type.includes('enterprise');
if (!isEnterprise && value === 'self-hosted') {
showModal(AlertModal, {
title: 'Upgrade required',
@ -177,22 +178,24 @@ export const WorkspaceSettingsModal = ({ workspace, mockServer, onClose }: Props
To learn more about self hosting. <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className='underline'>Click here</Link>
</span>
</div>
<TextField
autoFocus
name="name"
defaultValue={mockServer?.url || ''}
className={`group relative flex-1 flex flex-col gap-2 ${mockServer?.useInsomniaCloud ? 'disabled' : ''}`}
>
<Label className='text-sm text-[--hl]'>
Self-hosted mock server URL
</Label>
<Input
disabled={mockServer?.useInsomniaCloud}
placeholder={mockServer?.useInsomniaCloud ? '' : 'https://example.com'}
onChange={e => mockServer && mockServerPatcher(mockServer._id, { url: e.target.value })}
className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
/>
</TextField>
{!isSelfHostedDisabled && (
<TextField
autoFocus
name="name"
defaultValue={mockServer?.url || ''}
className={`group relative flex-1 flex flex-col gap-2 ${mockServer?.useInsomniaCloud ? 'disabled' : ''}`}
>
<Label className='text-sm text-[--hl]'>
Self-hosted mock server URL
</Label>
<Input
disabled={mockServer?.useInsomniaCloud}
placeholder={mockServer?.useInsomniaCloud ? '' : 'https://example.com'}
onChange={e => mockServer && mockServerPatcher(mockServer._id, { url: e.target.value })}
className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
/>
</TextField>
)}
</>
)}
</div>