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

[GEN-1729]: add "describe source" to UI #1982

Merged
merged 11 commits into from
Dec 15, 2024

Conversation

BenElferink
Copy link
Contributor

This pull request introduces a new feature to describe sources in the application, along with several supporting changes across multiple files. The most important changes include adding a new GraphQL query, creating a custom hook to use this query, and updating the UI to display the described source data.

New Feature: Describe Source

  • GraphQL Query:

    • Added a new query DESCRIBE_SOURCE in frontend/webapp/graphql/queries/describe.ts to fetch detailed information about a source.
    • Exported the new query in frontend/webapp/graphql/queries/index.ts.
  • Custom Hook:

    • Created a new hook useDescribeSource in frontend/webapp/hooks/describe/useDescribeSource.ts to use the DESCRIBE_SOURCE query.
    • Exported the new hook in frontend/webapp/hooks/describe/index.ts and frontend/webapp/hooks/index.ts. [1] [2]
  • UI Updates:

    • Updated frontend/webapp/containers/main/sources/source-drawer-container/index.tsx to use the new useDescribeSource hook and display the described source data in a new DataCard. [1] [2] [3]
    • Added a new reusable component Code in frontend/webapp/reuseable-components/code/index.tsx to render code snippets with syntax highlighting.
    • Updated frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx to support a new field type CODE for displaying code snippets. [1] [2]
    • Exported the new Code component in frontend/webapp/reuseable-components/index.ts.

Utility Functions

  • Flatten Object Keys:

    • Added a new utility function flattenObjectKeys in frontend/webapp/utils/functions/formatters/flatten-object-keys/index.ts to flatten nested object keys.
    • Exported the new utility function in frontend/webapp/utils/functions/formatters/index.ts.
  • Safe JSON Stringify:

    • Added a new utility function safeJsonStringify in frontend/webapp/utils/functions/formatters/safe-json-stringify/index.ts to safely stringify JSON objects.
    • Updated the imports to use the new safeJsonStringify function in frontend/webapp/containers/main/sources/source-drawer-container/index.tsx.

Additional Changes

  • Types:

    • Added new TypeScript interfaces for the DescribeSource response in frontend/webapp/types/describe.ts.
    • Exported the new types in frontend/webapp/types/index.ts.
  • Dependencies:

    • Added prism-react-renderer for syntax highlighting in frontend/webapp/package.json.

These changes collectively add the capability to describe sources in the application, enhancing the user experience by providing detailed information about each source.

Screenshot 2024-12-12 at 22 27 23

Copy link

Source describe

`;

export const Code: React.FC<Props> = ({ language, code, flatten }) => {
const str = flatten && language === 'json' ? safeJsonStringify(flattenObjectKeys(safeJsonParse(code, {}))) : code;
Copy link
Collaborator

Choose a reason for hiding this comment

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

we can move this outside of the component o make it more ruseable

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the place to make it re-usable, placing it outside would then require copy-pasting of this logic throughout other files.

@BenElferink BenElferink enabled auto-merge (squash) December 15, 2024 08:48
@BenElferink BenElferink merged commit 053aa80 into odigos-io:main Dec 15, 2024
31 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants