Skip to content

Commit 859f7e3

Browse files
illumeillume
authored
Merge pull request #3561 from farodin91/frontend--cleanup-crds-view
frontend: cleanup crds view
2 parents 3be8b2b + 75cd17a commit 859f7e3

File tree

7 files changed

+807
-757
lines changed

7 files changed

+807
-757
lines changed

‎frontend/src/components/common/Resource/ResourceListView.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
import React, { PropsWithChildren, ReactElement, ReactNode } from 'react';
1818
import { KubeObject, KubeObjectClass } from '../../../lib/k8s/KubeObject';
19+
import { BackLinkProps } from '../BackLink';
1920
import { CreateResourceButton } from '../CreateResourceButton';
2021
import SectionBox from '../SectionBox';
2122
import SectionFilterHeader, { SectionFilterHeaderProps } from '../SectionFilterHeader';
@@ -24,13 +25,17 @@ import ResourceTable, { ResourceTableProps } from './ResourceTable';
2425
export interface ResourceListViewProps<Item extends KubeObject>
2526
extends PropsWithChildren<Omit<ResourceTableProps<Item>, 'data'>> {
2627
title: ReactNode;
28+
//** The location to go back to. If provided as an empty string, the browser's history will be used. If not provided (default)), then no back button is used. */
29+
backLink?: BackLinkProps['to'] | boolean;
2730
headerProps?: Omit<SectionFilterHeaderProps, 'title'>;
2831
data: Item[] | null;
2932
}
3033

