Skip to content

feat(Preview): add preview for topics #2292

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.

Sign up for GitHub

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

Merged
merged 8 commits into from
May 21, 2025
Merged

feat(Preview): add preview for topics #2292

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8b36d23
feat(Preview): add preview for topics
Raubzeug May 16, 2025
7f897d2
fix: test
Raubzeug May 16, 2025
66c82df
nanofix
Raubzeug May 16, 2025
a61f8d9
fix: show topic preview if available
Raubzeug May 19, 2025
d68d4c9
fix: show topic preview if available
Raubzeug May 19, 2025
2dd278e
fix: review
Raubzeug May 20, 2025
6d6f786
fix: review
Raubzeug May 21, 2025
908a351
fix: preview
Raubzeug May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,15 @@ function ObjectGeneral(props: ObjectGeneralProps) {
props;
switch (tenantPage) {
case TENANT_PAGES_IDS.query: {
return <Query tenantName={tenantName} path={path} theme={theme} type={type} />;
return (
<Query
tenantName={tenantName}
path={path}
theme={theme}
type={type}
subType={subType}
/>
);
}
default: {
return (
Expand Down
6 changes: 4 additions & 2 deletions src/containers/Tenant/Query/Preview/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@ import type {PreviewContainerProps} from './types';
import './Preview.scss';

export function PreviewContainer(props: PreviewContainerProps) {
const {type} = props;
const {type, subType} = props;
const isTable = isTableType(type);
const isTopic = type === EPathType.EPathTypePersQueueGroup;
Copy link
Member

@artemmufazalov artemmufazalov May 19, 2025

Choose a reason for hiding this comment

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

Please, rebase you PR and check whether it works for topics inside CDC. If it doesn't work, create an issue and disable preview for them

Copy link
Member

@artemmufazalov artemmufazalov May 19, 2025

Choose a reason for hiding this comment

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

I mean EPathSubType.EPathSubTypeStreamImpl, I restored them here: #2281

const isTopicPreviewAvailable = useTopicDataAvailable();

if (isTable) {
return <TablePreview {...props} />;
}
if (isTopic && isTopicPreviewAvailable) {

// preview is not available for topics inside CDC (has subtype)
if (isTopic && !subType && isTopicPreviewAvailable) {
Copy link
Member

@artemmufazalov artemmufazalov May 21, 2025

Choose a reason for hiding this comment

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

You turned off preview for every topic.

Every element has subtype, in most cases it is EPathSubTypeEmpty, so you should check EPathSubTypeStreamImpl explicitly

Copy link
Contributor Author

@Raubzeug Raubzeug May 21, 2025

Choose a reason for hiding this comment

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

Thanks! Fixed

return <TopicPreview {...props} />;
}

Expand Down
3 changes: 2 additions & 1 deletion src/containers/Tenant/Query/Preview/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type {EPathType} from '../../../../types/api/schema';
import type {EPathSubType, EPathType} from '../../../../types/api/schema';

export interface PreviewContainerProps {
database: string;
path: string;
type?: EPathType;
subType?: EPathSubType;
}
3 changes: 2 additions & 1 deletion src/containers/Tenant/Query/Query.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {Helmet} from 'react-helmet-async';

import {changeUserInput} from '../../../store/reducers/query/query';
import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
import type {EPathType} from '../../../types/api/schema';
import type {EPathSubType, EPathType} from '../../../types/api/schema';
import {cn} from '../../../utils/cn';
import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';

Expand All @@ -22,6 +22,7 @@ interface QueryProps {
tenantName: string;
path: string;
type?: EPathType;
subType?: EPathSubType;
}

export const Query = (props: QueryProps) => {
Expand Down
10 changes: 7 additions & 3 deletions src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
import type {QueryResult} from '../../../../store/reducers/query/types';
import {setQueryAction} from '../../../../store/reducers/queryActions/queryActions';
import {selectShowPreview, setShowPreview} from '../../../../store/reducers/schema/schema';
import type {EPathType} from '../../../../types/api/schema';
import type {EPathSubType, EPathType} from '../../../../types/api/schema';
import type {QueryAction} from '../../../../types/store/query';
import {cn} from '../../../../utils/cn';
import {
Expand Down Expand Up @@ -70,11 +70,12 @@ interface QueryEditorProps {
changeUserInput: (arg: {input: string}) => void;
theme: string;
type?: EPathType;
subType?: EPathSubType;
}

export default function QueryEditor(props: QueryEditorProps) {
const dispatch = useTypedDispatch();
const {tenantName, path, type, theme, changeUserInput} = props;
const {tenantName, path, type, theme, changeUserInput, subType} = props;
const savedPath = useTypedSelector(selectTenantPath);
const result = useTypedSelector(selectResult);
const historyQueries = useTypedSelector(selectQueriesHistory);
Expand Down Expand Up @@ -270,6 +271,7 @@ export default function QueryEditor(props: QueryEditorProps) {
onExpandResultHandler={onExpandResultHandler}
onCollapseResultHandler={onCollapseResultHandler}
type={type}
subType={subType}
theme={theme}
key={result?.queryId}
result={result}
Expand All @@ -291,6 +293,7 @@ interface ResultProps {
onExpandResultHandler: VoidFunction;
onCollapseResultHandler: VoidFunction;
type?: EPathType;
subType?: EPathSubType;
theme: string;
result?: QueryResult;
tenantName: string;
Expand All @@ -304,6 +307,7 @@ function Result({
onExpandResultHandler,
onCollapseResultHandler,
type,
subType,
theme,
result,
tenantName,
Expand All @@ -313,7 +317,7 @@ function Result({
tableSettings,
}: ResultProps) {
if (showPreview) {
return <PreviewContainer database={tenantName} path={path} type={type} />;
return <PreviewContainer database={tenantName} path={path} type={type} subType={subType} />;
}

if (result) {
Expand Down
Loading