diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json index aa953627c..4d919ff88 100644 --- a/locales/en/plugin__kubevirt-plugin.json +++ b/locales/en/plugin__kubevirt-plugin.json @@ -55,7 +55,7 @@ "<0>The descheduler evicts a running pod so that the pod can be rescheduled on a more suitable node.
<2>Note: This setting is disabled if the VirtualMachine is not live migratable.": "<0>The descheduler evicts a running pod so that the pod can be rescheduled on a more suitable node.
<2>Note: This setting is disabled if the VirtualMachine is not live migratable.", "<0>This is a Windows VirtualMachine but no Service for the RDP (Remote Desktop Protocol) can be found.
<2>For better experience accessing Windows console, it is recommended to use the RDP.<1>Create RDP Service": "<0>This is a Windows VirtualMachine but no Service for the RDP (Remote Desktop Protocol) can be found.
<2>For better experience accessing Windows console, it is recommended to use the RDP.<1>Create RDP Service", "<0>Unattend.xml<1>Unattend can be used to configure windows setup and can be picked up several times during windows setup/configuration.<2><0>{t('Learn more')}": "<0>Unattend.xml<1>Unattend can be used to configure windows setup and can be picked up several times during windows setup/configuration.<2><0>{t('Learn more')}", - "<0>Welcome to<1>OpenShift Virtualization<2>Use OpenShift Virtualization to run and manage virtualized workloads alongside container workloads. You can use it to manage both Linux and Windows virtual machines.<3>What do you want to do next?<4><5>": "<0>Welcome to<1>OpenShift Virtualization<2>Use OpenShift Virtualization to run and manage virtualized workloads alongside container workloads. You can use it to manage both Linux and Windows virtual machines.<3>What do you want to do next?<4><5>", + "<0>Welcome to<1>OpenShift Virtualization<2>Use OpenShift Virtualization to run and manage virtualized workloads alongside container workloads. You can manage both Linux and Windows virtual machines.<3>What do you want to do next?<4><5>": "<0>Welcome to<1>OpenShift Virtualization<2>Use OpenShift Virtualization to run and manage virtualized workloads alongside container workloads. You can manage both Linux and Windows virtual machines.<3>What do you want to do next?<4><5>", "2xlarge": "2xlarge", "3 (default)": "3 (default)", "4xlarge": "4xlarge", @@ -176,6 +176,7 @@ "Available only on Nodes with labels": "Available only on Nodes with labels", "Available volumes": "Available volumes", "Average latency": "Average latency", + "Back": "Back", "Back to form": "Back to form", "Back to form (Deletes DataVolume)": "Back to form (Deletes DataVolume)", "Balances performance, compatible with a broad range of workloads": "Balances performance, compatible with a broad range of workloads", @@ -185,6 +186,7 @@ "BandwidthPerMigration limits the amount of network bandwith live migrations are allowed to use. The value is in quantity per second. Defaults to 0 (no limit). ": "BandwidthPerMigration limits the amount of network bandwith live migrations are allowed to use. The value is in quantity per second. Defaults to 0 (no limit). ", "Base template": "Base template", "Based on the file extension it seems like you are trying to upload a file which is not supported ({{fileNameExtText}}).": "Based on the file extension it seems like you are trying to upload a file which is not supported ({{fileNameExtText}}).", + "Before creating a virtual machine, we recommend that you configure the public SSH key. It will be saved in the project as a secret. You can configure the public SSH key at a later time, but this is the easiest way.": "Before creating a virtual machine, we recommend that you configure the public SSH key. It will be saved in the project as a secret. You can configure the public SSH key at a later time, but this is the easiest way.", "Before you boot the VirtualMachine (VM) for the first time, add a public SSH key. Only RHEL 9 supports dynamic key injection, and in RHEL 9 you must enable dynamic SSH when you create the VM.": "Before you boot the VirtualMachine (VM) for the first time, add a public SSH key. Only RHEL 9 supports dynamic key injection, and in RHEL 9 you must enable dynamic SSH when you create the VM.", "BIOS": "BIOS", "Blank": "Blank", @@ -321,7 +323,6 @@ "Create a new blank PVC": "Create a new blank PVC", "Create a new custom Template": "Create a new custom Template", "Create a Virtual Machine from a template": "Create a Virtual Machine from a template", - "Create a virtual machine from a template (Quick start)": "Create a virtual machine from a template (Quick start)", "Create a Windows boot source": "Create a Windows boot source", "Create activation key": "Create activation key", "Create DataSource": "Create DataSource", @@ -437,6 +438,7 @@ "Disks tab": "Disks tab", "Display name": "Display name", "display name text area": "display name text area", + "Do not show this again": "Do not show this again", "Documentation": "Documentation", "Domain": "Domain", "Download": "Download", @@ -568,13 +570,13 @@ "Guest system logs are disabled at VirtualMachine": "Guest system logs are disabled at VirtualMachine", "Guest system logs disabled at cluster": "Guest system logs disabled at cluster", "Guest system logs not ready. Restart required": "Guest system logs not ready. Restart required", + "Guided tour": "Guided tour", "Hardware devices": "Hardware devices", "Hardware Devices": "Hardware Devices", "Hardware devices ({{devices}})": "Hardware devices ({{devices}})", "Headless mode": "Headless mode", "Healthy": "Healthy", "Help": "Help", - "Hide": "Hide", "High performance": "High performance", "History": "History", "Host devices": "Host devices", @@ -654,6 +656,7 @@ "Learn how to create, import, and run virtual machines on OpenShift with step-by-step instructions and tasks.": "Learn how to create, import, and run virtual machines on OpenShift with step-by-step instructions and tasks.", "Learn how to use VirtualMachines": "Learn how to use VirtualMachines", "Learn more": "Learn more", + "Learn more about key areas to complete workflows, increase productivity, and familiarize yourself with Virtualization using our resources.": "Learn more about key areas to complete workflows, increase productivity, and familiarize yourself with Virtualization using our resources.", "Learn more about MigrationPolicies": "Learn more about MigrationPolicies", "Learn more about network latency checkups": "Learn more about network latency checkups", "Learn more about Operators": "Learn more about Operators", @@ -781,6 +784,7 @@ "Networks misconfigured": "Networks misconfigured", "New": "New", "New secret name": "New secret name", + "Next": "Next", "NICs": "NICs", "No": "No", "No active users": "No active users", @@ -853,8 +857,10 @@ "O series": "O series", "Off": "Off", "OFF": "OFF", + "Okay, got it!": "Okay, got it!", "On": "On", "ON": "ON", + "On the Configuration tab on the VirtualMachine page, you can search for and edit any configurable item using the search box.": "On the Configuration tab on the VirtualMachine page, you can search for and edit any configurable item using the search box.", "Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode": "Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode", "Only one disk can be bootable at a time, this option is disabled if the VirtualMachine is running or if this disk is the current boot source": "Only one disk can be bootable at a time, this option is disabled if the VirtualMachine is running or if this disk is the current boot source", "Only one disk can be bootable at a time. The bootable flag will be removed from \"{{initialBootDiskName}}\" and placed on this disk.": "Only one disk can be bootable at a time. The bootable flag will be removed from \"{{initialBootDiskName}}\" and placed on this disk.", @@ -929,6 +935,7 @@ "Project is required.": "Project is required.", "Project labels": "Project labels", "Project name to clone the template to": "Project name to clone the template to", + "Project selector": "Project selector", "Provider": "Provider", "Provisioning": "Provisioning", "Public SSH key": "Public SSH key", @@ -1027,6 +1034,7 @@ "Search by labels...": "Search by labels...", "Search by name...": "Search by name...", "Search by reason...": "Search by reason...", + "Search for configurable items": "Search for configurable items", "Secondary NAD networks": "Secondary NAD networks", "seconds": "seconds", "Secret name": "Secret name", @@ -1085,9 +1093,9 @@ "Set the public SSH key to automatically apply to any new VirtualMachine you create in the selected project.": "Set the public SSH key to automatically apply to any new VirtualMachine you create in the selected project.", "Set the volume metadata to use the volume as a bootable image.": "Set the volume metadata to use the volume as a bootable image.", "Settings": "Settings", + "Settings configurations": "Settings configurations", "Share this disk between multiple VirtualMachines": "Share this disk between multiple VirtualMachines", "Shared access (RWX)": "Shared access (RWX)", - "Show": "Show", "Show all": "Show all", "Show all alerts": "Show all alerts", "Show less": "Show less", @@ -1135,11 +1143,13 @@ "Start this VirtualMachine after creation ({{runStrategy}})": "Start this VirtualMachine after creation ({{runStrategy}})", "Start this VirtualMachine in pause mode": "Start this VirtualMachine in pause mode", "Start time": "Start time", + "Start Tour": "Start Tour", "Start VirtualMachine once created": "Start VirtualMachine once created", "Started": "Started", "Status": "Status", "Status & Conditions": "Status & Conditions", "Status conditions": "Status conditions", + "Step {{current}}/{{size}}": "Step {{current}}/{{size}}", "Stop": "Stop", "Storage": "Storage", "Storage ({{disks}})": "Storage ({{disks}})", @@ -1195,6 +1205,7 @@ "Templates": "Templates", "Templates provided by {{providerName}} are not editable.": "Templates provided by {{providerName}} are not editable.", "Terms": "Terms", + "Thank you for taking the tour.
Stay up-to-date with Openshift Virtualization on our <4>Blog or continue to learn more in our <8>documentation.": "Thank you for taking the tour.
Stay up-to-date with Openshift Virtualization on our <4>Blog or continue to learn more in our <8>documentation.", "The channel to track and receive the updates from.": "The channel to track and receive the updates from.", "The cloud-init service is enabled by default in Fedora and RHEL images.": "The cloud-init service is enabled by default in Fedora and RHEL images.", "The DataImportCron polls disk images and imports them as PersistentVolumeClaims. You can configure the image source and other settings on the DataImportCron details page.": "The DataImportCron polls disk images and imports them as PersistentVolumeClaims. You can configure the image source and other settings on the DataImportCron details page.", @@ -1235,6 +1246,7 @@ "Time zone": "Time zone", "Timeout": "Timeout", "Timeout (minutes)": "Timeout (minutes)", + "To create virtual machines in a project, you must first create a new project and become the administrator.": "To create virtual machines in a project, you must first create a new project and become the administrator.", "To edit this template, contact your administrator.": "To edit this template, contact your administrator.", "To enable Quick create button, fill all the required parameters and storage fields": "To enable Quick create button, fill all the required parameters and storage fields", "To gain unlimited bandwidth, set to 0": "To gain unlimited bandwidth, set to 0", @@ -1271,7 +1283,6 @@ "Upload": "Upload", "Upload (Upload a new file to a PVC)": "Upload (Upload a new file to a PVC)", "Upload a base image from local disk": "Upload a base image from local disk", - "Upload a boot source (Quick start)": "Upload a boot source (Quick start)", "Upload a new file to a PVC. A new PVC will be created.": "Upload a new file to a PVC. A new PVC will be created.", "Upload a new volume, or use an existing PersistentVolumeClaim (PVC), VolumeSnapshot or DataSource.": "Upload a new volume, or use an existing PersistentVolumeClaim (PVC), VolumeSnapshot or DataSource.", "Upload canceled": "Upload canceled", @@ -1401,11 +1412,13 @@ "VolumeSnapshot project": "VolumeSnapshot project", "Warning": "Warning", "Warnings": "Warnings", + "We hope you found this tour helpful.
If you have any <4>feedback, we would appreciate hearing from you.": "We hope you found this tour helpful.
If you have any <4>feedback, we would appreciate hearing from you.", "We suggest you to create a custom Template from this {{ providerName }} Template.": "We suggest you to create a custom Template from this {{ providerName }} Template.", "Weight": "Weight", "Weight must be a number between 1-100": "Weight must be a number between 1-100", "Welcome information": "Welcome information", "Welcome modal": "Welcome modal", + "When selecting a DataSource that your virtual machines can boot from, you can add a volume that is not listed by clicking the <1>Add volume button.": "When selecting a DataSource that your virtual machines can boot from, you can add a volume that is not listed by clicking the <1>Add volume button.", "Whether to attach the default graphics device or not. VNC will not be available if checked": "Whether to attach the default graphics device or not. VNC will not be available if checked", "Whether to attach the default graphics device or not. VNC will not be available if checked.": "Whether to attach the default graphics device or not. VNC will not be available if checked.", "Will make disk persistent on next reboot": "Will make disk persistent on next reboot", @@ -1425,12 +1438,14 @@ "XML structure is not valid": "XML structure is not valid", "YAML": "YAML", "Yes": "Yes", + "You are ready to go!": "You are ready to go!", "You can customize the Templates storage by overriding the original parameters": "You can customize the Templates storage by overriding the original parameters", "You can edit bootable metadata": "You can edit bootable metadata", "You can edit the boot order in the <1>{t('Disks tab')}": "You can edit the boot order in the <1>{t('Disks tab')}", "You can host and manage virtualized workloads on the same platform as container-based workloads.": "You can host and manage virtualized workloads on the same platform as container-based workloads.", "You can select the boot source in the <2>Disks tab.": "You can select the boot source in the <2>Disks tab.", "You can select up to {{MAX_VIEW_COLS}} columns": "You can select up to {{MAX_VIEW_COLS}} columns", + "You can set the cluster and your individual preferences in the Settings tab on the Overview page.": "You can set the cluster and your individual preferences in the Settings tab on the Overview page.", "You can use cloud-init to initialize the operating system with a specific configuration when the VirtualMachine is started.": "You can use cloud-init to initialize the operating system with a specific configuration when the VirtualMachine is started.", "You don't have permission to perform this action": "You don't have permission to perform this action", "You must ensure that the configuration is correct before starting the VirtualMachine.": "You must ensure that the configuration is correct before starting the VirtualMachine.", diff --git a/package.json b/package.json index da7d2f8c8..aac5c6c03 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-helmet": "^6.1.0", "react-hook-form": "^7.31.2", "react-i18next": "^11.14.3", + "react-joyride": "^2.8.2", "react-router-dom": "5.3.x", "react-router-dom-v5-compat": "^6.22.0", "react-tagsinput": "^3.19.0", diff --git a/src/utils/components/GuidedTour/GuidedTour.tsx b/src/utils/components/GuidedTour/GuidedTour.tsx new file mode 100644 index 000000000..485317de4 --- /dev/null +++ b/src/utils/components/GuidedTour/GuidedTour.tsx @@ -0,0 +1,69 @@ +import React, { FC } from 'react'; +import Joyride, { ACTIONS, CallBackProps, EVENTS } from 'react-joyride'; +import { useLocation, useNavigate } from 'react-router-dom-v5-compat'; + +import { isEmpty } from '@kubevirt-utils/utils/utils'; +import { useSignals } from '@preact/signals-react/runtime'; + +import TourPopover from './components/TourPopover/TourPopover'; +import { + nextStep, + prevStep, + runningTourSignal, + stepIndexSignal, + stopTour, + tourSteps, +} from './utils/constants'; + +const GuidedTour: FC = () => { + const location = useLocation(); + const navigate = useNavigate(); + + useSignals(); + return ( + { + const { action, index, size, step, type } = callbackProps; + const route = step?.data?.route; + + if (!isEmpty(route) && location.pathname !== route) { + navigate(route); + } + + if (action === ACTIONS.CLOSE) { + stopTour(); + return; + } + + if (type === EVENTS.STEP_AFTER) { + if (action === ACTIONS.PREV) { + prevStep(); + return; + } + if (action === ACTIONS.NEXT) { + if (index === size - 1) { + stopTour(); + return; + } + nextStep(); + return; + } + } + }} + styles={{ + options: { + zIndex: 10000, + }, + }} + continuous + disableScrollParentFix + floaterProps={{ disableAnimation: true }} + run={runningTourSignal.value} + stepIndex={stepIndexSignal.value} + steps={tourSteps} + tooltipComponent={TourPopover as any} + /> + ); +}; + +export default GuidedTour; diff --git a/src/utils/components/GuidedTour/components/AddVolumeContent/AddVolumeContent.tsx b/src/utils/components/GuidedTour/components/AddVolumeContent/AddVolumeContent.tsx new file mode 100644 index 000000000..fe9aebf80 --- /dev/null +++ b/src/utils/components/GuidedTour/components/AddVolumeContent/AddVolumeContent.tsx @@ -0,0 +1,17 @@ +import React, { FC } from 'react'; +import { Trans } from 'react-i18next'; + +import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; + +const AddVolumeContent: FC = () => { + const { t } = useKubevirtTranslation(); + + return ( + + When selecting a DataSource that your virtual machines can boot from, you can add a volume + that is not listed by clicking the Add volume button. + + ); +}; + +export default AddVolumeContent; diff --git a/src/utils/components/GuidedTour/components/EndTourContent/EndTourContent.tsx b/src/utils/components/GuidedTour/components/EndTourContent/EndTourContent.tsx new file mode 100644 index 000000000..e4359db2a --- /dev/null +++ b/src/utils/components/GuidedTour/components/EndTourContent/EndTourContent.tsx @@ -0,0 +1,30 @@ +import React, { FC } from 'react'; +import { Trans } from 'react-i18next'; +import { Link } from 'react-router-dom-v5-compat'; + +import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; + +const EndTourContent: FC = () => { + const { t } = useKubevirtTranslation(); + + return ( + + Thank you for taking the tour. +
+ Stay up-to-date with Openshift Virtualization on our{' '} + + Blog + {' '} + or continue to learn more in our{' '} + + documentation + + . + + ); +}; + +export default EndTourContent; diff --git a/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.scss b/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.scss new file mode 100644 index 000000000..c705f67db --- /dev/null +++ b/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.scss @@ -0,0 +1,4 @@ +.kv-tour-popover__feedback-footer { + background-color: var(--pf-v5-global--BackgroundColor--dark-transparent-100); + padding: var(--pf-v5-global--spacer--md); +} diff --git a/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.tsx b/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.tsx new file mode 100644 index 000000000..fa928830d --- /dev/null +++ b/src/utils/components/GuidedTour/components/EndTourFooter/EndTourFooter.tsx @@ -0,0 +1,25 @@ +import React, { FC } from 'react'; +import { Trans } from 'react-i18next'; +import { Link } from 'react-router-dom-v5-compat'; + +import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; + +const EndTourFooter: FC = () => { + const { t } = useKubevirtTranslation(); + + return ( +
+ + We hope you found this tour helpful. +
+ If you have any{' '} + + feedback + + , we would appreciate hearing from you. + +
+ ); +}; + +export default EndTourFooter; diff --git a/src/utils/components/GuidedTour/components/TourPopover/TourPopover.scss b/src/utils/components/GuidedTour/components/TourPopover/TourPopover.scss new file mode 100644 index 000000000..8368a11e2 --- /dev/null +++ b/src/utils/components/GuidedTour/components/TourPopover/TourPopover.scss @@ -0,0 +1,28 @@ +.kv-tour-popover { + background-color: var(--pf-v5-c-popover__content--BackgroundColor); + + &__header { + font-size: var(--pf-v5-c-popover__title-text--FontSize); + font-weight: var(--pf-v5-global--FontWeight--bold); + padding-top: var(--pf-v5-global--spacer--md); + padding-left: var(--pf-v5-global--spacer--md); + } + + &__buttons-footer { + margin: var(--pf-v5-global--spacer--md); + } + + &__previous, + &__next { + margin-bottom: var(--pf-v5-global--spacer--md); + } + + &__step-counter { + padding: var(--pf-v5-global--spacer--xs); + } + + &__feedback-footer { + background-color: var(--pf-v5-global--BackgroundColor--200); + padding: var(--pf-v5-global--spacer--md); + } +} diff --git a/src/utils/components/GuidedTour/components/TourPopover/TourPopover.tsx b/src/utils/components/GuidedTour/components/TourPopover/TourPopover.tsx new file mode 100644 index 000000000..d2faf260e --- /dev/null +++ b/src/utils/components/GuidedTour/components/TourPopover/TourPopover.tsx @@ -0,0 +1,70 @@ +import React, { FC } from 'react'; +import { TooltipRenderProps } from 'react-joyride'; + +import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; +import { Button, ButtonVariant, Split, SplitItem } from '@patternfly/react-core'; +import { CloseIcon } from '@patternfly/react-icons'; +import { css } from '@patternfly/react-styles'; +import popoverStyles from '@patternfly/react-styles/css/components/Popover/popover'; + +import EndTourFooter from '../EndTourFooter/EndTourFooter'; + +import './TourPopover.scss'; + +const TourPopover: FC = ({ + backProps, + closeProps, + index, + isLastStep, + primaryProps, + size, + step, +}) => { + const { t } = useKubevirtTranslation(); + return ( +
+ + {step.title && {step.title}} + + + + + )} + + + + + {isLastStep && } +
+ ); +}; + +export default TourPopover; diff --git a/src/utils/components/GuidedTour/utils/constants.tsx b/src/utils/components/GuidedTour/utils/constants.tsx new file mode 100644 index 000000000..5f4902789 --- /dev/null +++ b/src/utils/components/GuidedTour/utils/constants.tsx @@ -0,0 +1,157 @@ +import React from 'react'; +import { Step } from 'react-joyride'; + +import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt'; +import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation'; +import { signal } from '@preact/signals-react'; + +import AddVolumeContent from '../components/AddVolumeContent/AddVolumeContent'; +import EndTourContent from '../components/EndTourContent/EndTourContent'; + +export const runningTourSignal = signal(false); +export const stepIndexSignal = signal(0); + +export const nextStep = () => { + stepIndexSignal.value++; +}; +export const prevStep = () => { + if (stepIndexSignal.value > 0) { + --stepIndexSignal.value; + } +}; + +export const startTour = () => { + if (stepIndexSignal.value >= 6) stepIndexSignal.value = 0; + runningTourSignal.value = true; +}; +export const stopTour = () => { + runningTourSignal.value = false; +}; + +export const resetTour = () => { + stepIndexSignal.value = 0; +}; + +export const tourSteps: Step[] = [ + { + content: t( + 'Learn more about key areas to complete workflows, increase productivity, and familiarize yourself with Virtualization using our resources.', + ), + data: { + route: '/k8s/all-namespaces/virtualization-overview', + }, + disableBeacon: true, + placement: 'bottom', + target: '#tour-step-resources', + title: t('Getting started resources'), + }, + { + content: t( + 'To create virtual machines in a project, you must first create a new project and become the administrator.', + ), + data: { route: '/k8s/all-namespaces/virtualization-overview' }, + disableBeacon: true, + placement: 'right', + target: '.co-namespace-dropdown', + title: t('Project selector'), + }, + { + content: t( + 'You can set the cluster and your individual preferences in the Settings tab on the Overview page.', + ), + data: { route: '/k8s/all-namespaces/virtualization-overview/settings' }, + disableBeacon: true, + placement: 'bottom', + target: '[data-test-id="horizontal-link-Settings"]', + title: t('Settings configurations'), + }, + { + content: , + data: { route: '/k8s/all-namespaces/catalog' }, + disableBeacon: false, + placement: 'bottom', + target: '#tour-step-add-volume', + title: t('Add volume'), + }, + { + content: t( + 'Before creating a virtual machine, we recommend that you configure the public SSH key. It will be saved in the project as a secret. You can configure the public SSH key at a later time, but this is the easiest way.', + ), + data: { route: '/k8s/all-namespaces/catalog' }, + disableBeacon: true, + placement: 'left-start', + target: '#tour-step-ssh', + title: t('Public SSH key'), + }, + { + content: t( + 'On the Configuration tab on the VirtualMachine page, you can search for and edit any configurable item using the search box.', + ), + data: { + route: '/k8s/all-namespaces/kubevirt.io~v1~VirtualMachine/rhel9-tour-guide/configuration', + }, + disableBeacon: true, + placement: 'bottom', + target: '#VirtualMachineConfigurationTabSearch-autocomplete-search', + title: t('Search for configurable items'), + }, + { + content: , + data: { route: '/k8s/all-namespaces/catalog' }, + disableBeacon: true, + placement: 'center', + target: 'body', + title: t('You are ready to go!'), + }, +]; + +export const tourGuideVM: V1VirtualMachine = { + apiVersion: 'kubevirt.io/v1', + kind: 'VirtualMachine', + metadata: { + name: 'rhel9-tour-guide', + namespace: 'default', + }, + spec: { + dataVolumeTemplates: [ + { + metadata: { + name: 'rhel9-volume-tour-guide', + }, + spec: { + sourceRef: { + kind: 'DataSource', + name: 'rhel9', + }, + storage: { + resources: {}, + }, + }, + }, + ], + instancetype: { + inferFromVolume: 'rhel9-volume-tour-guide', + }, + preference: { + inferFromVolume: 'rhel9-volume-tour-guide', + }, + runStrategy: 'Always', + template: { + spec: { + domain: { + devices: {}, + resources: {}, + }, + terminationGracePeriodSeconds: 180, + volumes: [ + { + dataVolume: { + name: 'rhel9-volume-tour-guide', + }, + name: 'rhel9-volume-tour-guide', + }, + ], + }, + }, + }, +}; diff --git a/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx b/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx index 3d322fd2d..a844f6eaa 100644 --- a/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx +++ b/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx @@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react'; import SelectInstanceTypeSection from '@catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/SelectInstanceTypeSection'; import VMDetailsSection from '@catalog/CreateFromInstanceTypes/components/VMDetailsSection/VMDetailsSection'; +import GuidedTour from '@kubevirt-utils/components/GuidedTour/GuidedTour'; import Loading from '@kubevirt-utils/components/Loading/Loading'; import { DEFAULT_NAMESPACE } from '@kubevirt-utils/constants/constants'; import { ALL_NAMESPACES_SESSION_KEY } from '@kubevirt-utils/hooks/constants'; @@ -61,6 +62,7 @@ const CreateFromInstanceType: FC = () => { return ( <> + diff --git a/src/views/catalog/CreateFromInstanceTypes/components/AddBootableVolumeButton/AddBootableVolumeButton.tsx b/src/views/catalog/CreateFromInstanceTypes/components/AddBootableVolumeButton/AddBootableVolumeButton.tsx index 3a25fae78..e78e797ca 100644 --- a/src/views/catalog/CreateFromInstanceTypes/components/AddBootableVolumeButton/AddBootableVolumeButton.tsx +++ b/src/views/catalog/CreateFromInstanceTypes/components/AddBootableVolumeButton/AddBootableVolumeButton.tsx @@ -26,6 +26,7 @@ const AddBootableVolumeButton: FC = ({ loadError } )) } + id="tour-step-add-volume" isDisabled={!!loadError || !canCreate} variant={ButtonVariant.secondary} > diff --git a/src/views/catalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsRightGrid.tsx b/src/views/catalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsRightGrid.tsx index 75d8f0826..4e2be2f7d 100644 --- a/src/views/catalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsRightGrid.tsx +++ b/src/views/catalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsRightGrid.tsx @@ -105,7 +105,7 @@ const DetailsRightGrid: FC = () => { /> )) } - descriptionHeader={t('Public SSH key')} + descriptionHeader={{t('Public SSH key')}} isEdit={!isChangingNamespace} /> diff --git a/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx b/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx index e362a3972..ed82633d2 100644 --- a/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx +++ b/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx @@ -95,7 +95,10 @@ const CustomizeITVMFooter: FC = () => { - - ))} - + + + + + + + + + + + + ); }; diff --git a/src/views/welcome/utils/constants.ts b/src/views/welcome/utils/constants.ts deleted file mode 100644 index 8dcdbc4ac..000000000 --- a/src/views/welcome/utils/constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const createVMQuickUrl = '/quickstart?quickstart=creating-virtual-machine'; -export const uploadBootUrl = '/quickstart?quickstart=upload-boot-source'; diff --git a/src/views/welcome/utils/types.ts b/src/views/welcome/utils/types.ts deleted file mode 100644 index 4a86321f4..000000000 --- a/src/views/welcome/utils/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ButtonVariant } from '@patternfly/react-core'; - -export type WelcomeModalButtonsData = { - className?: string; - name: string; - url: string; - variant?: ButtonVariant; -}; diff --git a/src/views/welcome/utils/utils.ts b/src/views/welcome/utils/utils.ts deleted file mode 100644 index 142b3225f..000000000 --- a/src/views/welcome/utils/utils.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ALL_NAMESPACES } from '@kubevirt-utils/hooks/constants'; -import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation'; -import { ButtonVariant } from '@patternfly/react-core'; - -import { createVMQuickUrl, uploadBootUrl } from './constants'; -import { WelcomeModalButtonsData } from './types'; - -export const welcomeModalButtons = (ns: string): WelcomeModalButtonsData[] => { - const namespace = ns ? `ns/${ns}` : ALL_NAMESPACES; - - return [ - { - className: 'WelcomeModal__button', - name: t('Create VirtualMachine'), - url: `/k8s/${namespace}/catalog`, - variant: ButtonVariant.primary, - }, - { - name: t('Create a virtual machine from a template (Quick start)'), - url: createVMQuickUrl, - }, - { name: t('Upload a boot source (Quick start)'), url: uploadBootUrl }, - ]; -}; diff --git a/yarn.lock b/yarn.lock index 611068ecb..7375615b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -516,6 +516,16 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@gilbarbara/deep-equal@^0.1.1": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz#1a106721368dba5e7e9fb7e9a3a6f9efbd8df36d" + integrity sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA== + +"@gilbarbara/deep-equal@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz#9c72ed0b2e6f8edb1580217e28d78b5b03ad4aee" + integrity sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw== + "@gulpjs/to-absolute-glob@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz#1fc2460d3953e1d9b9f2dfdb4bcc99da4710c021" @@ -3190,6 +3200,11 @@ dedent@^0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA== +deep-diff@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26" + integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg== + deep-is@^0.1.3, deep-is@~0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" @@ -3200,6 +3215,11 @@ deepmerge@^4.2.2: resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== +deepmerge@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + default-gateway@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71" @@ -5116,6 +5136,16 @@ is-installed-globally@~0.4.0: global-dirs "^3.0.0" is-path-inside "^3.0.2" +is-lite@^0.8.2: + version "0.8.2" + resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.8.2.tgz#26ab98b32aae8cc8b226593b9a641d2bf4bd3b6a" + integrity sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw== + +is-lite@^1.2.0, is-lite@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-1.2.1.tgz#401f30bfccd34cb8cc1283f958907c97859d8f25" + integrity sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw== + is-negated-glob@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2" @@ -6872,6 +6902,11 @@ pluralize@^8.0.0: resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1" integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA== +popper.js@^1.16.0: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + postcss-modules-extract-imports@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" @@ -7134,6 +7169,17 @@ react-fast-compare@^3.1.1, react-fast-compare@^3.2.0: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-floater@^0.7.9: + version "0.7.9" + resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.7.9.tgz#b15a652e817f200bfa42a2023ee8d3105803b968" + integrity sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg== + dependencies: + deepmerge "^4.3.1" + is-lite "^0.8.2" + popper.js "^1.16.0" + prop-types "^15.8.1" + tree-changes "^0.9.1" + react-helmet@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" @@ -7157,6 +7203,11 @@ react-i18next@^11.14.3, react-i18next@^11.7.3: "@babel/runtime" "^7.14.5" html-parse-stringify "^3.0.1" +react-innertext@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0" + integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q== + react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7172,6 +7223,23 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-joyride@^2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/react-joyride/-/react-joyride-2.8.2.tgz#9165f4a19a4034a8f590593247f56b57f3c5efbe" + integrity sha512-2QY8HB1G0I2OT0PKMUz7gg2HAjdkG2Bqi13r0Bb1V16PAwfb9khn4wWBTOJsGsjulbAWiQ3/0YrgNUHGFmuifw== + dependencies: + "@gilbarbara/deep-equal" "^0.3.1" + deep-diff "^1.0.2" + deepmerge "^4.3.1" + is-lite "^1.2.1" + react-floater "^0.7.9" + react-innertext "^1.1.5" + react-is "^16.13.1" + scroll "^3.0.1" + scrollparent "^2.1.0" + tree-changes "^0.11.2" + type-fest "^4.18.2" + react-redux@7.2.2: version "7.2.2" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736" @@ -7627,6 +7695,16 @@ schema-utils@^4.0.0: ajv-formats "^2.1.1" ajv-keywords "^5.0.0" +scroll@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/scroll/-/scroll-3.0.1.tgz#d5afb59fb3592ee3df31c89743e78b39e4cd8a26" + integrity sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg== + +scrollparent@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.1.0.tgz#6cae915c953835886a6ba0d77fdc2bb1ed09076d" + integrity sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA== + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -8334,6 +8412,22 @@ tr46@^2.1.0: dependencies: punycode "^2.1.1" +tree-changes@^0.11.2: + version "0.11.2" + resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.11.2.tgz#e02e65c4faae6230dfe357aa97a26e8eb7c7d321" + integrity sha512-4gXlUthrl+RabZw6lLvcCDl6KfJOCmrC16BC5CRdut1EAH509Omgg0BfKLY+ViRlzrvYOTWR0FMS2SQTwzumrw== + dependencies: + "@gilbarbara/deep-equal" "^0.3.1" + is-lite "^1.2.0" + +tree-changes@^0.9.1: + version "0.9.3" + resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.9.3.tgz#89433ab3b4250c2910d386be1f83912b7144efcc" + integrity sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ== + dependencies: + "@gilbarbara/deep-equal" "^0.1.1" + is-lite "^0.8.2" + ts-jest@^27.1.1: version "27.1.5" resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.5.tgz#0ddf1b163fbaae3d5b7504a1e65c914a95cff297" @@ -8469,6 +8563,11 @@ type-fest@^0.6.0: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b" integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg== +type-fest@^4.18.2: + version "4.21.0" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.21.0.tgz#2eec399d9bda4ac686286314d07c6675fef3fdd8" + integrity sha512-ADn2w7hVPcK6w1I0uWnM//y1rLXZhzB9mr0a3OirzclKF1Wp6VzevUmzz/NRAWunOT6E8HrnpGY7xOfc6K57fA== + type-is@~1.6.18: version "1.6.18" resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"