InfoTab: Extract shared components and update UI

plugins/aks-desktop/src/components/CreateAKSProject/CreateAKSProject.tsx

@@ -4,11 +4,11 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import AzureAuthGuard from '../AzureAuth/AzureAuthGuard';
+import { ComputeStep } from '../shared/ComputeStep';
+import { NetworkingStep } from '../shared/NetworkingStep';
 import { AccessStep } from './components/AccessStep';
 import { BasicsStep } from './components/BasicsStep';
-import { ComputeStep } from './components/ComputeStep';
 import CreateAKSProjectPure from './components/CreateAKSProjectPure';
-import { NetworkingStep } from './components/NetworkingStep';
 import { ReviewStep } from './components/ReviewStep';
 import { useCreateAKSProjectWizard } from './hooks/useCreateAKSProjectWizard';
 

plugins/aks-desktop/src/components/CreateAKSProject/components/BasicsStep.tsx

@@ -16,9 +16,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useAzureAuth } from '../../../hooks/useAzureAuth';
 import type { ClusterCapabilities } from '../../../types/ClusterCapabilities';
 import { registerAKSCluster } from '../../../utils/azure/aks';
+import { FormField } from '../../shared/FormField';
 import type { BasicsStepProps } from '../types';
 import { ClusterConfigurePanel } from './ClusterConfigurePanel';
-import { FormField } from './FormField';
 import { SearchableSelect, SearchableSelectOption } from './SearchableSelect';
 import { ValidationAlert } from './ValidationAlert';
 

plugins/aks-desktop/src/components/CreateAKSProject/components/ComputeStep.stories.tsx

@@ -3,8 +3,8 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+import { ComputeStep } from '../../shared/ComputeStep';
 import type { ComputeStepProps } from '../types';
