Skip to content

Commit e3eceac

Browse files
adhityamamallanadhityamamallan
committed
Fix styling of page section
1 parent d2cff72 commit e3eceac

File tree

7 files changed

+87
-89
lines changed

7 files changed

+87
-89
lines changed

‎src/views/domain-page/domain-page-content/domain-page-content.styles.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { withStyle } from 'baseui';
2+
3+
import PageSection from '@/components/page-section/page-section';
4+
5+
export const styled = {
6+
PageSection: withStyle(PageSection, () => ({
7+
display: 'flex',
8+
flexDirection: 'column',
9+
flex: 1,
10+
})),
11+
};

‎src/views/domain-page/domain-page-content/domain-page-content.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import decodeUrlParams from '@/utils/decode-url-params';
66

77
import domainPageTabsContentConfig from '../config/domain-page-tabs-content.config';
88

9+
import { styled } from './domain-page-content.styles';
910
import {
1011
type DomainPageContentParams,
1112
type Props,
@@ -22,6 +23,11 @@ export default function DomainPageContent(props: Props) {
2223
}
2324

2425
return (
25-
<TabContent domain={decodedParams.domain} cluster={decodedParams.cluster} />
26+
<styled.PageSection>
27+
<TabContent
28+
domain={decodedParams.domain}
29+
cluster={decodedParams.cluster}
30+
/>
31+
</styled.PageSection>
2632
);
2733
}

‎src/views/domain-page/domain-page-metadata/domain-page-metadata.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import React from 'react';
44
import { useSuspenseQuery } from '@tanstack/react-query';
55

66
import ListTable from '@/components/list-table/list-table';
7-
import PageSection from '@/components/page-section/page-section';
87
import request from '@/utils/request';
98

109
import domainPageMetadataTableConfig from '../config/domain-page-metadata-table.config';
@@ -23,13 +22,11 @@ export default function DomainPageMetadata(props: DomainPageTabContentProps) {
2322
});
2423

2524
return (
26-
<PageSection>
27-
<styled.MetadataContainer>
28-
<ListTable
29-
data={domainInfo}
30-
listTableConfig={domainPageMetadataTableConfig}
31-
/>
32-
</styled.MetadataContainer>
33-
</PageSection>
25+
<styled.MetadataContainer>
26+
<ListTable
27+
data={domainInfo}
28+
listTableConfig={domainPageMetadataTableConfig}
29+
/>
30+
</styled.MetadataContainer>
3431
);
3532
}

‎src/views/domain-page/domain-page-settings/domain-page-settings.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
} from '@tanstack/react-query';
99
import { toaster, ToasterContainer, PLACEMENT } from 'baseui/toast';
1010

11-
import PageSection from '@/components/page-section/page-section';
1211
import updateDomain from '@/server-actions/update-domain/update-domain';
1312
import request from '@/utils/request';
1413
import SettingsForm from '@/views/shared/settings-form/settings-form';
@@ -68,27 +67,25 @@ export default function DomainPageSettings(props: DomainPageTabContentProps) {
6867
autoHideDuration={SETTINGS_UPDATE_TOAST_DURATION_MS}
6968
overrides={overrides.toast}
7069
>
71-
<PageSection>
72-
<styled.SettingsContainer>
73-
<SettingsForm
74-
data={domainInfo}
75-
zodSchema={domainPageSettingsFormSchema}
76-
formConfig={domainPageSettingsFormConfig}
77-
onSubmit={async (data) =>
78-
await saveSettings.mutateAsync(data).then(() => {
79-
queryClient.invalidateQueries({
80-
queryKey: ['describeDomain', props],
81-
});
82-
toaster.positive('Successfully updated domain settings');
83-
})
84-
}
85-
submitButtonText="Save settings"
86-
onSubmitError={(e) =>
87-
toaster.negative('Error updating domain settings: ' + e.message)
88-
}
89-
/>
90-
</styled.SettingsContainer>
91-
</PageSection>
70+
<styled.SettingsContainer>
71+
<SettingsForm
72+
data={domainInfo}
73+
zodSchema={domainPageSettingsFormSchema}
74+
formConfig={domainPageSettingsFormConfig}
75+
onSubmit={async (data) =>
76+
await saveSettings.mutateAsync(data).then(() => {
77+
queryClient.invalidateQueries({
78+
queryKey: ['describeDomain', props],
79+
});
80+
toaster.positive('Successfully updated domain settings');
81+
})
82+
}
83+
submitButtonText="Save settings"
84+
onSubmitError={(e) =>
85+
toaster.negative('Error updating domain settings: ' + e.message)
86+
}
87+
/>
88+
</styled.SettingsContainer>
9289
</ToasterContainer>
9390
);
9491
}

‎src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
'use client';
22
import PageFilters from '@/components/page-filters/page-filters';
3-
import PageSection from '@/components/page-section/page-section';
43
import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
54

65
import domainWorkflowsFiltersConfig from '../config/domain-workflows-filters.config';
@@ -9,15 +8,13 @@ import { styled } from './domain-workflows-filters.styles';
98

