Skip to content

Commit

Permalink
refactor to reuse available updates component
Browse files Browse the repository at this point in the history
  • Loading branch information
@miaawong
miaawong committed Aug 22, 2024
1 parent 2b62c65 commit d02382d
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 158 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
100 changes: 20 additions & 80 deletions web/src/features/Dashboard/components/AvailableUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,19 @@
import { useNavigate } from "react-router-dom";
import ReactTooltip from "react-tooltip";

import Icon from "@components/Icon";
import { Utilities } from "@src/utilities/utilities";
import { AvailableUpdate } from "@types";
import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";

const AvailableUpdateCard = ({
updates,
showReleaseNotes,
upgradeService,
appSlug,
}: {
updates: AvailableUpdate[];
showReleaseNotes: (releaseNotes: string) => void;
upgradeService: {
versionLabel?: string;
isLoading?: boolean;
error?: string;
} | null;
appSlug: string;
}) => {
const navigate = useNavigate();
const update = updates[0];
const isCurrentVersionLoading =
upgradeService?.versionLabel === update.versionLabel &&
upgradeService.isLoading;
return (
<div className="tw-mt-4">
<div className="flex alignItems--center u-marginBottom--15">
Expand All @@ -38,74 +27,25 @@ const AvailableUpdateCard = ({
</p>
</div>
<div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
<div 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" />
</>
)}

<ReactTooltip effect="solid" id="disable-deployment-tooltip" />

<button
className={"btn tw-ml-2 primary blue"}
onClick={() => navigate(`/app/${appSlug}/version-history`)}
disabled={!update.isDeployable || isCurrentVersionLoading}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
Go to Version history
</span>
</button>
</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>
<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>
);
Expand Down
7 changes: 0 additions & 7 deletions web/src/features/Dashboard/components/DashboardVersionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,6 @@ type State = {
versionToDeploy: Version | null;
viewLogsErrMsg: string;
yamlErrorDetails: string[];
upgradeService: {
versionLabel?: string;
isLoading?: boolean;
error?: string;
} | null;
};

const DashboardVersionCard = (props: Props) => {
Expand Down Expand Up @@ -167,7 +162,6 @@ const DashboardVersionCard = (props: Props) => {
versionToDeploy: null,
viewLogsErrMsg: "",
yamlErrorDetails: [],
upgradeService: {},
}
);
const navigate = useNavigate();
Expand Down Expand Up @@ -1595,7 +1589,6 @@ const DashboardVersionCard = (props: Props) => {
<AvailableUpdateCard
updates={state.availableUpdates}
showReleaseNotes={showReleaseNotes}
upgradeService={state.upgradeService}
appSlug={params.slug}
/>
)}
Expand Down

0 comments on commit d02382d

Please sign in to comment.