Skip to content

Commit

Permalink
Merge pull request #5322 from Shopify/01-30-remove_all_traces_of_dev-…
Browse files Browse the repository at this point in the history
…sessions_from_dev.tsx

Remove all traces of dev-sessions from Dev.tsx
isaacroldan authored Jan 30, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 70f3a8a + f369481 commit e4e7e0f
Showing 2 changed files with 9 additions and 187 deletions.
153 changes: 0 additions & 153 deletions packages/app/src/cli/services/dev/ui/components/Dev.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {calculatePrefixColumnSize, Dev} from './Dev.js'
import {fetchAppPreviewMode} from '../../fetch.js'
import {testDeveloperPlatformClient, testUIExtension} from '../../../../models/app/app.test-data.js'
import {devSessionStatusManager} from '../../processes/dev-session-status-manager.js'
import {
getLastFrameAfterUnmount,
render,
@@ -341,7 +340,6 @@ describe('Dev', () => {
"
`)
expect(developerPreview.disable).toHaveBeenCalledOnce()
expect(testApp.developerPlatformClient.devSessionDelete).toHaveBeenCalledOnce()

// unmount so that polling is cleared after every test
renderInstance.unmount()
@@ -407,7 +405,6 @@ describe('Dev', () => {
"
`)
expect(developerPreview.disable).toHaveBeenCalledOnce()
expect(testApp.developerPlatformClient.devSessionDelete).toHaveBeenCalledOnce()

// unmount so that polling is cleared after every test
renderInstance.unmount()
@@ -976,156 +973,6 @@ describe('Dev', () => {
// unmount so that polling is cleared after every test
renderInstance.unmount()
})

test('updates UI when devSessionEnabled changes from false to true', async () => {
// Given
devSessionStatusManager.updateStatus({isReady: false})

const renderInstance = render(
<Dev
processes={[]}
abortController={new AbortController()}
previewUrl="https://shopify.com"
graphiqlUrl="https://graphiql.shopify.com"
graphiqlPort={1234}
app={{
...testApp,
canEnablePreviewMode: false,
developerPlatformClient: {
...testDeveloperPlatformClient(),
supportsDevSessions: true,
},
}}
developerPreview={developerPreview}
shopFqdn="mystore.shopify.io"
/>,
)

await waitForInputsToBeReady()

// Initial state - dev session not ready
expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toMatchInlineSnapshot(`
"
────────────────────────────────────────────────────────────────────────────────────────────────────
› Press q │ quit
Preview URL: https://shopify.com
GraphiQL URL: http://localhost:0000/graphiql
"
`)

// When dev session becomes ready
devSessionStatusManager.updateStatus({isReady: true, previewURL: 'https://shopify.com'})

// Wait for the polling interval to update the UI
await waitForContent(renderInstance, 'preview in your browser')

// Then - preview shortcut should be visible
expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toMatchInlineSnapshot(`
"
────────────────────────────────────────────────────────────────────────────────────────────────────
› Press g │ open GraphiQL (Admin API) in your browser
› Press p │ preview in your browser
› Press q │ quit
Preview URL: https://shopify.com
GraphiQL URL: http://localhost:0000/graphiql
"
`)

// unmount so that polling is cleared after every test
renderInstance.unmount()
})

test('updates preview URL when devSessionStatus provides a new URL', async () => {
// Given
const initialPreviewUrl = 'https://shopify.com'
const newPreviewUrl = 'https://my-new-preview-url.shopify.com'
devSessionStatusManager.updateStatus({isReady: true, previewURL: undefined})

const renderInstance = render(
<Dev
processes={[]}
abortController={new AbortController()}
previewUrl={initialPreviewUrl}
graphiqlUrl="https://graphiql.shopify.com"
graphiqlPort={1234}
app={{
...testApp,
developerPlatformClient: {
...testDeveloperPlatformClient(),
supportsDevSessions: true,
},
}}
developerPreview={developerPreview}
shopFqdn="mystore.shopify.io"
/>,
)

await waitForInputsToBeReady()

// Initial state should show the default preview URL
expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${initialPreviewUrl}`)

// When dev session provides a new preview URL
devSessionStatusManager.updateStatus({isReady: true, previewURL: newPreviewUrl})

// Wait for the polling interval to update the UI
await waitForContent(renderInstance, newPreviewUrl)

// Then - status message should show the new preview URL
expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${newPreviewUrl}`)

// unmount so that polling is cleared after every test
renderInstance.unmount()
})

test('opens the updated preview URL when p is pressed after URL changes', async () => {
// Given
const initialPreviewUrl = 'https://shopify.com'
const newPreviewUrl = 'https://my-new-preview-url.shopify.com'
devSessionStatusManager.updateStatus({isReady: true, previewURL: undefined})

const renderInstance = render(
<Dev
processes={[]}
abortController={new AbortController()}
previewUrl={initialPreviewUrl}
graphiqlUrl="https://graphiql.shopify.com"
graphiqlPort={1234}
app={{
...testApp,
developerPlatformClient: {
...testDeveloperPlatformClient(),
supportsDevSessions: true,
},
}}
developerPreview={developerPreview}
shopFqdn="mystore.shopify.io"
/>,
)

await waitForInputsToBeReady()

// Initial state should show the default preview URL
expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${initialPreviewUrl}`)

// When dev session provides a new preview URL
devSessionStatusManager.updateStatus({isReady: true, previewURL: newPreviewUrl})

// Wait for the polling interval to update the UI
await waitForContent(renderInstance, newPreviewUrl)

await waitForInputsToBeReady()
await sendInputAndWait(renderInstance, 100, 'p')

// Then
expect(vi.mocked(openURL)).toHaveBeenNthCalledWith(1, newPreviewUrl)

renderInstance.unmount()
})
})

describe('calculatePrefixColumnSize', () => {
43 changes: 9 additions & 34 deletions packages/app/src/cli/services/dev/ui/components/Dev.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import metadata from '../../../../metadata.js'
import {DeveloperPlatformClient} from '../../../../utilities/developer-platform-client.js'
import {ExtensionInstance} from '../../../../models/extensions/extension-instance.js'
import {devSessionStatusManager, DevSessionStatus} from '../../processes/dev-session-status-manager.js'
import {OutputProcess} from '@shopify/cli-kit/node/output'
import {ConcurrentOutput} from '@shopify/cli-kit/node/ui/components'
import {useAbortSignal} from '@shopify/cli-kit/node/ui/hooks'
@@ -59,7 +58,6 @@ const Dev: FunctionComponent<DevProps> = ({
pollingTime = 5000,
developerPreview,
isEditionWeek,
shopFqdn,
}) => {
const {canEnablePreviewMode, developmentStorePreviewEnabled} = app

@@ -70,8 +68,6 @@ const Dev: FunctionComponent<DevProps> = ({

const [isShuttingDownMessage, setIsShuttingDownMessage] = useState<string | undefined>(undefined)
const [devPreviewEnabled, setDevPreviewEnabled] = useState<boolean>(true)
const [devSessionEnabled, setDevSessionEnabled] = useState<boolean>(devSessionStatusManager.status.isReady)
const [appPreviewURL, setAppPreviewURL] = useState<string>(previewUrl)
const [error, setError] = useState<string | undefined>(undefined)

const {isAborted} = useAbortSignal(abortController.signal, async (err) => {
@@ -87,7 +83,6 @@ const Dev: FunctionComponent<DevProps> = ({
}, 2000)
}
clearInterval(pollingInterval.current)
await app.developerPlatformClient.devSessionDelete({appId: app.id, shopFqdn})
await developerPreview.disable()
})

@@ -107,24 +102,6 @@ const Dev: FunctionComponent<DevProps> = ({
})
}, [processes, abortController])

// Subscribe to dev session status updates
useEffect(() => {
const handleDevSessionUpdate = (status: DevSessionStatus) => {
setDevSessionEnabled(status.isReady)
if (status.previewURL) setAppPreviewURL(status.previewURL)
}

if (app.developerPlatformClient.supportsDevSessions) {
devSessionStatusManager.on('dev-session-update', handleDevSessionUpdate)
} else {
setDevSessionEnabled(true)
}

return () => {
devSessionStatusManager.off('dev-session-update', handleDevSessionUpdate)
}
}, [])

useEffect(() => {
const pollDevPreviewMode = async () => {
try {
@@ -179,12 +156,12 @@ const Dev: FunctionComponent<DevProps> = ({
try {
setError('')

if (input === 'p' && appPreviewURL && devSessionEnabled) {
if (input === 'p' && previewUrl) {
await metadata.addPublicMetadata(() => ({
cmd_dev_preview_url_opened: true,
}))
await openURL(appPreviewURL)
} else if (input === 'g' && graphiqlUrl && devSessionEnabled) {
await openURL(previewUrl)
} else if (input === 'g' && graphiqlUrl) {
await metadata.addPublicMetadata(() => ({
cmd_dev_graphiql_opened: true,
}))
@@ -233,7 +210,7 @@ const Dev: FunctionComponent<DevProps> = ({
prefixColumnSize={calculatePrefixColumnSize(errorHandledProcesses, app.extensions)}
abortSignal={abortController.signal}
keepRunningAfterProcessesResolve={true}
useAlternativeColorPalette={app.developerPlatformClient.supportsDevSessions}
useAlternativeColorPalette={false}
/>
{/* eslint-disable-next-line no-negated-condition */}
{!isAborted ? (
@@ -263,17 +240,15 @@ const Dev: FunctionComponent<DevProps> = ({
{devPreviewEnabled ? <Text color="green">✔ on</Text> : <Text color="red">✖ off</Text>}
</Text>
) : null}
{graphiqlUrl && devSessionEnabled ? (
{graphiqlUrl ? (
<Text>
{figures.pointerSmall} Press <Text bold>g</Text> {figures.lineVertical} open GraphiQL (Admin API) in
your browser
</Text>
) : null}
{devSessionEnabled ? (
<Text>
{figures.pointerSmall} Press <Text bold>p</Text> {figures.lineVertical} preview in your browser
</Text>
) : null}
<Text>
{figures.pointerSmall} Press <Text bold>p</Text> {figures.lineVertical} preview in your browser
</Text>
<Text>
{figures.pointerSmall} Press <Text bold>q</Text> {figures.lineVertical} quit
</Text>
@@ -285,7 +260,7 @@ const Dev: FunctionComponent<DevProps> = ({
<Text>{isShuttingDownMessage}</Text>
) : (
<>
<Text>{`Preview URL: ${appPreviewURL}`}</Text>
<Text>{`Preview URL: ${previewUrl}`}</Text>
{graphiqlUrl ? <Text>{graphiqlURLMessage}</Text> : null}
</>
)}

0 comments on commit e4e7e0f

Please sign in to comment.