chore: new buttons

flanksource · Jun 18, 2024 · cf136ed · cf136ed
1 parent 1e1411d
commit cf136ed
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 26 deletions.
diff --git a/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx b/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx
@@ -1,13 +1,16 @@
 import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import React, { useMemo } from "react";
-import { FaPlus, FaTrash } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa";
 import { Button } from "../../../ui/Buttons/Button";
+import { BsPlusCircleFill } from "react-icons/bs";
+import clsx from "clsx";
 
 type ConfigFormFieldProps = {
   label: string;
   containerClassName?: string;
   className?: string;
+  hint?: string;
   name: string;
   /**
    *
@@ -34,56 +37,57 @@ export default function FormikConfigFormFieldsArray({
   fields,
   label,
   containerClassName = "flex flex-col space-y-2",
-  className = "flex flex-row w-full space-x-2"
+  className = "flex flex-row w-full space-x-2",
+  hint = ""
 }: ConfigFormFieldProps) {
   const { values } = useFormikContext<Record<string, any>>();
 
   const fieldValue = useMemo(() => get(values, name), [name, values]);
 
   return (
     <div className={containerClassName}>
-      <label className="text-sm font-semibold">{label}</label>
+      <label className="text-sm font-semibold">{label} </label>
+      {hint && <p className="text-sm text-gray-500 py-1 p-1">{hint}</p>}
+
       <FieldArray
         name={name}
         render={(arrayHelpers) => (
-          <div className={`flex flex-col space-y-2 p-4`}>
+          <div className={`flex flex-col space-y-1 `}>
             {fieldValue &&
               fieldValue.length > 0 &&
               fieldValue.map((_: any, index: number) => (
                 <div className={className} key={index}>
                   {fields.length > 0 &&
-                    fields.map(
-                      ({
-                        name: fieldName,
-                        label: fieldLabel,
-                        fieldComponent: Field,
-                        className
-                      }) => (
-                        <Field
-                          key={fieldName}
-                          name={
-                            fields.length > 1
-                              ? `${name}.${index}.${fieldName}`
-                              : `${name}.${index}`
-                          }
-                          label={fields.length > 1 ? fieldLabel : undefined}
-                          className={className}
-                        />
-                      )
-                    )}
+                    fields.map((field) => (
+                      <field.fieldComponent
+                        key={field.name}
+                        name={
+                          fields.length > 1
+                            ? `${name}.${index}.${field.name}`
+                            : `${name}.${index}`
+                        }
+                        label={fields.length > 1 ? field.label : undefined}
+                        className={clsx(
+                          "text-xs",
+                          "sm:text-xs",
+                          field.className
+                        )}
+                        hint={field.hint}
+                      />
+                    ))}
                   <Button
                     onClick={() => arrayHelpers.remove(index)}
                     icon={<FaTrash />}
-                    className="btn-white w-auto"
+                    className="btn-icon pl-0"
                   />
                 </div>
               ))}
             <div className="flex flex-row flex-1">
               <Button
                 onClick={() => arrayHelpers.push(fields.length === 1 ? "" : {})}
                 text={`Add`}
-                icon={<FaPlus />}
-                className="btn-white"
+                icon={<BsPlusCircleFill />}
+                className="btn-icon  pl-1"
               />
             </div>
           </div>

diff --git a/src/ui/Buttons/CardButton.tsx b/src/ui/Buttons/CardButton.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+export default function CardButton({
+  onClick,
+  icon,
+  text
+}: {
+  onClick: () => Promise<void> | void;
+  icon: ReactNode;
+  text: string;
+}) {
+  return (
+    <div className="flex flex-col flex-1/4 p-2  min-w-[25ch] max-w-[25ch]">
+      <div
+        role="button"
+        className="flex flex-col items-center space-y-2 justify-center p-2 border border-gray-300 hover:border-blue-200 hover:bg-gray-100 rounded-md text-center h-20"
+        onClick={(e) => onClick()}
+      >
+        <div className="flex flex-col items-center justify-center">{icon}</div>
+        <div>{text}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/ui/Buttons/DialogButton.tsx b/src/ui/Buttons/DialogButton.tsx
@@ -0,0 +1,22 @@
+import { IconType } from "react-icons";
+
+export default function DialogButton({
+  onClick,
+  icon
+}: {
+  onClick: any;
+  icon: IconType;
+}) {
+  const Icon = icon;
+  return (
+    <div className="flex pointer-events-none sm:pointer-events-auto">
+      <button
+        type="button"
+        className="text-gray-400 hover:text-gray-500 focus:outline-none"
+        onClick={onClick}
+      >
+        <Icon className="fill-gray-400 w-auto h-5" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
diff --git a/src/ui/Buttons/HelpLink.tsx b/src/ui/Buttons/HelpLink.tsx
@@ -0,0 +1,15 @@
+import { IoMdHelp } from "react-icons/io";
+
+export default function HelpLink({ link }: { link: string }) {
+  return (
+    <a
+      title="Link to documentation"
+      href={`https://docs.flanksource.com/${link}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none"
+    >
+      <IoMdHelp size={22} className="inline-block" />
+    </a>
+  );
+}
diff --git a/src/ui/Code/CodeEditor.tsx b/src/ui/Code/CodeEditor.tsx
@@ -28,6 +28,8 @@ window.MonacoEnvironment = {
 
 interface Props {
   value?: string;
+  lines?: number;
+  height?: string;
   readOnly?: boolean;
   onChange: (value: string | undefined, viewUpdate: unknown) => void;
   /**
@@ -41,6 +43,8 @@ interface Props {
 
 export function CodeEditor({
   value,
+  lines,
+  height,
   onChange,
   readOnly = false,
   schemaFileName,
@@ -136,6 +140,11 @@ export function CodeEditor({
     }
   }, [language, onChange, value]);
 
+  const lineHeight = 15;
+  if (lines) {
+    height = `${lines * lineHeight + 20}px`;
+  }
+
   return (
     <>
       {enableSpecUnwrap && inlineSpec && (
@@ -158,11 +167,13 @@ export function CodeEditor({
         language={language}
         value={value}
         onChange={onChange}
+        height={height}
         width="100%"
         options={{
           renderLineHighlight: "none",
           readOnly,
           minimap: { enabled: false },
+          lineHeight: lineHeight,
           scrollBeyondLastLine: false
         }}
         {...{