From 47743479464d2dc69ef03cbc885c0706e3ed678b Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Tue, 18 Jan 2022 10:29:11 +0100
Subject: [PATCH] refactor: change create token form

---
 .../api-token/ApiTokenForm/ApiTokenForm.tsx   | 20 ++++++-------------
 .../CreateApiToken/CreateApiToken.tsx         | 14 +++++++++++--
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx
index 6394466303..9485642c0d 100644
--- a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx
+++ b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx
@@ -5,10 +5,7 @@ import useEnvironments from '../../../../hooks/api/getters/useEnvironments/useEn
 import useProjects from '../../../../hooks/api/getters/useProjects/useProjects';
 import GeneralSelect from '../../../common/GeneralSelect/GeneralSelect';
 import Input from '../../../common/Input/Input';
-import PermissionButton from '../../../common/PermissionButton/PermissionButton';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
 import { useStyles } from './ApiTokenForm.styles';
-
 interface IApiTokenFormProps {
     username: string;
     type: string;
@@ -21,10 +18,11 @@ interface IApiTokenFormProps {
     handleSubmit: (e: any) => void;
     handleCancel: () => void;
     errors: { [key: string]: string };
-    submitButtonText: string;
+    mode: string;
     clearErrors: () => void;
 }
-const ApiTokenForm = ({
+const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
+    children,
     username,
     type,
     project,
@@ -37,8 +35,8 @@ const ApiTokenForm = ({
     handleCancel,
     errors,
     clearErrors,
-    submitButtonText,
-}: IApiTokenFormProps) => {
+    mode,
+}) => {
     const TYPE_ADMIN = 'ADMIN';
     const styles = useStyles();
     const { environments } = useEnvironments();
@@ -127,13 +125,7 @@ const ApiTokenForm = ({
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                <PermissionButton
-                    onClick={handleSubmit}
-                    permission={ADMIN}
-                    type="submit"
-                >
-                    {submitButtonText} token
-                </PermissionButton>
+                {children}
             </div>
         </form>
     );
diff --git a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
index a322f4a87f..94af85b499 100644
--- a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
+++ b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
@@ -5,6 +5,8 @@ import useApiTokenForm from '../hooks/useApiTokenForm';
 import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from '../../../../hooks/useToast';
 import useApiTokensApi from '../../../../hooks/api/actions/useApiTokensApi/useApiTokensApi';
+import PermissionButton from '../../../common/PermissionButton/PermissionButton';
+import { ADMIN } from '../../../providers/AccessProvider/permissions';
 
 const CreateApiToken = () => {
     /* @ts-ignore */
@@ -80,9 +82,17 @@ const CreateApiToken = () => {
                 errors={errors}
                 handleSubmit={handleSubmit}
                 handleCancel={handleCancel}
-                submitButtonText="Create"
+                mode="Create"
                 clearErrors={clearErrors}
-            />
+            >
+                <PermissionButton
+                    onClick={handleSubmit}
+                    permission={ADMIN}
+                    type="submit"
+                >
+                    Create token
+                </PermissionButton>
+            </ApiTokenForm>
         </FormTemplate>
     );
 };