Skip to content

Commit 1e64b1f

Browse files
krishagarwal278krishagarwal278
authored
CONSOLE-4697: Enable strickNullCheck for /console-app/components/resource-quota | quick-starts | tour | tabs | vpa | storage (#15418)
* Addressed PR reviews and fixed SNC errors modified: frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx modified: frontend/packages/console-app/src/components/quick-starts/utils/useQuickStartPermission.ts modified: frontend/packages/console-app/src/components/quick-starts/utils/useQuickStarts.ts modified: frontend/packages/console-app/src/components/resource-quota/AppliedClusterResourceQuotaCharts.tsx modified: frontend/packages/console-app/src/components/resource-quota/ClusterResourceQuotaCharts.tsx modified: frontend/packages/console-app/src/components/resource-quota/ResourceQuotaCharts.tsx modified: frontend/packages/console-app/src/components/storage/StorageClassProviders.ts modified: frontend/packages/console-app/src/components/tour/GuidedTour.tsx modified: frontend/packages/console-app/src/components/tour/StepComponent.tsx modified: frontend/packages/console-app/src/components/tour/TourStepComponent.tsx modified: frontend/packages/console-app/src/components/tour/tour-context.ts * Made completedTour and startTour optional in TourState * Fixed frontend build failure
1 parent d62c016 commit 1e64b1f

File tree

13 files changed

+66
-54
lines changed

13 files changed

+66
-54
lines changed

‎frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ type DisabledQuickStartsConsoleConfig = K8sResourceKind & {
2525
spec: {
2626
customization?: {
2727
quickStarts?: {
28-
disabled: string[];
28+
disabled: string[] | undefined;
2929
};
3030
};
3131
};
@@ -169,7 +169,7 @@ const QuickStartConfiguration: React.FC<{ readonly: boolean }> = ({ readonly })
169169
/>
170170

171171
<LoadError error={consoleConfigError} />
172-
<SaveStatus {...saveStatus} />
172+
{saveStatus && <SaveStatus {...saveStatus} />}
173173
</FormSection>
174174
);
175175
};

‎frontend/packages/console-app/src/components/quick-starts/utils/useQuickStartPermission.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const useQuickStartPermission = (quickStart: QuickStart): [boolean, boolean] =>
66
spec: { accessReviewResources },
77
} = quickStart;
88

9-
const accessReviews = [];
10-
const accessReviewsLoading = [];
9+
const accessReviews: boolean[] = [];
10+
const accessReviewsLoading: boolean[] = [];
1111

1212
if (accessReviewResources) {
1313
accessReviewResources.forEach((descriptor) => {

‎frontend/packages/console-app/src/components/quick-starts/utils/useQuickStarts.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,5 +117,10 @@ export const useQuickStarts = (filterDisabledQuickStarts = true): WatchK8sResult
117117
);
118118
}, [quickStarts, quickStartsLoaded, filterDisabledQuickStarts, preferredLanguage]);
119119

120-
return [bestMatchQuickStarts, quickStartsLoaded, quickStartsError];
120+
const filteredQuickStarts = useMemo(
121+
() => bestMatchQuickStarts.filter((quickStart) => quickStart !== null),
122+
[bestMatchQuickStarts],
123+
);
124+
125+
return [filteredQuickStarts, quickStartsLoaded, quickStartsError];
121126
};

