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.

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

feature(frontend): Automate Tab - Deep Link Technique #2791

Merged
merged 3 commits into from Jun 22, 2023

Conversation

xoscar
Copy link
Collaborator

@xoscar xoscar commented Jun 21, 2023

This PR adds the deep link technique to the automate tab. It also improves parts of the codes and fixes bugs.

Changes

  • Adds deep link components and logic
  • Moves methods to use a form instead of a custom state
  • Fixes race condition when running a test from a deep link
  • Updates code block to use new styles

Fixes

Checklist

  • tested locally
  • added new dependencies
  • updated the docs
  • added a test

https://www.loom.com/share/3763538b229e46e88606172beb5ddabb

@xoscar xoscar linked an issue Jun 21, 2023 that may be closed by this pull request
@xoscar xoscar marked this pull request as ready for review June 21, 2023 22:08
@xoscar xoscar self-assigned this Jun 21, 2023
const onSwitchChange = useCallback((name: CliCommandOption, isEnabled: boolean) => {
setEnabledOptions(prev => ({...prev, [name]: isEnabled}));
}, []);
const Controls = ({onChange, test, environmentId}: IProps) => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Even if it's bad for the moment, it is better to keep using a standard way of handling forms, we can update this to use a new way in the near future

</S.Description>
</S.SubtitleContainer>
<S.CodeContainer data-cy="file-viewer-code-container">
<FramedCodeBlock value={example} language="yaml" title="Collector Configuration" />
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Using new Framed Code Block component

</SyntaxHighlighter>
</S.CodeContainer>
<div data-cy="file-viewer-code-container">
<FramedCodeBlock title={subtitle} value={data} language={language} />
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Using new code block component

// eslint-disable-next-line no-restricted-exports
export {default} from './CodeBlock';
export {FramedCodeBlock};
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I used this exporting format here, I think we can think of moving to this version, but looking for suggestions

Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good!

Copy link
Contributor

@jorgeepc jorgeepc left a comment

Choose a reason for hiding this comment

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

Looks good. Minor comments

// eslint-disable-next-line no-restricted-exports
export {default} from './CodeBlock';
export {FramedCodeBlock};
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good!

format: CliCommandFormat.Pretty,
}}
layout="horizontal"
name="DEEP_LINK"
Copy link
Contributor

Choose a reason for hiding this comment

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

DEEP_LINK?

Comment on lines +48 to +54
export const EntryContainer = styled.div`
// align-items: center;
// display: grid;
// justify-content: center;
// grid-template-columns: 1fr auto;
// margin-bottom: 8px;
`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we want this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I found myself almost copying the same input we use for headers, I think we can go back to think if we could have a component library for input management so we don't have to write them from scratch every time 🥴

Comment on lines +3 to +4
// import {ReadOutlined} from '@ant-design/icons';
// import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
Copy link
Contributor

Choose a reason for hiding this comment

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

👀

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I believe this will be soon added, but I'm removing this code for the moment

@xoscar xoscar merged commit 419c300 into main Jun 22, 2023
24 checks passed
@xoscar xoscar deleted the 2767-automate-tab-include-deeplink-technique branch June 22, 2023 17:06
@xoscar
Copy link
Collaborator Author

xoscar commented Jun 22, 2023

Updates and fixes moved to this PR #2791

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Automate Tab] Include DeepLink Technique
2 participants