Skip to content

Commit

Permalink
Show available updates in Dashboard (#4828)
Browse files Browse the repository at this point in the history
  • Loading branch information
@miaawong
miaawong committed Aug 23, 2024
1 parent 5c12db6 commit c9ecaf0
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 86 deletions.
171 changes: 100 additions & 71 deletions web/src/components/apps/AvailableUpdatesComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,80 @@ import { Utilities } from "@src/utilities/utilities";
import { AvailableUpdate } from "@types";
import ReactTooltip from "react-tooltip";

export const AvailableUpdateRow = ({
update,
index,
showReleaseNotes,
children,
upgradeService,
}: {
update: AvailableUpdate;
index: number;
showReleaseNotes: (releaseNotes: string) => void;
children: React.ReactNode;
upgradeService?: {
versionLabel?: string;
isLoading?: boolean;
error?: string;
} | null;
}) => {
return (
<div key={index} className="available-update-row">
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
<div className="flex-column">
<div className="flex alignItems--center">
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
{update.versionLabel}
</p>
{update.isRequired && (
<span className="status-tag required u-marginLeft--10">
{" "}
Required{" "}
</span>
)}
</div>
{update.upstreamReleasedAt && (
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
{" "}
Released{" "}
<span className="u-fontWeight--bold">
{Utilities.dateFormat(
update.upstreamReleasedAt,
"MM/DD/YY @ hh:mm a z"
)}
</span>
</p>
)}
</div>
<div className="flex alignItems--center">
{update?.releaseNotes && (
<>
<Icon
icon="release-notes"
size={24}
onClick={() => showReleaseNotes(update?.releaseNotes)}
data-tip="View release notes"
className="u-marginRight--5 clickable"
/>
<ReactTooltip effect="solid" className="replicated-tooltip" />
</>
)}
{children}
</div>
</div>
{upgradeService?.error &&
upgradeService?.versionLabel === update.versionLabel && (
<div className="tw-my-4">
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
{upgradeService.error}
error
</span>
</div>
)}
</div>
);
};

const AvailableUpdatesComponent = ({
updates,
showReleaseNotes,
Expand Down Expand Up @@ -71,78 +145,33 @@ const AvailableUpdatesComponent = ({
upgradeService?.versionLabel === update.versionLabel &&
upgradeService.isLoading;
return (
<div key={index} className="available-update-row">
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
<div className="flex-column">
<div className="flex alignItems--center">
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
{update.versionLabel}
</p>
{update.isRequired && (
<span className="status-tag required u-marginLeft--10">
{" "}
Required{" "}
</span>
)}
</div>
{update.upstreamReleasedAt && (
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
{" "}
Released{" "}
<span className="u-fontWeight--bold">
{Utilities.dateFormat(
update.upstreamReleasedAt,
"MM/DD/YY @ hh:mm a z"
)}
</span>
</p>
)}
</div>
<div className="flex alignItems--center">
{update?.releaseNotes && (
<>
<Icon
icon="release-notes"
size={24}
onClick={() => showReleaseNotes(update?.releaseNotes)}
data-tip="View release notes"
className="u-marginRight--5 clickable"
/>
<ReactTooltip
effect="solid"
className="replicated-tooltip"
/>
</>
)}
<button
className={"btn tw-ml-2 primary blue"}
onClick={() => startUpgradeService(update)}
disabled={!update.isDeployable || isCurrentVersionLoading}
<AvailableUpdateRow
update={update}
index={index}
showReleaseNotes={showReleaseNotes}
upgradeService={upgradeService}
>
<>
<button
className={"btn tw-ml-2 primary blue"}
onClick={() => startUpgradeService(update)}
disabled={!update.isDeployable || isCurrentVersionLoading}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
</span>
</button>
<ReactTooltip
effect="solid"
id="disable-deployment-tooltip"
/>
</div>
</div>
{upgradeService?.error &&
upgradeService?.versionLabel === update.versionLabel && (
<div className="tw-my-4">
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
{upgradeService.error}
</span>
</div>
)}
</div>
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
</span>
</button>
<ReactTooltip
effect="solid"
id="disable-deployment-tooltip"
/>
</>
</AvailableUpdateRow>
);
})}
</div>
Expand Down
54 changes: 54 additions & 0 deletions web/src/features/Dashboard/components/AvailableUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useNavigate } from "react-router-dom";

import { AvailableUpdate } from "@types";
import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";

const AvailableUpdateCard = ({
updates,
showReleaseNotes,
appSlug,
}: {
updates: AvailableUpdate[];
showReleaseNotes: (releaseNotes: string) => void;
appSlug: string;
}) => {
const navigate = useNavigate();
const update = updates[0];
return (
<div className="tw-mt-4">
<div className="flex alignItems--center u-marginBottom--15">
<p className="u-fontSize--normal u-fontWeight--medium card-title">
Latest Available Update
</p>
<p className="u-fontSize--normal">
<span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
({updates.length} available)
</span>
</p>
</div>
<div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
<AvailableUpdateRow
update={update}
showReleaseNotes={showReleaseNotes}
index={1}
>
<button
className={"btn tw-ml-2 primary blue"}
onClick={() => navigate(`/app/${appSlug}/version-history`)}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
Go to Version history
</span>
</button>
</AvailableUpdateRow>
</div>
</div>
);
};

export default AvailableUpdateCard;
Loading

0 comments on commit c9ecaf0

Please sign in to comment.