1393-add-icon-config-scrapers

src/components/Forms/Formik/FormikSelectDropdown.tsx

@@ -45,8 +45,6 @@ export default function FormikSelectDropdown({
     )
   });
 
-  console.log("field", field.value, name, options);
-
   const value = useMemo(() => {
     if (props.isMulti && Array.isArray(field.value)) {
       const x = options?.filter((item) => field.value.includes(item.value));
@@ -55,8 +53,6 @@ export default function FormikSelectDropdown({
     return options?.filter((item) => item.value === field.value);
   }, [field.value, options, props.isMulti]);
 
-  console.log("value", value, name);
-
   useEffect(() => {
     setIsTouched(isTouched || meta.touched || meta.initialTouched);
   }, [isTouched, meta.initialTouched, meta.touched]);

src/components/SchemaResourcePage/ConfigScrapperIcon.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { Icon } from "../Icon";
+
+export const configSpecTypesIconMap = new Map<string, string>([
+  ["kubernetes", "kubernetes"],
+  ["azure", "azure"],
+  ["kubernetesFile", "kubernetes"],
+  ["sql", "sql"],
+  ["trivy", "trivy"],
+  ["aws", "aws"],
+  ["file", "folder"],
+  ["githubActions", "git"],
+  ["http", "http"],
+  ["azureDevops", "azure-devops"],
+  ["custom", "cog"]
+]);
+
+type Props = {
+  spec: Record<string, any>;
+};
+
+export default function ConfigScrapperIcon({ spec }: Props) {
+  const icon = useMemo(() => {
+    const keys = Object.keys(spec);
+    const specKeys = keys.find((key) => typeof spec[key] === "object");
+    return configSpecTypesIconMap.get(specKeys ?? "");
+  }, [spec]);
+
+  if (!icon) {
+    return null;
+  }
+
+  return <Icon name={icon} className="w-5 h-5" />;
+}

src/components/SchemaResourcePage/SchemaResourceList.tsx

@@ -1,11 +1,13 @@
 import clsx from "clsx";
 import { useNavigate } from "react-router-dom";
 import { SchemaResourceWithJobStatus } from "../../api/schemaResources";
+import { tables } from "../../context/UserAccessContext/permissions";
 import { relativeDateTime } from "../../utils/date";
 import { Avatar } from "../Avatar";
 import { InfoMessage } from "../InfoMessage";
 import JobHistoryStatusColumn from "../JobsHistory/JobHistoryStatusColumn";
 import TableSkeletonLoader from "../SkeletonLoader/TableSkeletonLoader";
+import ConfigScrapperIcon from "./ConfigScrapperIcon";
 
 interface Props {
   items: SchemaResourceWithJobStatus[];
@@ -108,7 +110,8 @@ function SchemaResourceListItem({
   table,
   schedule,
   job_status,
-  job_time_start
+  job_time_start,
+  spec
 }: SchemaResourceWithJobStatus & {
   baseUrl: string;
   table: string;
@@ -122,7 +125,12 @@ function SchemaResourceListItem({
       onClick={() => navigateToDetails(id)}
     >
       <Cell colSpan={2} className="leading-5 text-gray-900 font-medium">
-        {name}
+        <div className="flex flex-row gap-2 items-center">
+          {table === tables.config_scrapers && (
+            <ConfigScrapperIcon spec={spec} />
+          )}
+          <div> {name}</div>
+        </div>
       </Cell>
       <Cell className="shrink-0">
         {!!source && <a href={`${source}`}>Link</a>}

src/components/Select/Select.js

@@ -97,7 +97,6 @@ const selectAllOptionFeatureDecorator = (originalProps) => {
 const selectColourStyles = {
   control: (styles, { isFocused }) => ({
     ...styles,
-    minHeight: "42px",
     border: "1px solid #D1D5DB",
     borderColor: isFocused ? "#6366F1" : undefined,
     boxShadow: isFocused