Draft: MTV-2270: Make the "Cutover" button context aware #1537

jschuler · 2025-03-20T18:55:28Z

📝 Links

https://issues.redhat.com/browse/MTV-2270

📝 Description

In plans list, change "Cutover" button within the Migration type column to say either:

Edit cutover
Schedule cutover

These text changes also extend to the actions menu item

The "Edit cutover" button within the Migration type column will also gain a tooltip with the currently set cutover date.

Within plan details, add a context aware Cutover button next to the actions dropdown.

🎥 Demo

Screen.Recording.2025-03-20.at.2.36.07.PM.mov

📝 CC://

@sgratch

Signed-off-by: Joachim Schuler <[email protected]>

codecov-commenter · 2025-03-20T19:00:02Z

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes missing coverage. Please review.

Project coverage is 36.20%. Comparing base (13484d0) to head (f9eb5c7).
Report is 400 commits behind head on main.

Files with missing lines	Patch %	Lines
...ders/utils/components/DetailsPage/PageHeadings.tsx	33.33%	2 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1537      +/-   ##
==========================================
- Coverage   36.81%   36.20%   -0.61%     
==========================================
  Files         158      157       -1     
  Lines        2548     2596      +48     
  Branches      599      632      +33     
==========================================
+ Hits          938      940       +2     
- Misses       1428     1470      +42     
- Partials      182      186       +4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Signed-off-by: Joachim Schuler <[email protected]>

avivtur · 2025-03-23T16:09:49Z

...ages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx

+            <Tooltip content={cutoverTime}>
+              <Button
+                variant="secondary"
+                icon={<CalendarIcon />}
+                onClick={onClickPlanCutoverMigration}
+              >
+                {t('Edit cutover')}
+              </Button>
+            </Tooltip>
+          ) : (
+            <Button variant="primary" icon={<CalendarIcon />} onClick={onClickPlanCutoverMigration}>
+              {t('Schedule cutover')}
+            </Button>


this looks very similar to the block you made in MigrationTypeCell.tsx file,
Please extract this component and use it in both places

avivtur · 2025-03-23T16:13:55Z

packages/forklift-console-plugin/src/modules/Plans/modals/PlanCutoverMigrationModal.tsx

+        {cutoverSet ? (
+          <ForkliftTrans>
+            <p>
+              Edit the cutover for migration <strong className="co-break-word">{name}</strong>?
+            </p>
+          </ForkliftTrans>
+        ) : (
+          <ForkliftTrans>
+            <p>
+              Schedule the cutover for migration <strong className="co-break-word">{name}</strong>?
+            </p>
+          </ForkliftTrans>
+        )}


This can be simply:

<ForkliftTrans><p>{cutoverSet ? "Edit" : "Schedule"} the cutover for migration <strong className="co-break-word">{name}</strong>? </p></ForkliftTrans>

avivtur · 2025-03-23T16:14:35Z

packages/forklift-console-plugin/src/modules/Plans/modals/PlanCutoverMigrationModal.tsx

@@ -139,7 +137,7 @@ export const PlanCutoverMigrationModal: React.FC<PlanCutoverMigrationModalProps>
      isLoading={isLoading}
      isDisabled={!isDateValid || !isTimeValid}
    >
-      {t('Set cutover')}
+      {cutoverSet ? t('Edit cutover') : t('Schedule cutover')}


this and row 152 reapets itself, and I also see it PlanActionDropdownItems.tsx file, consider extracting it to a const or a util

avivtur · 2025-03-23T16:18:04Z

packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx

@@ -45,8 +45,7 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
  const [lastMigration] = usePlanMigration(plan);
  const [isButtonEnabled, setIsButtonEnabled] = useState(true);

-  const isWarmAndExecuting = plan.spec?.warm && isPlanExecuting(plan);
-  const isWaitingForCutover = isWarmAndExecuting && !isPlanArchived(plan);
+  const isWarmAndExecuting = plan.spec?.warm && isPlanExecuting(plan) && !isPlanArchived(plan);


This part also repeat itself a few times, consider extracting it to a const/util func

avivtur · 2025-03-23T16:18:50Z

packages/forklift-console-plugin/src/modules/Plans/views/list/components/MigrationTypeCell.tsx


  const onClickPlanCutoverMigration = () => {
    showModal(<PlanCutoverMigrationModal resource={plan} />);
  };

+  const cutoverSet = Boolean(lastMigration?.spec?.cutover);


This part also repeat itself a few times, consider extracting it to a const/util func

avivtur · 2025-03-23T16:19:05Z

packages/forklift-console-plugin/src/modules/Plans/views/list/components/MigrationTypeCell.tsx


  const onClickPlanCutoverMigration = () => {
    showModal(<PlanCutoverMigrationModal resource={plan} />);
  };

+  const cutoverSet = Boolean(lastMigration?.spec?.cutover);
+  const cutoverTime = DateTime.fromISO(lastMigration?.spec?.cutover).toLocaleString(


This part also repeat itself a few times, consider extracting it to a const/util func

avivtur · 2025-03-23T16:20:04Z

...ages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx

@@ -19,7 +23,8 @@ import {
  V1beta1StorageMap,
 } from '@kubev2v/types';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import { Level, List, ListItem, PageSection } from '@patternfly/react-core';
+import { Button, Level, List, ListItem, PageSection, Tooltip } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';


please change this import to be import {CalendarIcon} from '@patternfly/react-icons' and not the dist directory

sonarqubecloud · 2025-03-24T18:31:22Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

github-actions · 2025-04-24T02:54:30Z

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 15 days.

jschuler added 3 commits March 20, 2025 12:55

MTV-2270: Context aware Cutover button

2be06b3

Signed-off-by: Joachim Schuler <[email protected]>

schedule

cf56da1

Signed-off-by: Joachim Schuler <[email protected]>

Wait for migration loaded

3f9741c

Signed-off-by: Joachim Schuler <[email protected]>

Update modal text

0ea2111

Signed-off-by: Joachim Schuler <[email protected]>

avivtur reviewed Mar 23, 2025

View reviewed changes

wip

230e24e

jschuler changed the title ~~MTV-2270: Make the "Cutover" button context aware~~ Draft: MTV-2270: Make the "Cutover" button context aware Mar 24, 2025

Merge remote-tracking branch 'upstream/main' into mtv-2270

f9eb5c7

github-actions bot added the Stale label Apr 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draft: MTV-2270: Make the "Cutover" button context aware #1537

Draft: MTV-2270: Make the "Cutover" button context aware #1537

jschuler commented Mar 20, 2025

codecov-commenter commented Mar 20, 2025 •

edited

Loading

avivtur Mar 23, 2025

avivtur Mar 23, 2025

avivtur Mar 23, 2025

avivtur Mar 23, 2025

avivtur Mar 23, 2025

avivtur Mar 23, 2025

avivtur Mar 23, 2025

sonarqubecloud bot commented Mar 24, 2025

github-actions bot commented Apr 24, 2025

Draft: MTV-2270: Make the "Cutover" button context aware #1537

Are you sure you want to change the base?

Draft: MTV-2270: Make the "Cutover" button context aware #1537

Conversation

jschuler commented Mar 20, 2025

📝 Links

📝 Description

🎥 Demo

📝 CC://

codecov-commenter commented Mar 20, 2025 • edited Loading

Codecov Report

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

avivtur Mar 23, 2025

Choose a reason for hiding this comment

sonarqubecloud bot commented Mar 24, 2025

Quality Gate passed

github-actions bot commented Apr 24, 2025

codecov-commenter commented Mar 20, 2025 •

edited

Loading