-import { ComputeStep } from './ComputeStep';
 
 const BASE_FORM_DATA = {
   projectName: 'azure-microservices-demo',

plugins/aks-desktop/src/components/CreateAKSProject/components/CreateAKSProjectPure.guidepup.test.tsx

@@ -115,21 +115,21 @@ vi.mock('@iconify/react', () => ({
   Icon: ({ icon, ...props }: any) => <span data-icon={icon} {...props} />,
 }));
 
+import { ComputeStep } from '../../shared/ComputeStep';
+import type { FormFieldProps } from '../../shared/FormField';
+import { FormField } from '../../shared/FormField';
+import { NetworkingStep } from '../../shared/NetworkingStep';
 import type {
   BreadcrumbProps,
   ComputeStepProps,
-  FormFieldProps,
   NetworkingStepProps,
   ReviewStepProps,
 } from '../types';
 import { STEPS } from '../types';
 import { AccessStep } from './AccessStep';
 import { Breadcrumb } from './Breadcrumb';
-import { ComputeStep } from './ComputeStep';
 import type { CreateAKSProjectPureProps } from './CreateAKSProjectPure';
 import CreateAKSProjectPure from './CreateAKSProjectPure';
-import { FormField } from './FormField';
-import { NetworkingStep } from './NetworkingStep';
 import { ReviewStep } from './ReviewStep';
 import type { SearchableSelectProps } from './SearchableSelect';
 import { SearchableSelect } from './SearchableSelect';

plugins/aks-desktop/src/components/CreateAKSProject/components/FormField.stories.tsx

@@ -3,8 +3,8 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import type { FormFieldProps } from '../types';
-import { FormField } from './FormField';
+import type { FormFieldProps } from '../../shared/FormField';
+import { FormField } from '../../shared/FormField';
 
 const BASE_PROPS: FormFieldProps = {
   label: 'Project Name',

plugins/aks-desktop/src/components/CreateAKSProject/components/NetworkingStep.stories.tsx

@@ -3,8 +3,8 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+import { NetworkingStep } from '../../shared/NetworkingStep';
 import type { NetworkingStepProps } from '../types';
-import { NetworkingStep } from './NetworkingStep';
 
 const BASE_FORM_DATA = {
   projectName: 'azure-microservices-demo',

plugins/aks-desktop/src/components/CreateAKSProject/types.ts

@@ -138,24 +138,6 @@ export interface BreadcrumbProps {
   onStepClick: (step: number) => void;
 }
 
-export interface FormFieldProps {
-  label: string;
-  value: string | number;
-  onChange: (value: string | number) => void;
-  type?: 'text' | 'email' | 'number' | 'textarea';
-  multiline?: boolean;
-  rows?: number;
-  placeholder?: string;
-  error?: boolean;
-  helperText?: string;
-  disabled?: boolean;
-  required?: boolean;
-  startAdornment?: React.ReactNode;
-  endAdornment?: React.ReactNode;
-  /** Ref for the input elemenet of this field */
-  inputRef?: React.Ref<HTMLInputElement>;
-}
-
 export interface ValidationAlertProps {
   type: 'error' | 'warning' | 'success' | 'info';
   message: string | React.ReactNode;
@@ -164,13 +146,6 @@ export interface ValidationAlertProps {
   show?: boolean;
 }
 
-export interface ResourceCardProps {
-  title: string;
-  icon: string;
-  iconColor: string;
-  children: React.ReactNode;
-}
-
 // Validation result types
 export interface ValidationResult {
   isValid: boolean;
@@ -233,16 +208,3 @@ export function mapUIRoleToAzureRole(uiRole: string): string {
 
   return roleMap[uiRole] || uiRole; // Fallback to original if not found
 }
-
-// Networking policy options
-export const INGRESS_OPTIONS = [
-  { value: 'AllowSameNamespace', label: 'Allow traffic within same namespace' },
-  { value: 'AllowAll', label: 'Allow all traffic' },
-  { value: 'DenyAll', label: 'Deny all traffic' },
-] as const;
-
-export const EGRESS_OPTIONS = [
-  { value: 'AllowAll', label: 'Allow all traffic' },
-  { value: 'AllowSameNamespace', label: 'Allow traffic within same namespace' },
-  { value: 'DenyAll', label: 'Deny all traffic' },
-] as const;

plugins/aks-desktop/src/components/CreateNamespace/CreateNamespace.tsx

@@ -20,11 +20,11 @@ import { useHistory } from 'react-router-dom';
 import { createNamespaceAsProject } from '../../utils/kubernetes/namespaceUtils';
 import { getClusterSettings, setClusterSettings } from '../../utils/shared/clusterSettings';
 import { Breadcrumb } from '../CreateAKSProject/components/Breadcrumb';
-import { FormField } from '../CreateAKSProject/components/FormField';
 import {
   SearchableSelect,
   SearchableSelectOption,
 } from '../CreateAKSProject/components/SearchableSelect';
+import { FormField } from '../shared/FormField';
 
 const STEPS = ['Basics', 'Review'] as const;
 

plugins/aks-desktop/src/components/InfoTab/InfoTab.tsx

@@ -2,18 +2,10 @@
 // Licensed under the Apache 2.0.
 
 import { useTranslation } from '@kinvolk/headlamp-plugin/lib';
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  CircularProgress,
-  Divider,
-  Typography,
-} from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material';
 import React from 'react';
-import { ComputeStep } from '../CreateAKSProject/components/ComputeStep';
-import { NetworkingStep } from '../CreateAKSProject/components/NetworkingStep';
+import { ComputeStep } from '../shared/ComputeStep';
+import { NetworkingStep } from '../shared/NetworkingStep';
 import { useInfoTab } from './hooks/useInfoTab';
 
 /**
@@ -54,54 +46,52 @@ const InfoTab: React.FC<InfoTabProps> = ({ project }) => {
   } = useInfoTab(project);
 
   return (
-    <Card>
-      <CardContent sx={{ minHeight: loading ? '100vh' : 'auto' }}>
-        {loading && (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              py: 4,
-              height: '100%',
-            }}
-          >
-            <CircularProgress />
-          </Box>
-        )}
-        {!loading && error && <Typography color="error">{error}</Typography>}
+    <Box sx={{ minHeight: loading ? '100vh' : 'auto', p: 3 }}>
+      {loading && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            py: 4,
+            height: '100%',
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      )}
+      {!loading && error && <Typography color="error">{error}</Typography>}
 
-        {!loading && !error && namespaceDetails && (
+      {!loading && !error && namespaceDetails && (
+        <Box>
+          <Box sx={{ mb: 3 }}>
+            <NetworkingStep
+              formData={formData}
+              onFormDataChange={handleFormDataChange}
+              validation={validation}
+            />
+          </Box>
+          <Divider sx={{ my: 2 }} />
           <Box>
-            <Box sx={{ mb: 3 }}>
-              <NetworkingStep
-                formData={formData}
-                onFormDataChange={handleFormDataChange}
-                validation={validation}
-              />
-            </Box>
-            <Divider sx={{ my: 2 }} />
-            <Box>
-              <ComputeStep
-                formData={formData}
-                onFormDataChange={handleFormDataChange}
-                validation={validation}
-              />
-            </Box>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 3 }}>
-              <Button
-                variant="contained"
-                color="primary"
-                disabled={!project.id || !hasChanges || !validation.isValid || updating}
-                onClick={handleSave}
-              >
-                {updating ? `${t('Updating')}...` : t('Update')}
-              </Button>
-            </Box>
+            <ComputeStep
+              formData={formData}
+              onFormDataChange={handleFormDataChange}
+              validation={validation}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 3 }}>
+            <Button
+              variant="contained"
+              color="primary"
+              disabled={!project.id || !hasChanges || !validation.isValid || updating}
+              onClick={handleSave}
+            >
+              {updating ? `${t('Updating')}...` : t('Update')}
+            </Button>
           </Box>
-        )}
-      </CardContent>
-    </Card>
+        </Box>
+      )}
+    </Box>
   );
 };
 

plugins/aks-desktop/src/components/CreateAKSProject/components/ComputeStep.tsx → plugins/aks-desktop/src/components/shared/ComputeStep.tsx

@@ -5,7 +5,7 @@ import { Icon } from '@iconify/react';
 import { useTranslation } from '@kinvolk/headlamp-plugin/lib';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
-import type { ComputeStepProps } from '../types';
+import type { ComputeStepProps } from '../CreateAKSProject/types';
 import { FormField } from './FormField';
 import { ResourceCard } from './ResourceCard';
 

plugins/aks-desktop/src/components/CreateAKSProject/components/FormField.tsx → plugins/aks-desktop/src/components/shared/FormField.tsx

@@ -4,7 +4,24 @@
 import { InputAdornment, TextField } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import React from 'react';
-import type { FormFieldProps } from '../types';
+
+export interface FormFieldProps {
+  label: string;
+  value: string | number;
+  onChange: (value: string | number) => void;
+  type?: 'text' | 'email' | 'number' | 'textarea';
+  multiline?: boolean;
+  rows?: number;
+  placeholder?: string;
+  error?: boolean;
+  helperText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  /** Ref for the input element of this field */
+  inputRef?: React.Ref<HTMLInputElement>;
+}
 
 /**
  * Reusable form field component with consistent styling