Skip to content

Commit d02382d

Browse files
miaawongmiaawong
committed
refactor to reuse available updates component
1 parent 2b62c65 commit d02382d

File tree

3 files changed

+120
-158
lines changed

3 files changed

+120
-158
lines changed

‎web/src/components/apps/AvailableUpdatesComponent.tsx

Lines changed: 100 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,80 @@ import { Utilities } from "@src/utilities/utilities";
55
import { AvailableUpdate } from "@types";
66
import ReactTooltip from "react-tooltip";
77

8+
export const AvailableUpdateRow = ({
9+
update,
10+
index,
11+
showReleaseNotes,
12+
children,
13+
upgradeService,
14+
}: {
15+
update: AvailableUpdate;
16+
index: number;
17+
showReleaseNotes: (releaseNotes: string) => void;
18+
children: React.ReactNode;
19+
upgradeService?: {
20+
versionLabel?: string;
21+
isLoading?: boolean;
22+
error?: string;
23+
} | null;
24+
}) => {
25+
return (
26+
<div key={index} className="available-update-row">
27+
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
28+
<div className="flex-column">
29+
<div className="flex alignItems--center">
30+
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
31+
{update.versionLabel}
32+
</p>
33+
{update.isRequired && (
34+
<span className="status-tag required u-marginLeft--10">
35+
{" "}
36+
Required{" "}
37+
</span>
38+
)}
39+
</div>
40+
{update.upstreamReleasedAt && (
41+
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
42+
{" "}
43+
Released{" "}
44+
<span className="u-fontWeight--bold">
45+
{Utilities.dateFormat(
46+
update.upstreamReleasedAt,
47+
"MM/DD/YY @ hh:mm a z"
48+
)}
49+
</span>
50+
</p>
51+
)}
52+
</div>
53+
<div className="flex alignItems--center">
54+
{update?.releaseNotes && (
55+
<>
56+
<Icon
57+
icon="release-notes"
58+
size={24}
59+
onClick={() => showReleaseNotes(update?.releaseNotes)}
60+
data-tip="View release notes"
61+
className="u-marginRight--5 clickable"
62+
/>
63+
<ReactTooltip effect="solid" className="replicated-tooltip" />
64+
</>
65+
)}
66+
{children}
67+
</div>
68+
</div>
69+
{upgradeService?.error &&
70+
upgradeService?.versionLabel === update.versionLabel && (
71+
<div className="tw-my-4">
72+
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
73+
{upgradeService.error}
74+
error
75+
</span>
76+
</div>
77+
)}
78+
</div>
79+
);
80+
};
81+
882
const AvailableUpdatesComponent = ({
983
updates,
1084
showReleaseNotes,
@@ -71,78 +145,33 @@ const AvailableUpdatesComponent = ({
71145
upgradeService?.versionLabel === update.versionLabel &&
72146
upgradeService.isLoading;
73147
return (
74-
<div key={index} className="available-update-row">
75-
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
76-
<div className="flex-column">
77-
<div className="flex alignItems--center">
78-
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
79-
{update.versionLabel}
80-
</p>
81-
{update.isRequired && (
82-
<span className="status-tag required u-marginLeft--10">
83-
{" "}
84-
Required{" "}
85-
</span>
86-
)}
87-
</div>
88-
{update.upstreamReleasedAt && (
89-
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
90-
{" "}
91-
Released{" "}
92-
<span className="u-fontWeight--bold">
93-
{Utilities.dateFormat(
94-
update.upstreamReleasedAt,
95-
"MM/DD/YY @ hh:mm a z"
96-
)}
97-
</span>
98-
</p>
99-
)}
100-
</div>
101-
<div className="flex alignItems--center">
102-
{update?.releaseNotes && (
103-
<>
104-
<Icon
105-
icon="release-notes"
106-
size={24}
107-
onClick={() => showReleaseNotes(update?.releaseNotes)}
108-
data-tip="View release notes"
109-
className="u-marginRight--5 clickable"
110-
/>
111-
<ReactTooltip
112-
effect="solid"
113-
className="replicated-tooltip"
114-
/>
115-
</>
116-
)}
117-
<button
118-
className={"btn tw-ml-2 primary blue"}
119-
onClick={() => startUpgradeService(update)}
120-
disabled={!update.isDeployable || isCurrentVersionLoading}
148+
<AvailableUpdateRow
149+
update={update}
150+
index={index}
151+
showReleaseNotes={showReleaseNotes}
152+
upgradeService={upgradeService}
153+
>
154+
<>
155+
<button
156+
className={"btn tw-ml-2 primary blue"}
157+
onClick={() => startUpgradeService(update)}
158+
disabled={!update.isDeployable || isCurrentVersionLoading}
159+
>
160+
<span
161+
key={update.nonDeployableCause}
162+
data-tip-disable={update.isDeployable}
163+
data-tip={update.nonDeployableCause}
164+
data-for="disable-deployment-tooltip"
121165
>
122-
<span
123-
key={update.nonDeployableCause}
124-
data-tip-disable={update.isDeployable}
125-
data-tip={update.nonDeployableCause}
126-
data-for="disable-deployment-tooltip"
127-
>
128-
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
129-
</span>
130-
</button>
131-
<ReactTooltip
132-
effect="solid"
133-
id="disable-deployment-tooltip"
134-
/>
135-
</div>
136-
</div>
137-
{upgradeService?.error &&
138-
upgradeService?.versionLabel === update.versionLabel && (
139-
<div className="tw-my-4">
140-
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
141-
{upgradeService.error}
142-
</span>
143-
</div>
144-
)}
145-
</div>
166+
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
167+
</span>
168+
</button>
169+
<ReactTooltip
170+
effect="solid"
171+
id="disable-deployment-tooltip"
172+
/>
173+
</>
174+
</AvailableUpdateRow>
146175
);
147176
})}
148177
</div>

‎web/src/features/Dashboard/components/AvailableUpdateCard.tsx

Lines changed: 20 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
import { useNavigate } from "react-router-dom";
2-
import ReactTooltip from "react-tooltip";
32

4-
import Icon from "@components/Icon";
5-
import { Utilities } from "@src/utilities/utilities";
63
import { AvailableUpdate } from "@types";
4+
import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";
75

86
const AvailableUpdateCard = ({
97
updates,
108
showReleaseNotes,
11-
upgradeService,
129
appSlug,
1310
}: {
1411
updates: AvailableUpdate[];
1512
showReleaseNotes: (releaseNotes: string) => void;
16-
upgradeService: {
17-
versionLabel?: string;
18-
isLoading?: boolean;
19-
error?: string;
20-
} | null;
2113
appSlug: string;
2214
}) => {
2315
const navigate = useNavigate();
2416
const update = updates[0];
25-
const isCurrentVersionLoading =
26-
upgradeService?.versionLabel === update.versionLabel &&
27-
upgradeService.isLoading;
2817
return (
2918
<div className="tw-mt-4">
3019
<div className="flex alignItems--center u-marginBottom--15">
@@ -38,74 +27,25 @@ const AvailableUpdateCard = ({
3827
</p>
3928
</div>
4029
<div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
41-
<div className="available-update-row">
42-
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
43-
<div className="flex-column">
44-
<div className="flex alignItems--center">
45-
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
46-
{update.versionLabel}
47-
</p>
48-
{update.isRequired && (
49-
<span className="status-tag required u-marginLeft--10">
50-
{" "}
51-
Required{" "}
52-
</span>
53-
)}
54-
</div>
55-
{update.upstreamReleasedAt && (
56-
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
57-
{" "}
58-
Released{" "}
59-
<span className="u-fontWeight--bold">
60-
{Utilities.dateFormat(
61-
update.upstreamReleasedAt,
62-
"MM/DD/YY @ hh:mm a z"
63-
)}
64-
</span>
65-
</p>
66-
)}
67-
</div>
68-
<div className="flex alignItems--center">
69-
{update?.releaseNotes && (
70-
<>
71-
<Icon
72-
icon="release-notes"
73-
size={24}
74-
onClick={() => showReleaseNotes(update?.releaseNotes)}
75-
data-tip="View release notes"
76-
className="u-marginRight--5 clickable"
77-
/>
78-
<ReactTooltip effect="solid" className="replicated-tooltip" />
79-
</>
80-
)}
81-
82-
<ReactTooltip effect="solid" id="disable-deployment-tooltip" />
83-
84-
<button
85-
className={"btn tw-ml-2 primary blue"}
86-
onClick={() => navigate(`/app/${appSlug}/version-history`)}
87-
disabled={!update.isDeployable || isCurrentVersionLoading}
88-
>
89-
<span
90-
key={update.nonDeployableCause}
91-
data-tip-disable={update.isDeployable}
92-
data-tip={update.nonDeployableCause}
93-
data-for="disable-deployment-tooltip"
94-
>
95-
Go to Version history
96-
</span>
97-
</button>
98-
</div>
99-
</div>
100-
{upgradeService?.error &&
101-
upgradeService?.versionLabel === update.versionLabel && (
102-
<div className="tw-my-4">
103-
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
104-
{upgradeService.error}
105-
</span>
106-
</div>
107-
)}
108-
</div>
30+
<AvailableUpdateRow
31+
update={update}
32+
showReleaseNotes={showReleaseNotes}
33+
index={1}
34+
>
35+
<button
36+
className={"btn tw-ml-2 primary blue"}
37+
onClick={() => navigate(`/app/${appSlug}/version-history`)}
38+
>
39+
<span
40+
key={update.nonDeployableCause}
41+
data-tip-disable={update.isDeployable}
42+
data-tip={update.nonDeployableCause}
43+
data-for="disable-deployment-tooltip"
44+
>
45+
Go to Version history
46+
</span>
47+
</button>
48+
</AvailableUpdateRow>
10949
</div>
11050
</div>
11151
);

‎web/src/features/Dashboard/components/DashboardVersionCard.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,6 @@ type State = {
114114
versionToDeploy: Version | null;
115115
viewLogsErrMsg: string;
116116
yamlErrorDetails: string[];
117-
upgradeService: {
118-
versionLabel?: string;
119-
isLoading?: boolean;
120-
error?: string;
121-
} | null;
122117
};
123118

124119
const DashboardVersionCard = (props: Props) => {
@@ -167,7 +162,6 @@ const DashboardVersionCard = (props: Props) => {
167162
versionToDeploy: null,
168163
viewLogsErrMsg: "",
169164
yamlErrorDetails: [],
170-
upgradeService: {},
171165
}
172166
);
173167
const navigate = useNavigate();
@@ -1595,7 +1589,6 @@ const DashboardVersionCard = (props: Props) => {
15951589
<AvailableUpdateCard
15961590
updates={state.availableUpdates}
15971591
showReleaseNotes={showReleaseNotes}
1598-
upgradeService={state.upgradeService}
15991592
appSlug={params.slug}
16001593
/>
16011594
)}

0 commit comments

Comments
 (0)