feat: Add documentation and refactor

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { DiRedis } from "react-icons/di";
-import { SiApachecassandra, SiElasticsearch, SiMicrosoftazure, SiMongodb, SiRabbitmq } from "react-icons/si";
+import { SiApachecassandra, SiElasticsearch, SiFiles, SiMicrosoftazure, SiMongodb, SiRabbitmq } from "react-icons/si";
 import { faAws } from "@fortawesome/free-brands-svg-icons";
 import { faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -86,7 +86,7 @@ const DYNAMIC_SECRET_LIST = [
     title: "Azure Entra ID",
   },
   {
-    icon: <SiMicrosoftazure size="1.5rem" />,
+    icon: <SiFiles size="1.5rem" />,
     provider: DynamicSecretProviders.Ldap,
     title: "LDAP",
   }

frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -209,12 +209,14 @@ const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
           value={PASSWORD}
           helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
         />
-        <SecretInput
-          isReadOnly
-          isVisible
-          value={JSON.stringify(DN_ARRAY)}
-          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-        />
+        <FormControl label={"DNs"} className="flex-grow">
+          <SecretInput
+            isReadOnly
+            isVisible
+            value={JSON.stringify(DN_ARRAY)}
+            containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+          />
+        </FormControl>
       </div>
     );
   }