Skip to content

Commit c9ecaf0

Browse files
miaawongmiaawong
authored
Show available updates in Dashboard (#4828)
1 parent 5c12db6 commit c9ecaf0

File tree

3 files changed

+241
-86
lines changed

3 files changed

+241
-86
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: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useNavigate } from "react-router-dom";
2+
3+
import { AvailableUpdate } from "@types";
4+
import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";
5+
6+
const AvailableUpdateCard = ({
7+
updates,
8+
showReleaseNotes,
9+
appSlug,
10+
}: {
11+
updates: AvailableUpdate[];
12+
showReleaseNotes: (releaseNotes: string) => void;
13+
appSlug: string;
14+
}) => {
15+
const navigate = useNavigate();
16+
const update = updates[0];
17+
return (
18+
<div className="tw-mt-4">
19+
<div className="flex alignItems--center u-marginBottom--15">
20+
<p className="u-fontSize--normal u-fontWeight--medium card-title">
21+
Latest Available Update
22+
</p>
23+
<p className="u-fontSize--normal">
24+
<span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
25+
({updates.length} available)
26+
</span>
27+
</p>
28+
</div>
29+
<div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
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>
49+
</div>
50+
</div>
51+
);
52+
};
53+
54+
export default AvailableUpdateCard;

0 commit comments

Comments
 (0)