109
export default function DomainWorkflowsFilters() {
1110
return (
12-
<PageSection>
13-
<styled.FiltersContainer>
14-
<PageFilters
15-
searchQueryParamKey="search"
16-
searchPlaceholder="Search for Workflow ID, Run ID, or Workflow Type"
17-
pageFiltersConfig={domainWorkflowsFiltersConfig}
18-
pageQueryParamsConfig={domainPageQueryParamsConfig}
19-
/>
20-
</styled.FiltersContainer>
21-
</PageSection>
11+
<styled.FiltersContainer>
12+
<PageFilters
13+
searchQueryParamKey="search"
14+
searchPlaceholder="Search for Workflow ID, Run ID, or Workflow Type"
15+
pageFiltersConfig={domainWorkflowsFiltersConfig}
16+
pageQueryParamsConfig={domainPageQueryParamsConfig}
17+
/>
18+
</styled.FiltersContainer>
2219
);
2320
}

‎src/views/domain-workflows/domain-workflows-table/domain-workflows-table.styles.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
import { styled as createStyled, withStyle } from 'baseui';
2-
3-
import PageSection from '@/components/page-section/page-section';
1+
import { styled as createStyled } from 'baseui';
42

53
export const styled = {
64
TableContainer: createStyled('div', {
75
overflowX: 'auto',
86
}),
9-
PageSection: withStyle(PageSection, () => ({
10-
display: 'flex',
11-
flexDirection: 'column',
12-
flex: 1,
13-
})),
147
ErrorPanelContainer: createStyled('div', ({ $theme }) => ({
158
padding: `${$theme.sizing.scale1200} 0px`,
169
display: 'flex',

‎src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import React from 'react';
2+
import React, { useMemo } from 'react';
33

44
import { useInfiniteQuery } from '@tanstack/react-query';
55
import queryString from 'query-string';
@@ -66,12 +66,15 @@ export default function DomainWorkflowsTable(props: Props) {
6666
},
6767
});
6868

69+
const workflows = useMemo(() => {
70+
if (!data) return [];
71+
return data.pages.flatMap((page) => page.workflows ?? []);
72+
}, [data]);
73+
6974
if (isLoading) {
7075
return <SectionLoadingIndicator />;
7176
}
7277

73-
const workflows = data?.pages.flatMap((page) => page.workflows ?? []) ?? [];
74-
7578
if (workflows.length === 0) {
7679
const errorPanelProps = getWorkflowsErrorPanelProps({
7780
error,
@@ -83,44 +86,38 @@ export default function DomainWorkflowsTable(props: Props) {
8386
});
8487

8588
if (errorPanelProps) {
86-
return (
87-
<styled.PageSection>
88-
<ErrorPanel {...errorPanelProps} reset={refetch} />
89-
</styled.PageSection>
90-
);
89+
return <ErrorPanel {...errorPanelProps} reset={refetch} />;
9190
}
9291
}
9392

9493
return (
95-
<styled.PageSection>
96-
<styled.TableContainer>
97-
<Table
98-
data={workflows}
99-
columns={domainWorkflowsTableConfig}
100-
shouldShowResults={!isLoading && workflows.length > 0}
101-
onSort={(column) => {
102-
setQueryParams({
103-
sortColumn: column,
104-
sortOrder: getNextSortOrder({
105-
currentColumn: queryParams.sortColumn,
106-
nextColumn: column,
107-
currentSortOrder: queryParams.sortOrder,
108-
}),
109-
});
110-
}}
111-
sortColumn={queryParams.sortColumn}
112-
sortOrder={queryParams.sortOrder}
113-
endMessage={
114-
<DomainWorkflowsTableEndMessage
115-
hasWorkflows={workflows.length > 0}
116-
error={error}
117-
fetchNextPage={fetchNextPage}
118-
hasNextPage={hasNextPage}
119-
isFetchingNextPage={isFetchingNextPage}
120-
/>
121-
}
122-
/>
123-
</styled.TableContainer>
124-
</styled.PageSection>
94+
<styled.TableContainer>
95+
<Table
96+
data={workflows}
97+
columns={domainWorkflowsTableConfig}
98+
shouldShowResults={!isLoading && workflows.length > 0}
99+
onSort={(column) => {
100+
setQueryParams({
101+
sortColumn: column,
102+
sortOrder: getNextSortOrder({
103+
currentColumn: queryParams.sortColumn,
104+
nextColumn: column,
105+
currentSortOrder: queryParams.sortOrder,
106+
}),
107+
});
108+
}}
109+
sortColumn={queryParams.sortColumn}
110+
sortOrder={queryParams.sortOrder}
111+
endMessage={
112+
<DomainWorkflowsTableEndMessage
113+
hasWorkflows={workflows.length > 0}
114+
error={error}
115+
fetchNextPage={fetchNextPage}
116+
hasNextPage={hasNextPage}
117+
isFetchingNextPage={isFetchingNextPage}
118+
/>
119+
}
120+
/>
121+
</styled.TableContainer>
125122
);
126123
}

0 commit comments

Comments
 (0)