diff --git a/web/src/components/CodeBlock/CodeBlock.styled.ts b/web/src/components/CodeBlock/CodeBlock.styled.ts index 8cfdd657ac..afdbd5d447 100644 --- a/web/src/components/CodeBlock/CodeBlock.styled.ts +++ b/web/src/components/CodeBlock/CodeBlock.styled.ts @@ -42,8 +42,16 @@ export const CopyButton = styled(Button)` background: ${({theme}) => theme.color.white}; font-weight: 600; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { background: ${({theme}) => theme.color.white}; } } `; + +export const ActionsContainer = styled.div` + display: flex; + align-items: center; + gap: 6px; +`; diff --git a/web/src/components/CodeBlock/FramedCodeBlock.tsx b/web/src/components/CodeBlock/FramedCodeBlock.tsx index 4960a3a57c..a90e3d340f 100644 --- a/web/src/components/CodeBlock/FramedCodeBlock.tsx +++ b/web/src/components/CodeBlock/FramedCodeBlock.tsx @@ -4,18 +4,22 @@ import useCopy from '../../hooks/useCopy'; interface IProps extends ICodeBlockProps { title: string; + actions?: React.ReactNode; } -const FramedCodeBlock = ({title, ...props}: IProps) => { +const FramedCodeBlock = ({title, actions, ...props}: IProps) => { const copy = useCopy(); return ( {title} - copy(props.value)}> - Copy - + + {actions} + copy(props.value)}> + Copy + + diff --git a/web/src/components/Router/Router.tsx b/web/src/components/Router/Router.tsx index 3bfa8e2231..dc0e3db8c5 100644 --- a/web/src/components/Router/Router.tsx +++ b/web/src/components/Router/Router.tsx @@ -29,7 +29,7 @@ const Router = () => ( } /> - } /> + } /> } /> } /> diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx index e588cbf216..aae7a2fda7 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx +++ b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx @@ -45,7 +45,7 @@ const Controls = ({onChange, test, environmentId}: IProps) => { format: CliCommandFormat.Pretty, }} layout="horizontal" - name="DEEP_LINK" + name="CLI_COMMAND" > diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx index ce6a3691fd..7942c7439b 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx +++ b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx @@ -22,7 +22,7 @@ const Controls = ({onChange, environment: {values} = Environment({}), test, envi const defaultValues = useMemo( () => ({ variables: values, - useEnvironmentId: false, + useEnvironmentId: true, }), [values] ); @@ -30,7 +30,7 @@ const Controls = ({onChange, environment: {values} = Environment({}), test, envi useEffect(() => { onChange({ variables: variables ?? [], - useEnvironmentId: useEnvironmentId ?? false, + useEnvironmentId: useEnvironmentId ?? true, environmentId, test, }); diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts index 24258a4809..49fa3986fe 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts +++ b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts @@ -45,13 +45,7 @@ export const ControlsContainer = styled.div` export const OptionsContainer = styled.div``; -export const EntryContainer = styled.div` - // align-items: center; - // display: grid; - // justify-content: center; - // grid-template-columns: 1fr auto; - // margin-bottom: 8px; -`; +export const EntryContainer = styled.div``; export const ValuesContainer = styled.div` align-items: center; @@ -78,3 +72,17 @@ export const DeleteVariableButton = styled(Button)``; export const VariablesContainer = styled.div` margin: 16px 0; `; + +export const TryItButton = styled(Button)` + && { + padding: 0 8px; + background: ${({theme}) => theme.color.white}; + font-weight: 600; + + &:hover, + &:focus, + &:active { + background: ${({theme}) => theme.color.white}; + } + } +`; diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx index 02f056ce69..5e4eec40bb 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx +++ b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx @@ -1,7 +1,5 @@ -import {FramedCodeBlock} from 'components/CodeBlock'; import {Typography} from 'antd'; -// import {ReadOutlined} from '@ant-design/icons'; -// import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants'; +import {FramedCodeBlock} from 'components/CodeBlock'; import * as S from './DeepLink.styled'; import Controls from './Controls'; import {IMethodProps} from '../../RunDetailAutomateMethods'; @@ -14,9 +12,6 @@ const DeepLink = ({test, environmentId, run: {environment}}: IMethodProps) => { Deep Link Usage - {/* - - */} The deep link below enables you to run this test via a browser. It is useful as you can create dashboards to run @@ -28,6 +23,13 @@ const DeepLink = ({test, environmentId, run: {environment}}: IMethodProps) => { value={deepLink} minHeight="80px" maxHeight="80px" + actions={ + + + Try it + + + } /> diff --git a/web/src/components/WithAnalytics/WithAnalytics.tsx b/web/src/components/WithAnalytics/WithAnalytics.tsx index 9b977dc787..afbc0628be 100644 --- a/web/src/components/WithAnalytics/WithAnalytics.tsx +++ b/web/src/components/WithAnalytics/WithAnalytics.tsx @@ -1,5 +1,5 @@ import {useEffect} from 'react'; -import AnalyticsService from '../../services/Analytics/Analytics.service'; +import AnalyticsService from 'services/Analytics/Analytics.service'; const withAnalytics =

(Component: React.ComponentType

, name: string) => { const FunctionComponent = (props: P) => { diff --git a/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx b/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx index f812d4d4f4..416d4b1280 100644 --- a/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx +++ b/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx @@ -1,4 +1,4 @@ -import {useParams} from 'react-router-dom'; +import {useParams, useSearchParams} from 'react-router-dom'; import Layout from 'components/Layout'; import TestSpecFormProvider from 'components/TestSpecForm/TestSpecForm.provider'; @@ -7,11 +7,13 @@ import TestProvider from 'providers/Test/Test.provider'; import Content from './Content'; const AutomatedTestRun = () => { - const {testId = '', version = '1'} = useParams(); + const {testId = ''} = useParams(); + const [query] = useSearchParams(); + const version = query.get('version') ? Number(query.get('version')) : undefined; return ( - + diff --git a/web/src/providers/Test/Test.provider.tsx b/web/src/providers/Test/Test.provider.tsx index 01fe2a3ef0..fc47e049b8 100644 --- a/web/src/providers/Test/Test.provider.tsx +++ b/web/src/providers/Test/Test.provider.tsx @@ -49,14 +49,15 @@ const TestProvider = ({children, testId, version = 0}: IProps) => { } = useGetTestVersionByIdQuery({testId, version}, {skip: !version}); const {data: latestTest, isLoading: isLatestLoading, isError: isLatestError} = useGetTestByIdQuery({testId}); - const isLatestVersion = useMemo( - () => Boolean(version) && version === latestTest?.version, - [latestTest?.version, version] - ); const isLoading = isLatestLoading || isCurrentLoading; const isError = isLatestError || isCurrentError; const currentTest = (version ? test : latestTest)!; + const isLatestVersion = useMemo( + () => (Boolean(version) && version === latestTest?.version) || currentTest?.version === latestTest?.version, + [currentTest?.version, latestTest?.version, version] + ); + const onEdit = useCallback( (values: TDraftTest) => { if (isLatestVersion) edit(test!, values); @@ -73,7 +74,7 @@ const TestProvider = ({children, testId, version = 0}: IProps) => { (request: Partial = {}) => { if (isLatestVersion) runTest({ - test: test!, + test: currentTest, ...request, }); else { @@ -81,7 +82,7 @@ const TestProvider = ({children, testId, version = 0}: IProps) => { setIsVersionModalOpen(true); } }, - [isLatestVersion, runTest, test] + [currentTest, isLatestVersion, runTest] ); const onConfirm = useCallback(() => { diff --git a/web/src/services/DeepLink.service.ts b/web/src/services/DeepLink.service.ts index 7c4ac0bf4a..43f9f4ee32 100644 --- a/web/src/services/DeepLink.service.ts +++ b/web/src/services/DeepLink.service.ts @@ -10,14 +10,14 @@ export type TDeepLinkConfig = { }; const DeepLinkService = () => ({ - getLink({variables, useEnvironmentId, test: {id: testId, version}, environmentId}: TDeepLinkConfig) { + getLink({variables, useEnvironmentId, test: {id: testId}, environmentId}: TDeepLinkConfig) { const baseUrl = getServerBaseUrl(); const filteredVariables = variables.filter(variable => !!variable && variable.key); const stringVariables = encodeURI(JSON.stringify(filteredVariables)); - const url = `${baseUrl}test/${testId}/version/${version}/run?${ - filteredVariables.length ? `variables=${stringVariables}` : '' - }${useEnvironmentId && environmentId ? `&environmentId=${environmentId}` : ''}`; + const url = `${baseUrl}test/${testId}/run?${filteredVariables.length ? `variables=${stringVariables}` : ''}${ + useEnvironmentId && environmentId ? `&environmentId=${environmentId}` : '' + }`; return url; },