Requested Refactoring changes

fabianwolski · fabianwolski · commit bce63febf4ee · 2025-04-02T17:16:10.000+02:00
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -145,15 +145,15 @@
     "mainCommandDescription": "Run this command to delete the workspace:",
     "verificationCommandDescription": "To verify the workspace has been deleted, run:"
   },
-  "DeleteMcpDialog": {
+  "KubectlDeleteMcpDialog": {
     "title": "Delete a Managed Control Plane",
     "introSection1": "The below will help you delete the Managed Control Plane \"{{mcpName}}\" from workspace \"{{workspaceNamespace}}\" using kubectl.",
     "introSection2": "Remember that this action is <bold1>irreversible</bold1> and all resources managed by this control plane will be <bold2>permanently deleted</bold2>.",
     "annotateCommand": "First, annotate the ManagedControlPlane to confirm deletion:",
     "deleteCommand": "Run this command to delete the Managed Control Plane:",
     "verificationCommandDescription": "To verify the MCP has been deleted, run:"
   },
-  "KubectlProjectDialog": {
+  "KubectlCreateProjectDialog": {
     "title": "Create a Project",
     "introSection": "A Project is the starting point to our ManagedControlPlane offering. Projects are usually created for each Organization/Team or similar root setups.",
     "formFields": {
@@ -176,7 +176,7 @@
     "resultCommandDescription": "To see the result of the project creation, run the below command:",
     "namespaceCommandDescription": "A namespace is automatically generated for your project:"
   },
-  "KubectlWorkspaceDialog": {
+  "KubectlCreateWorkspaceDialog": {
     "title": "Create a Workspace",
     "introSection": "Let's add a Workspace to our Project. We use workspaces to separate productive and non-productive ManagedControlPlanes.",
     "formFields": {
diff --git a/src/components/ControlPlanes/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard.tsx
@@ -99,7 +99,7 @@ export function ControlPlaneCard({
       </Card>
       <DeleteConfirmationDialog
         resourceName={controlPlane.metadata.name}
-        resourceComponent={
+        kubectl={
           <KubectlDeleteMcp
             projectName={projectName}
             workspaceName={workspace.metadata.name}
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -155,8 +155,7 @@ export function ControlPlaneListWorkspaceGridTile({
       </ObjectPageSection>
       <DeleteConfirmationDialog
         resourceName={workspaceName}
-        projectName={projectName}
-        resourceComponent={
+        kubectl={
           <KubectlDeleteWorkspace
             projectName={projectName}
             resourceName={workspaceName}
diff --git a/src/components/Dialogs/CreateProjectWorkspaceDialog.tsx b/src/components/Dialogs/CreateProjectWorkspaceDialog.tsx
@@ -12,15 +12,14 @@ import {
 import { Member } from '../../lib/api/types/shared/members';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 
-import { FormEvent } from 'react';
+import { FormEvent, useState } from 'react';
 import { KubectlInfoButton } from './KubectlCommandInfo/KubectlInfoButton.tsx';
-import { KubectlWorkspaceDialog } from './KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx';
-import { KubectlProjectDialog } from './KubectlCommandInfo/KubectlCreateProjectDialog.tsx';
+import { KubectlCreateWorkspaceDialog } from './KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx';
+import { KubectlCreateProjectDialog } from './KubectlCommandInfo/KubectlCreateProjectDialog.tsx';
 
 import { EditMembers } from '../Members/EditMembers.tsx';
 // import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
 import { useTranslation } from 'react-i18next';
-import { useDialog } from './UseDialog.tsx';
 
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
@@ -59,7 +58,11 @@ export function CreateProjectWorkspaceDialog({
 }: CreateProjectWorkspaceDialogProps) {
   // const { links } = useFrontendConfig();
   const { t } = useTranslation();
-  const kubectlDialog = useDialog();
+  const [isKubectlDialogOpen, setIsKubectlDialogOpen] = useState(false);
+
+  const openKubectlDialog = () => setIsKubectlDialogOpen(true);
+  const closeKubectlDialog = () => setIsKubectlDialogOpen(false);
+
   return (
     <>
       <Dialog
@@ -74,7 +77,7 @@ export function CreateProjectWorkspaceDialog({
               <div
                 style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
               >
-                <KubectlInfoButton onClick={kubectlDialog.open} />
+                <KubectlInfoButton onClick={openKubectlDialog} />
                 <Button onClick={() => setIsOpen(false)}>
                   {' '}
                   {t('CreateProjectWorkspaceDialog.cancelButton')}
@@ -95,14 +98,14 @@ export function CreateProjectWorkspaceDialog({
           setValue={setValue}
         />
       </Dialog>
-      <KubectlWorkspaceDialog
+      <KubectlCreateWorkspaceDialog
         project={projectName}
-        isOpen={kubectlDialog.isOpen && !!projectName}
-        onClose={kubectlDialog.close}
+        isOpen={isKubectlDialogOpen && !!projectName}
+        onClose={closeKubectlDialog}
       />
-      <KubectlProjectDialog
-        isOpen={kubectlDialog.isOpen && !projectName}
-        onClose={kubectlDialog.close}
+      <KubectlCreateProjectDialog
+        isOpen={isKubectlDialogOpen && !projectName}
+        onClose={closeKubectlDialog}
       />
       <ErrorDialog ref={errorDialogRef} />
     </>
diff --git a/src/components/Dialogs/DeleteConfirmationDialog.test.tsx b/src/components/Dialogs/DeleteConfirmationDialog.test.tsx
@@ -8,7 +8,7 @@ describe('DeleteConfirmationDialog', () => {
         isOpen={true}
         setIsOpen={cy.stub().as('setIsOpen')}
         resourceName="test-resource"
-        resourceComponent={<div>Resource Component</div>}
+        kubectl={<div>Resource Component</div>}
         onDeletionConfirmed={cy.stub().as('onDeletionConfirmed')}
         onCanceled={cy.stub().as('onCanceled')}
         {...props}
diff --git a/src/components/Dialogs/DeleteConfirmationDialog.tsx b/src/components/Dialogs/DeleteConfirmationDialog.tsx
@@ -17,8 +17,7 @@ interface DeleteConfirmationDialogProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   resourceName: string;
-  projectName?: string;
-  resourceComponent: ReactNode;
+  kubectl: ReactNode;
   onDeletionConfirmed?: () => void;
   onCanceled?: () => void;
 }
@@ -29,7 +28,7 @@ export function DeleteConfirmationDialog({
   resourceName,
   onDeletionConfirmed,
   onCanceled,
-  resourceComponent,
+  kubectl,
 }: DeleteConfirmationDialogProps) {
   const [confirmed, setConfirmed] = useState(false);
   const confirmationInput = useRef<InputDomRef>(null);
@@ -116,7 +115,7 @@ export function DeleteConfirmationDialog({
                 onInput={onConfirmationInputChange}
               />
             </FormItem>
-            <FormItem>{resourceComponent}</FormItem>
+            <FormItem>{kubectl}</FormItem>
           </FormGroup>
         </Form>
       </Dialog>
diff --git a/src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx b/src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx
@@ -1,9 +1,9 @@
-import { DeleteMcpDialog } from '../KubectlDeleteMcpDialog';
+import { useState } from 'react';
+import { KubectlDeleteMcpDialog } from '../KubectlDeleteMcpDialog';
 import { KubectlInfoButton } from '../KubectlInfoButton';
-import { useDialog } from '../../UseDialog';
 
 interface KubectlDeleteMcpProps {
-  projectName?: string;
+  projectName: string;
   workspaceName: string;
   resourceName: string;
 }
@@ -13,17 +13,20 @@ export const KubectlDeleteMcp = ({
   workspaceName,
   resourceName,
 }: KubectlDeleteMcpProps) => {
-  const infoDialog = useDialog();
+  const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
+
+  const openInfoDialog = () => setIsInfoDialogOpen(true);
+  const closeInfoDialog = () => setIsInfoDialogOpen(false);
 
   return (
     <>
-      <KubectlInfoButton onClick={infoDialog.open} />
-      <DeleteMcpDialog
+      <KubectlInfoButton onClick={openInfoDialog} />
+      <KubectlDeleteMcpDialog
         projectName={projectName}
         workspaceName={workspaceName}
         resourceName={resourceName}
-        isOpen={infoDialog.isOpen}
-        onClose={infoDialog.close}
+        isOpen={isInfoDialogOpen}
+        onClose={closeInfoDialog}
       />
     </>
   );
diff --git a/src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteWorkspace.tsx b/src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteWorkspace.tsx
@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { DeleteWorkspaceDialog } from '../KubectlDeleteWorkspaceDialog';
 import { KubectlInfoButton } from '../KubectlInfoButton';
-import { useDialog } from '../../UseDialog';
 
 interface KubectlDeleteWorkspaceProps {
   projectName?: string;
@@ -11,17 +11,20 @@ export const KubectlDeleteWorkspace = ({
   projectName,
   resourceName,
 }: KubectlDeleteWorkspaceProps) => {
-  const infoDialog = useDialog();
+  const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
+
+  const openInfoDialog = () => setIsInfoDialogOpen(true);
+  const closeInfoDialog = () => setIsInfoDialogOpen(false);
 
   return (
     <>
-      <KubectlInfoButton onClick={infoDialog.open} />
+      <KubectlInfoButton onClick={openInfoDialog} />
       <DeleteWorkspaceDialog
         projectName={projectName}
         resourceName={resourceName}
-        isOpen={infoDialog.isOpen}
-        onClose={infoDialog.close}
+        isOpen={isInfoDialogOpen}
+        onClose={closeInfoDialog}
       />
     </>
   );
-};
+};
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx
@@ -5,40 +5,46 @@ import {
 } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
 
-interface KubectlProjectDialogProps {
+interface KubectlCreateProjectDialogProps {
   onClose: () => void;
   isOpen: boolean;
 }
 
-export const KubectlProjectDialog = ({
+export const KubectlCreateProjectDialog = ({
   onClose,
   isOpen,
-}: KubectlProjectDialogProps) => {
+}: KubectlCreateProjectDialogProps) => {
   const { t } = useTranslation();
   const randomProjectName = Math.random().toString(36).substring(2, 8);
 
   const formFields: FormField[] = [
     {
       id: 'projectName',
-      label: t('KubectlProjectDialog.formFields.projectName.label'),
-      placeholder: t('KubectlProjectDialog.formFields.projectName.placeholder'),
+      label: t('KubectlCreateProjectDialog.formFields.projectName.label'),
+      placeholder: t(
+        'KubectlCreateProjectDialog.formFields.projectName.placeholder',
+      ),
       defaultValue: randomProjectName,
     },
     {
       id: 'chargingTargetId',
-      label: t('KubectlProjectDialog.formFields.chargingTargetId.label'),
+      label: t('KubectlCreateProjectDialog.formFields.chargingTargetId.label'),
       placeholder: t(
-        'KubectlProjectDialog.formFields.chargingTargetId.placeholder',
+        'KubectlCreateProjectDialog.formFields.chargingTargetId.placeholder',
       ),
       defaultValue: t(
-        'KubectlProjectDialog.formFields.chargingTargetId.defaultValue',
+        'KubectlCreateProjectDialog.formFields.chargingTargetId.defaultValue',
       ),
     },
     {
       id: 'userEmail',
-      label: t('KubectlProjectDialog.formFields.userEmail.label'),
-      placeholder: t('KubectlProjectDialog.formFields.userEmail.placeholder'),
-      defaultValue: t('KubectlProjectDialog.formFields.userEmail.defaultValue'),
+      label: t('KubectlCreateProjectDialog.formFields.userEmail.label'),
+      placeholder: t(
+        'KubectlCreateProjectDialog.formFields.userEmail.placeholder',
+      ),
+      defaultValue: t(
+        'KubectlCreateProjectDialog.formFields.userEmail.defaultValue',
+      ),
     },
   ];
 
@@ -61,24 +67,24 @@ export const KubectlProjectDialog = ({
           roles:
           - admin
       ' | kubectl create -f -`,
-      description: t('KubectlProjectDialog.mainCommandDescription'),
+      description: t('KubectlCreateProjectDialog.mainCommandDescription'),
       isMainCommand: true,
     },
     {
       command: `kubectl get project \${projectName}`,
-      description: t('KubectlProjectDialog.resultCommandDescription'),
+      description: t('KubectlCreateProjectDialog.resultCommandDescription'),
     },
     {
       command: `kubectl get namespace project-\${projectName}`,
-      description: t('KubectlProjectDialog.namespaceCommandDescription'),
+      description: t('KubectlCreateProjectDialog.namespaceCommandDescription'),
     },
   ];
 
-  const introSection = [t('KubectlProjectDialog.introSection')];
+  const introSection = [t('KubectlCreateProjectDialog.introSection')];
 
   return (
     <KubectlBaseDialog
-      title={t('KubectlProjectDialog.title')}
+      title={t('KubectlCreateProjectDialog.title')}
       introSection={introSection}
       formFields={formFields}
       customCommands={customCommands}
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx
@@ -5,17 +5,17 @@ import {
 } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
 
-interface KubectlWorkspaceDialogProps {
+interface KubectlCreateWorkspaceDialogProps {
   onClose: () => void;
   isOpen: boolean;
   project?: string;
 }
 
-export const KubectlWorkspaceDialog = ({
+export const KubectlCreateWorkspaceDialog = ({
   onClose,
   isOpen,
   project,
-}: KubectlWorkspaceDialogProps) => {
+}: KubectlCreateWorkspaceDialogProps) => {
   const { t } = useTranslation();
   const randomWorkspaceName = Math.random().toString(36).substring(2, 8);
   const projectName = project || '<Project Namespace>';
@@ -24,28 +24,32 @@ export const KubectlWorkspaceDialog = ({
   const formFields: FormField[] = [
     {
       id: 'workspaceName',
-      label: t('KubectlWorkspaceDialog.formFields.workspaceName.label'),
+      label: t('KubectlCreateWorkspaceDialog.formFields.workspaceName.label'),
       placeholder: t(
-        'KubectlWorkspaceDialog.formFields.workspaceName.placeholder',
+        'KubectlCreateWorkspaceDialog.formFields.workspaceName.placeholder',
       ),
       defaultValue: randomWorkspaceName,
     },
     {
       id: 'chargingTargetId',
-      label: t('KubectlWorkspaceDialog.formFields.chargingTargetId.label'),
+      label: t(
+        'KubectlCreateWorkspaceDialog.formFields.chargingTargetId.label',
+      ),
       placeholder: t(
-        'KubectlWorkspaceDialog.formFields.chargingTargetId.placeholder',
+        'KubectlCreateWorkspaceDialog.formFields.chargingTargetId.placeholder',
       ),
       defaultValue: t(
-        'KubectlWorkspaceDialog.formFields.chargingTargetId.defaultValue',
+        'KubectlCreateWorkspaceDialog.formFields.chargingTargetId.defaultValue',
       ),
     },
     {
       id: 'userEmail',
-      label: t('KubectlWorkspaceDialog.formFields.userEmail.label'),
-      placeholder: t('KubectlWorkspaceDialog.formFields.userEmail.placeholder'),
+      label: t('KubectlCreateWorkspaceDialog.formFields.userEmail.label'),
+      placeholder: t(
+        'KubectlCreateWorkspaceDialog.formFields.userEmail.placeholder',
+      ),
       defaultValue: t(
-        'KubectlWorkspaceDialog.formFields.userEmail.defaultValue',
+        'KubectlCreateWorkspaceDialog.formFields.userEmail.defaultValue',
       ),
     },
   ];
@@ -69,20 +73,20 @@ export const KubectlWorkspaceDialog = ({
           roles:
           - admin
       ' | kubectl create -f -`,
-      description: t('KubectlWorkspaceDialog.mainCommandDescription'),
+      description: t('KubectlCreateWorkspaceDialog.mainCommandDescription'),
       isMainCommand: true,
     },
     {
       command: `kubectl get workspace \${workspaceName} -n ${projectNamespace}`,
-      description: t('KubectlWorkspaceDialog.resultCommandDescription'),
+      description: t('KubectlCreateWorkspaceDialog.resultCommandDescription'),
     },
   ];
 
-  const introSection = [t('KubectlWorkspaceDialog.introSection')];
+  const introSection = [t('KubectlCreateWorkspaceDialog.introSection')];
 
   return (
     <KubectlBaseDialog
-      title={t('KubectlWorkspaceDialog.title')}
+      title={t('KubectlCreateWorkspaceDialog.title')}
       introSection={introSection}
       formFields={formFields}
       customCommands={customCommands}
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlDeleteMcpDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlDeleteMcpDialog.tsx
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlInfoButton.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlInfoButton.tsx
diff --git a/src/components/Dialogs/UseDialog.tsx b/src/components/Dialogs/UseDialog.tsx
diff --git a/yarn.lock b/yarn.lock
