-
Notifications
You must be signed in to change notification settings - Fork 202
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
Conversation
frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
Show resolved
Hide resolved
`; | ||
|
||
export const Code: React.FC<Props> = ({ language, code, flatten }) => { | ||
const str = flatten && language === 'json' ? safeJsonStringify(flattenObjectKeys(safeJsonParse(code, {}))) : code; |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
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:
DESCRIBE_SOURCE
infrontend/webapp/graphql/queries/describe.ts
to fetch detailed information about a source.frontend/webapp/graphql/queries/index.ts
.Custom Hook:
useDescribeSource
infrontend/webapp/hooks/describe/useDescribeSource.ts
to use theDESCRIBE_SOURCE
query.frontend/webapp/hooks/describe/index.ts
andfrontend/webapp/hooks/index.ts
. [1] [2]UI Updates:
frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
to use the newuseDescribeSource
hook and display the described source data in a newDataCard
. [1] [2] [3]Code
infrontend/webapp/reuseable-components/code/index.tsx
to render code snippets with syntax highlighting.frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx
to support a new field typeCODE
for displaying code snippets. [1] [2]Code
component infrontend/webapp/reuseable-components/index.ts
.Utility Functions
Flatten Object Keys:
flattenObjectKeys
infrontend/webapp/utils/functions/formatters/flatten-object-keys/index.ts
to flatten nested object keys.frontend/webapp/utils/functions/formatters/index.ts
.Safe JSON Stringify:
safeJsonStringify
infrontend/webapp/utils/functions/formatters/safe-json-stringify/index.ts
to safely stringify JSON objects.safeJsonStringify
function infrontend/webapp/containers/main/sources/source-drawer-container/index.tsx
.Additional Changes
Types:
DescribeSource
response infrontend/webapp/types/describe.ts
.frontend/webapp/types/index.ts
.Dependencies:
prism-react-renderer
for syntax highlighting infrontend/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.