3134
export interface ResourceListViewWithResourceClassProps<ItemClass extends KubeObjectClass>
3235
extends PropsWithChildren<Omit<ResourceTableProps<InstanceType<ItemClass>>, 'data'>> {
3336
title: ReactNode;
37+
//** The location to go back to. If provided as an empty string, the browser's history will be used. If not provided (default)), then no back button is used. */
38+
backLink?: BackLinkProps['to'] | boolean;
3439
headerProps?: Omit<SectionFilterHeaderProps, 'title'>;
3540
resourceClass: ItemClass;
3641
}
@@ -44,13 +49,14 @@ export default function ResourceListView<Item extends KubeObject<any>>(
4449
export default function ResourceListView(
4550
props: ResourceListViewProps<any> | ResourceListViewWithResourceClassProps<any>
4651
) {
47-
const { title, children, headerProps, ...tableProps } = props;
52+
const { title, children, backLink, headerProps, ...tableProps } = props;
4853
const withNamespaceFilter = 'resourceClass' in props && props.resourceClass?.isNamespaced;
4954
const resourceClass = (props as ResourceListViewWithResourceClassProps<any>)
5055
.resourceClass as KubeObjectClass;
5156

5257
return (
5358
<SectionBox
59+
backLink={backLink}
5460
title={
5561
typeof title === 'string' ? (
5662
<SectionFilterHeader

‎frontend/src/components/crd/CustomResourceInstancesList.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ import { useTranslation } from 'react-i18next';
2121
import CRD from '../../lib/k8s/crd';
2222
import { KubeObject } from '../../lib/k8s/KubeObject';
2323
import { useNamespaces } from '../../redux/filterSlice';
24-
import { Link, Loader, SectionBox, ShowHideLabel } from '../common/';
25-
import Empty from '../common/EmptyContent';
26-
import { ResourceListView } from '../common/Resource';
24+
import { EmptyContent as Empty, Link, Loader, ResourceListView, ShowHideLabel } from '../common/';
2725

2826
function CrInstancesView({ crds }: { crds: CRD[]; key: string }) {
2927
const { t } = useTranslation(['glossary', 'translation']);
@@ -76,7 +74,7 @@ function CrInstancesView({ crds }: { crds: CRD[]; key: string }) {
7674
}
7775

7876
return (
79-
<SectionBox backLink>
77+
<>
8078
{crdsFailedToLoad.length > 0 && !allFailed && !isWarningClosed && (
8179
<Alert
8280
severity="warning"
@@ -150,7 +148,7 @@ function CrInstancesView({ crds }: { crds: CRD[]; key: string }) {
150148
'age',
151149
]}
152150
/>
153-
</SectionBox>
151+
</>
154152
);
155153
}
156154

‎frontend/src/components/crd/CustomResourceList.tsx‎

Lines changed: 10 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,15 @@
1414
* limitations under the License.
1515
*/
1616

17-
import Box from '@mui/material/Box';
1817
import { JSONPath } from 'jsonpath-plus';
1918
import React from 'react';
2019
import { useTranslation } from 'react-i18next';
2120
import { useParams } from 'react-router-dom';
2221
import CRD, { KubeCRD } from '../../lib/k8s/crd';
2322
import { KubeObject } from '../../lib/k8s/KubeObject';
2423
import { localeDate } from '../../lib/util';
25-
import BackLink from '../common/BackLink';
26-
import { CreateResourceButton } from '../common/CreateResourceButton';
27-
import Empty from '../common/EmptyContent';
28-
import Link from '../common/Link';
29-
import Loader from '../common/Loader';
30-
import { PageGrid } from '../common/Resource';
31-
import ResourceListView from '../common/Resource/ResourceListView';
24+
import { EmptyContent as Empty, Link, Loader, ResourceListView } from '../common';
3225
import { ResourceTableColumn, ResourceTableProps } from '../common/Resource/ResourceTable';
33-
import SectionHeader from '../common/SectionHeader';
3426

3527
export default function CustomResourceList() {
3628
const { t } = useTranslation(['glossary', 'translation']);
@@ -55,7 +47,7 @@ export default function CustomResourceList() {
5547
);
5648
}
5749

58-
return <CustomResourceListRenderer crd={crd!} />;
50+
return <CustomResourceListTable crd={crd!} />;
5951
}
6052

6153
function CustomResourceLink(props: {
@@ -82,37 +74,6 @@ function CustomResourceLink(props: {
8274
);
8375
}
8476

85-
export interface CustomResourceListProps {
86-
crd: CRD;
87-
}
88-
89-
function CustomResourceListRenderer(props: CustomResourceListProps) {
90-
const { crd } = props;
91-
const { t } = useTranslation('glossary');
92-
93-
const CRClass = crd.makeCRClass();
94-
95-
return (
96-
<PageGrid>
97-
<BackLink />
98-
<SectionHeader
99-
title={crd.spec.names.kind}
100-
titleSideActions={[
101-
<CreateResourceButton resourceClass={CRClass} resourceName={crd.spec.names.kind} />,
102-
]}
103-
actions={[
104-
<Box mr={2}>
105-
<Link routeName="crd" params={{ name: crd.metadata.name }} activeCluster={crd.cluster}>
106-
{t('glossary|CRD: {{ crdName }}', { crdName: crd.metadata.name })}
107-
</Link>
108-
</Box>,
109-
]}
110-
/>
111-
<CustomResourceListTable crd={crd} />
112-
</PageGrid>
113-
);
114-
}
115-
11677
function getValueWithJSONPath(item: { jsonData: object }, jsonPath: string): string {
11778
let value: string | undefined;
11879
try {
@@ -134,7 +95,7 @@ export interface CustomResourceTableProps {
13495

13596
export function CustomResourceListTable(props: CustomResourceTableProps) {
13697
const { t } = useTranslation(['glossary', 'translation']);
137-
const { crd, title = '' } = props;
98+
const { crd, title = crd.spec.names.kind } = props;
13899

139100
const apiGroup = React.useMemo(() => {
140101
return crd.getMainAPIGroup();
@@ -200,9 +161,14 @@ export function CustomResourceListTable(props: CustomResourceTableProps) {
200161
return (
201162
<ResourceListView
202163
title={title}
164+
backLink
203165
headerProps={{
204-
noNamespaceFilter: !crd.isNamespaced,
205-
titleSideActions: [],
166+
noNamespaceFilter: !crd.isNamespacedScope,
167+
subtitle: (
168+
<Link routeName="crd" params={{ name: crd.metadata.name }} activeCluster={crd.cluster}>
169+
{t('glossary|CRD: {{ crdName }}', { crdName: crd.metadata.name })}
170+
</Link>
171+
),
206172
}}
207173
resourceClass={CRClass}
208174
columns={cols}

‎frontend/src/components/crd/List.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,12 @@
1717
import React from 'react';
1818
import { useTranslation } from 'react-i18next';
1919
import CRD from '../../lib/k8s/crd';
20-
import { useNamespaces } from '../../redux/filterSlice';
21-
import Link from '../common/Link';
22-
import { useThrottle } from '../common/Resource';
20+
import { Link, useThrottle } from '../common';
2321
import ResourceListView from '../common/Resource/ResourceListView';
2422

2523
export default function CustomResourceDefinitionList() {
2624
const { t } = useTranslation(['glossary', 'frequent']);
27-
const [items, error] = CRD.useList({ namespace: useNamespaces() });
25+
const [items, error] = CRD.useList();
2826
const throttledItems = useThrottle(items, 1000);
2927

3028
const categories = React.useMemo(() => {
@@ -45,7 +43,7 @@ export default function CustomResourceDefinitionList() {
4543
<ResourceListView
4644
title={t('glossary|Custom Resources')}
4745
headerProps={{
48-
noNamespaceFilter: false,
46+
noNamespaceFilter: true,
4947
}}
5048
data={throttledItems}
5149
errorMessage={CRD.getErrorMessage(error)}

‎frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot‎

Lines changed: 130 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,24 @@
449449
<div
450450
class="MuiBox-root css-p0cik4"
451451
>
452+
<button
453+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-disableElevation css-1j11y9k-MuiButtonBase-root-MuiButton-root"
454+
tabindex="0"
455+
type="button"
456+
>
457+
<span
458+
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
459+
/>
460+
<p
461+
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
462+
style="padding-top: 3px;"
463+
>
464+
Back
465+
</p>
466+
<span
467+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
468+
/>
469+
</button>
452470
<div
453471
class="MuiBox-root css-j1fy4m"
454472
>
@@ -468,7 +486,118 @@
468486
</h1>
469487
<div
470488
class="MuiBox-root css-ldp2l3"
471-
/>
489+
>
490+
<button
491+
aria-label="Create mycustomresource"
492+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
493+
data-mui-internal-clone-element="true"
494+
tabindex="0"
495+
type="button"
496+
>
497+
<span
498+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
499+
/>
500+
</button>
501+
</div>
502+
</div>
503+
<p
504+
class="MuiTypography-root MuiTypography-h6 css-1fggqnx-MuiTypography-root"
505+
>
506+
<a
507+
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1w0w5yv-MuiTypography-root-MuiLink-root"
508+
href="/"
509+
>
510+
CRD: mydefinition.phonyresources.io
511+
</a>
512+
</p>
513+
</div>
514+
<div
515+
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
516+
>
517+
<div
518+
class="MuiGrid-root MuiGrid-container MuiGrid-item css-ztq4zc-MuiGrid-root"
519+
>
520+
<div
521+
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
522+
>
523+
<div
524+
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
525+
>
526+
<div
527+
class="MuiBox-root css-1dipl1t"
528+
>
529+
<div
530+
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
531+
style="margin-top: 0px;"
532+
>
533+
<label
534+
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined css-1f7ywh2-MuiFormLabel-root-MuiInputLabel-root"
535+
data-shrink="true"
536+
for="namespaces-filter"
537+
id="namespaces-filter-label"
538+
>
539+
Namespaces
540+
</label>
541+
<div
542+
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1xjtaff-MuiInputBase-root-MuiOutlinedInput-root"
543+
>
544+
<input
545+
aria-autocomplete="both"
546+
aria-expanded="false"
547+
aria-invalid="false"
548+
autocapitalize="none"
549+
autocomplete="off"
550+
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
551+
id="namespaces-filter"
552+
placeholder="Filter"
553+
role="combobox"
554+
spellcheck="false"
555+
type="text"
556+
value=""
557+
/>
558+
<div
559+
class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
560+
>
561+
<button
562+
aria-label="Open"
563+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-1aav1nn-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
564+
tabindex="-1"
565+
title="Open"
566+
type="button"
567+
>
568+
<svg
569+
aria-hidden="true"
570+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
571+
data-testid="ArrowDropDownIcon"
572+
focusable="false"
573+
viewBox="0 0 24 24"
574+
>
575+
<path
576+
d="M7 10l5 5 5-5z"
577+
/>
578+
</svg>
579+
<span
580+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
581+
/>
582+
</button>
583+
</div>
584+
<fieldset
585+
aria-hidden="true"
586+
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
587+
>
588+
<legend
589+
class="css-14lo706"
590+
>
591+
<span>
592+
Namespaces
593+
</span>
594+
</legend>
595+
</fieldset>
596+
</div>
597+
</div>
598+
</div>
599+
</div>
600+
</div>
472601
</div>
473602
</div>
474603
</div>

0 commit comments

Comments
 (0)