‎frontend/packages/console-app/src/components/resource-quota/AppliedClusterResourceQuotaCharts.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ const AppliedClusterResourceQuotaCharts = ({
2020
);
2121

2222
const charts = Object.keys(nsQuotas?.status?.hard ?? {}).map((resourceName) => {
23-
const clusterHard = appliedClusterResourceQuota.status.total?.hard?.[resourceName];
24-
const clusterUsed = appliedClusterResourceQuota.status.total?.used?.[resourceName];
25-
const nsUsed = nsQuotas.status.used?.[resourceName];
23+
const clusterHard = appliedClusterResourceQuota.status?.total?.hard?.[resourceName];
24+
const clusterUsed = appliedClusterResourceQuota.status?.total?.used?.[resourceName];
25+
const nsUsed = nsQuotas?.status?.used?.[resourceName];
2626
const clusterUsage = getUsedPercentage(clusterHard, clusterUsed);
2727
const unused = 100 - clusterUsage;
2828

‎frontend/packages/console-app/src/components/resource-quota/ClusterResourceQuotaCharts.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const ClusterResourceQuotaCharts = ({
1414
}: ClusterResourceQuotaChartsProps): JSX.Element => {
1515
const { t } = useTranslation();
1616
const charts = Object.keys(clusterResourceQuota.status?.total?.hard ?? {}).map((resourceName) => {
17-
const clusterHard = clusterResourceQuota.status.total.hard[resourceName];
18-
const clusterUsed = clusterResourceQuota.status.total.used?.[resourceName];
17+
const clusterHard = clusterResourceQuota.status?.total?.hard?.[resourceName];
18+
const clusterUsed = clusterResourceQuota.status?.total?.used?.[resourceName];
1919

2020
const { label, percent } = getLabelAndUsage({
2121
resourceName,

‎frontend/packages/console-app/src/components/resource-quota/ResourceQuotaCharts.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,14 @@ type ResourceQuotaChartsProps = {
1212
const ResourceQuotaCharts = ({ resourceQuota }: ResourceQuotaChartsProps): JSX.Element => {
1313
const { t } = useTranslation();
1414
const charts = Object.keys(resourceQuota.status?.hard ?? {}).map((resourceName) => {
15-
const hard = resourceQuota.status.hard[resourceName];
16-
const used = resourceQuota.status.used?.[resourceName];
15+
const hard = resourceQuota.status?.hard?.[resourceName];
16+
const used = resourceQuota.status?.used?.[resourceName];
1717

18-
const { label, percent } = getLabelAndUsage({ resourceName, used, hard });
18+
const { label, percent } = getLabelAndUsage({
19+
resourceName,
20+
used,
21+
hard,
22+
});
1923
return (
2024
<div
2125
key={resourceName}

‎frontend/packages/console-app/src/components/resource-quota/utils.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,18 @@ const genericCountResources = [
1313
'openshift.io/imagestreams',
1414
];
1515

16-
export const getUsedPercentage = (hard: string, used: string) => {
16+
export const getUsedPercentage = (hard?: string, used?: string) => {
17+
if (!hard || !used) {
18+
return 0;
19+
}
20+
1721
let usedNum = convertToBaseValue(used);
1822
let hardNum = convertToBaseValue(hard);
1923

2024
if (!usedNum || !hardNum) {
2125
// try to get the value without unit
22-
usedNum = parseInt(usedNum, 10);
23-
hardNum = parseInt(hardNum, 10);
26+
usedNum = parseInt(used, 10);
27+
hardNum = parseInt(hard, 10);
2428
}
2529

2630
return !usedNum || !hardNum ? 0 : (usedNum / hardNum) * 100;
@@ -41,7 +45,7 @@ export const getLabelAndUsage = ({
4145
const percent = getUsedPercentage(hard, used);
4246

4347
return {
44-
label: useCount ? `${used || 0} of ${hard}` : humanizePercentage(percent).string,
48+
label: useCount ? `${used || 0} of ${hard || ''}` : humanizePercentage(percent).string,
4549
percent,
4650
};
4751
};

‎frontend/packages/console-app/src/components/storage/StorageClassProviders.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,71 +13,71 @@ export const isStorageOsAdminSecretNSRequired = (params: Parameters) => {
1313
};
1414

1515
export const validateAWSIopsPerGB = (params: Parameters) => {
16-
if (params.iopsPerGB.value && !params.iopsPerGB.value.match(/^\d+$/)) {
16+
if (params?.iopsPerGB?.value && !params?.iopsPerGB?.value?.match(/^\d+$/)) {
1717
// t(''console-app~IOPS per GiB must be a number')
1818
return 'console-app~IOPS per GiB must be a number';
1919
}
2020
return null;
2121
};
2222

2323
export const validateGcePdZone = (params: Parameters) => {
24-
if (params.zone.value !== '' && (params?.zones?.value ?? '') !== '') {
24+
if (params?.zone?.value !== '' && (params?.zones?.value ?? '') !== '') {
2525
// t('console-app~Zone and zones parameters must not be used at the same time')
2626
return 'console-app~Zone and zones parameters must not be used at the same time';
2727
}
2828
return null;
2929
};
3030

3131
export const validateGcePdZones = (params: Parameters) => {
32-
if (params.zones.value !== '' && (params?.zone?.value ?? '') !== '') {
32+
if (params?.zones?.value !== '' && (params?.zone?.value ?? '') !== '') {
3333
// t('console-app~Zone and zones parameters must not be used at the same time')
3434
return 'console-app~Zone and zones parameters must not be used at the same time';
3535
}
3636
return null;
3737
};
3838

3939
export const validateGCEReplicationType = (params: Parameters) => {
40-
if (params['replication-type'].value === 'regional-pd' && (params?.zone?.value ?? '') !== '') {
40+
if (params?.['replication-type']?.value === 'regional-pd' && (params?.zone?.value ?? '') !== '') {
4141
// t('console-app~Zone cannot be specified when replication type regional-pd is chosen. Use zones instead.')
4242
return 'console-app~Zone cannot be specified when replication type regional-pd is chosen. Use zones instead.';
4343
}
4444
return null;
4545
};
4646

4747
export const validateGlusterGidMin = (params: Parameters) => {
48-
if (params.gidMin.value !== '' && !params.gidMin.value.match(/^[1-9]\d*$/)) {
48+
if (params?.gidMin?.value !== '' && !params?.gidMin?.value?.match(/^[1-9]\d*$/)) {
4949
// t('console-app~GID min must be number')
5050
return 'console-app~GID min must be number';
5151
}
5252
return null;
5353
};
5454

5555
export const validateGlusterGidMax = (params: Parameters) => {
56-
if (params.gidMax.value !== '' && !params.gidMax.value.match(/^[1-9]\d*$/)) {
56+
if (params?.gidMax?.value !== '' && !params?.gidMax?.value?.match(/^[1-9]\d*$/)) {
5757
// t('console-app~GID max must be number')
5858
return 'console-app~GID max must be number';
5959
}
6060
return null;
6161
};
6262

6363
export const validatePortworxBlockSize = (params: Parameters) => {
64-
if (params.block_size.value !== '' && !params.block_size.value.match(/^[1-9]\d*$/)) {
64+
if (params?.block_size?.value !== '' && !params?.block_size?.value?.match(/^[1-9]\d*$/)) {
6565
// t('console-app~Snapshot interval must be a number')
6666
return 'console-app~Snapshot interval must be a number';
6767
}
6868
return null;
6969
};
7070

7171
export const validatePortworxReplicas = (params: Parameters) => {
72-
if (params.repl.value !== '' && !params.repl.value.match(/^[1-9]\d*$/)) {
72+
if (params?.repl?.value !== '' && !params?.repl?.value?.match(/^[1-9]\d*$/)) {
7373
// t('console-app~Number of replicas must be a number')
7474
return 'console-app~Number of replicas must be a number';
7575
}
7676
return null;
7777
};
7878

7979
export const validatePortworxSnapshotInterval = (params: Parameters) => {
80-
if (params.repl.value !== '' && !params.repl.value.match(/^[1-9]\d*$/)) {
80+
if (params?.repl?.value !== '' && !params?.repl?.value?.match(/^[1-9]\d*$/)) {
8181
// t('console-app~Snapshot interval must be a number')
8282
return 'console-app~Snapshot interval must be a number';
8383
}
@@ -86,8 +86,8 @@ export const validatePortworxSnapshotInterval = (params: Parameters) => {
8686

8787
export const validatePortworxAggregationLevel = (params: Parameters) => {
8888
if (
89-
params.aggregation_level.value !== '' &&
90-
!params.aggregation_level.value.match(/^[1-9]\d*$/)
89+
params?.aggregation_level?.value !== '' &&
90+
!params?.aggregation_level?.value?.match(/^[1-9]\d*$/)
9191
) {
9292
// t('console-app~Aggregation level must be a number')
9393
return 'console-app~Aggregation level must be a number';

‎frontend/packages/console-app/src/components/tour/GuidedTour.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ const GuidedTour: React.FC = () => {
88
const { t } = useTranslation();
99
if (!tour) return null;
1010
const { intro, steps, end } = tour;
11-
const { stepNumber, startTour, completedTour } = tourState;
11+
const { stepNumber, startTour, completedTour } = tourState || {};
12+
const currentStepNumber = stepNumber || 0;
1213

1314
if (completedTour) {
14-
onComplete();
15+
onComplete?.();
1516
return null;
1617
}
17-
if (startTour || stepNumber === 0)
18+
if (startTour || currentStepNumber === 0)
1819
return (
1920
<StepComponent
2021
{...intro}
@@ -23,7 +24,7 @@ const GuidedTour: React.FC = () => {
2324
backButtonText={t('console-app~Skip tour')}
2425
/>
2526
);
26-
if (stepNumber > totalSteps)
27+
if (currentStepNumber && totalSteps && currentStepNumber > totalSteps)
2728
return (
2829
<StepComponent
2930
{...end}
@@ -32,7 +33,7 @@ const GuidedTour: React.FC = () => {
3233
backButtonText={t('console-app~Back')}
3334
/>
3435
);
35-
const step = steps[stepNumber - 1];
36+
const step = steps?.[currentStepNumber - 1];
3637
return (
3738
<StepComponent
3839
{...step}

‎frontend/packages/console-app/src/components/tour/StepComponent.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,9 @@ const StepComponent: React.FC<StepComponentProps> = ({
3232
introBannerDark,
3333
modalVariant,
3434
}) => {
35-
const {
36-
tourDispatch,
37-
totalSteps,
38-
tourState: { stepNumber: step },
39-
} = React.useContext(TourContext);
35+
const { tourDispatch, totalSteps, tourState: { stepNumber: step } = {} } = React.useContext(
36+
TourContext,
37+
);
4038
return (
4139
<TourStepComponent
4240
key={step}
@@ -53,16 +51,16 @@ const StepComponent: React.FC<StepComponentProps> = ({
5351
showStepBadge={showStepBadge}
5452
nextButtonText={nextButtonText}
5553
backButtonText={backButtonText}
56-
onClose={() => tourDispatch({ type: TourActions.complete })}
54+
onClose={() => tourDispatch?.({ type: TourActions.complete })}
5755
onNext={() =>
58-
step > totalSteps
59-
? tourDispatch({ type: TourActions.complete })
60-
: tourDispatch({ type: TourActions.next })
56+
step && totalSteps && step > totalSteps
57+
? tourDispatch?.({ type: TourActions.complete })
58+
: tourDispatch?.({ type: TourActions.next })
6159
}
6260
onBack={() =>
6361
step === 0
64-
? tourDispatch({ type: TourActions.complete })
65-
: tourDispatch({ type: TourActions.back })
62+
? tourDispatch?.({ type: TourActions.complete })
63+
: tourDispatch?.({ type: TourActions.back })
6664
}
6765
/>
6866
);

0 commit comments

Comments
 (0)