CNV-53287: fix the alignment issue on Settings -> User

kubevirt-ui · Dec 17, 2024 · d75a72e · d75a72e
1 parent e718135
commit d75a72e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx
@@ -7,6 +7,7 @@ import './ExpandSection.scss';
 
 type ExpandSectionProps = {
   className?: string;
+  dataTestID?: string;
   isDisabled?: boolean;
   isIndented?: boolean;
   toggleContent?: ReactNode;
@@ -16,6 +17,7 @@ type ExpandSectionProps = {
 const ExpandSection: FC<ExpandSectionProps> = ({
   children,
   className,
+  dataTestID,
   isDisabled = false,
   isIndented = true,
   toggleContent = null,
@@ -32,6 +34,7 @@ const ExpandSection: FC<ExpandSectionProps> = ({
   return (
     <ExpandableSection
       className={classNames(className, { 'expand-section__disabled': isDisabled }, 'ExpandSection')}
+      data-test-id={dataTestID}
       isExpanded={isExpanded}
       isIndented={isIndented}
       onToggle={(_event, expanded: boolean) => handleToggle(expanded)}

diff --git a/...eroverview/SettingsTab/UserTab/components/GettingStartedSection/GettingStartedSection.tsx b/...eroverview/SettingsTab/UserTab/components/GettingStartedSection/GettingStartedSection.tsx
@@ -17,18 +17,23 @@ const GettingStartedSection: FC = () => {
   const [quickStarts, setQuickStarts] = useKubevirtUserSettings('quickStart');
   const run = runningTourSignal.value;
   return (
-    <ExpandSection toggleText={t('Getting started resources')}>
+    <ExpandSection
+      dataTestID="settings-user-getting-started"
+      toggleText={t('Getting started resources')}
+    >
       <Stack hasGutter>
         <Switch
           onChange={(_event, value) =>
             setQuickStarts({ ...quickStarts, dontShowWelcomeModal: !value })
           }
           className="GettingStartedSection__switch-text"
+          data-test-id="welcome-information"
           isChecked={!quickStarts?.dontShowWelcomeModal}
           label={t('Welcome information')}
         />
         <Switch
           className="GettingStartedSection__switch-text"
+          data-test-id="guided-tour"
           isChecked={run}
           label={t('Guided tour')}
           onChange={!run && startTour}

diff --git a/...lusteroverview/SettingsTab/UserTab/components/ManageSSHKeySection/ManageSSHKeySection.tsx b/...lusteroverview/SettingsTab/UserTab/components/ManageSSHKeySection/ManageSSHKeySection.tsx
@@ -12,7 +12,7 @@ const ManageSSHKeySection: FC = () => {
   const { t } = useKubevirtTranslation();
 
   return (
-    <ExpandSection toggleText={t('Manage SSH keys')}>
+    <ExpandSection dataTestID="settings-user-ssh-key" toggleText={t('Manage SSH keys')}>
       <Stack hasGutter>
         <MutedTextSpan
           text={t(

diff --git a/...overview/SettingsTab/UserTab/components/TaskPermissionsSection/TaskPermissionsSection.tsx b/...overview/SettingsTab/UserTab/components/TaskPermissionsSection/TaskPermissionsSection.tsx
@@ -14,7 +14,7 @@ const TaskPermissionsSection: FC = () => {
   const { t } = useKubevirtTranslation();
   const { capabilitiesData, isLoading } = usePermissions();
   return (
-    <ExpandSection className="permissions-tab--main" toggleText={t('Permissions')}>
+    <ExpandSection dataTestID="settings-user-permissions" toggleText={t('Permissions')}>
       <Flex>
         <FlexItem>
           <Title headingLevel="h6" size="md">

diff --git a/src/views/clusteroverview/SettingsTab/UserTab/user-tab.scss b/src/views/clusteroverview/SettingsTab/UserTab/user-tab.scss
@@ -1,6 +1,5 @@
 .permissions-tab {
   &--main {
-    width: 35vw;
     &__divider {
       margin: var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--md) 0;
     }