feat(component): implementing source in kubernetes

tailwarden · Jul 5, 2023 · 282c36f · 282c36f
1 parent f61e963
commit 282c36f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 67 deletions.
diff --git a/dashboard/pages/onboarding/aws.tsx b/dashboard/pages/onboarding/aws.tsx
@@ -126,12 +126,12 @@ export default function AWSCredentials() {
                 {[options[2].value, options[3].value].includes(
                   credentialType
                 ) && (
-                  <div className="mt-2 text-sm text-black-400">
-                    {credentialType === options[3].value
-                      ? 'Komiser will fetch the credentials from AWS'
-                      : 'Komiser will load credentials from AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.'}
-                  </div>
-                )}
+                    <div className="mt-2 text-sm text-black-400">
+                      {credentialType === options[3].value
+                        ? 'Komiser will fetch the credentials from AWS'
+                        : 'Komiser will load credentials from AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.'}
+                    </div>
+                  )}
               </div>
 
               {credentialType === options[0].value && (

diff --git a/dashboard/pages/onboarding/kubernetes.tsx b/dashboard/pages/onboarding/kubernetes.tsx
@@ -1,20 +1,40 @@
-import { useRef } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { ReactNode, useRef, useState } from 'react';
 
 import OnboardingWizardLayout, {
   LeftSideLayout,
   RightSideLayout
 } from '../../components/onboarding-wizard/OnboardingWizardLayout';
 import Folder2Icon from '../../components/icons/Folder2Icon';
+import DocumentTextIcon from '../../components/icons/DocumentTextIcon';
+import SelectInput from '../../components/onboarding-wizard/SelectInput';
 import PurplinCloud from '../../components/onboarding-wizard/PurplinCloud';
 import LabelledInput from '../../components/onboarding-wizard/LabelledInput';
 import InputFileSelect from '../../components/onboarding-wizard/InputFileSelect';
 import CredentialsButton from '../../components/onboarding-wizard/CredentialsButton';
 
+interface SelectOptions {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}
+
+const options: SelectOptions[] = [
+  {
+    icon: <DocumentTextIcon />,
+    label: 'Credentials File',
+    value: 'credentials-file'
+  },
+];
+
 export default function AWSCredentials() {
   const provider = 'kubernetes';
+
   const router = useRouter();
+  const [credentialType, setCredentialType] = useState<string>(
+    options[0].value
+  );
 
   const handleNext = () => {
     router.push(`/onboarding/${provider}`);
@@ -33,6 +53,10 @@ export default function AWSCredentials() {
     console.log(file);
   };
 
+  function handleSelectChange(newValue: string) {
+    setCredentialType(newValue);
+  }
+
   return (
     <div>
       <Head>
@@ -71,66 +95,14 @@ export default function AWSCredentials() {
               placeholder="my-kubernetes-account"
             />
             <div className="flex flex-col space-y-8 bg-komiser-100 p-4">
-              <div>
-                <label htmlFor="input-group-1" className="mb-2 block">
-                  Source
-                </label>
-                <div className="relative mb-6">
-                  <div className="pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3">
-                    <svg
-                      width="24"
-                      height="25"
-                      viewBox="0 0 24 25"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-5 w-5 text-gray-400"
-                    >
-                      <path
-                        d="M21 7.63184V17.6318C21 20.6318 19.5 22.6318 16 22.6318H8C4.5 22.6318 3 20.6318 3 17.6318V7.63184C3 4.63184 4.5 2.63184 8 2.63184H16C19.5 2.63184 21 4.63184 21 7.63184Z"
-                        stroke="#0C1717"
-                        stroke-width="1.5"
-                        stroke-miterlimit="10"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                      <path
-                        d="M14.5 5.13184V7.13184C14.5 8.23184 15.4 9.13184 16.5 9.13184H18.5"
-                        stroke="#0C1717"
-                        stroke-width="1.5"
-                        stroke-miterlimit="10"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                      <path
-                        d="M8 13.6318H12"
-                        stroke="#0C1717"
-                        stroke-width="1.5"
-                        stroke-miterlimit="10"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                      <path
-                        d="M8 17.6318H16"
-                        stroke="#0C1717"
-                        stroke-width="1.5"
-                        stroke-miterlimit="10"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </div>
-
-                  <input
-                    type="text"
-                    id="input-group-1"
-                    className="block w-full rounded border py-4 pl-12 text-sm text-black-900 outline outline-black-200 focus:outline-2 focus:outline-primary"
-                    placeholder="Credentials File"
-                  />
-                  <button className="absolute inset-y-0 right-5 flex items-center pl-3 text-komiser-600">
-                    Change
-                  </button>
-                </div>
-              </div>
+              <SelectInput
+                icon="Change"
+                label={'Source'}
+                displayValues={options}
+                value={credentialType}
+                handleChange={handleSelectChange}
+                values={options.map(option => option.value)}
+              />
               <InputFileSelect
                 type="text"
                 id="file-path-input"