From 65a0a8ff4b2c0d46a5e0c6ea30cf1feac7ddcdd9 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 27 Jul 2023 19:22:26 +1000
Subject: [PATCH] Add icon support

- Cannot hash react nodes!
---
 src/frontend/src/components/forms/ApiForm.tsx |  7 ++++---
 src/frontend/src/pages/Index/Home.tsx         | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index ce93ca9a9e..81c8004ea0 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -32,6 +32,7 @@ export type ApiFormFieldType = {
   name: string;
   label?: string;
   value?: any;
+  icon?: ReactNode;
   fieldType?: string;
   api_url?: string;
   model?: string;
@@ -122,7 +123,7 @@ function RelatedModelField({
 
   const selectQuery = useQuery({
     enabled: !definition.disabled && !!definition.api_url && !definition.hidden,
-    queryKey: [`related-field-${definition.name}`, definition, searchText],
+    queryKey: [`related-field-${definition.name}`, searchText],
     queryFn: async () => {
       console.log('Searching for', searchText);
     }
@@ -300,7 +301,7 @@ export function ApiForm({
   // Query manager for retrieving form definition from the server
   const definitionQuery = useQuery({
     enabled: opened && !!url,
-    queryKey: ['form-definition', name, url, pk, fields],
+    queryKey: ['form-definition', name, url, pk],
     queryFn: async () => {
       // Clear form construction error field
       setError('');
@@ -320,7 +321,7 @@ export function ApiForm({
   // Query manager for retrieiving initial data from the server
   const initialDataQuery = useQuery({
     enabled: fetchInitialData && opened && !!url && fieldDefinitions.length > 0,
-    queryKey: ['form-initial-data', name, url, pk, fields, fieldDefinitions],
+    queryKey: ['form-initial-data', name, url, pk],
     queryFn: async () => {
       return api
         .get(getUrl())
diff --git a/src/frontend/src/pages/Index/Home.tsx b/src/frontend/src/pages/Index/Home.tsx
index 599d15ac00..a2f0233e71 100644
--- a/src/frontend/src/pages/Index/Home.tsx
+++ b/src/frontend/src/pages/Index/Home.tsx
@@ -1,6 +1,13 @@
 import { Trans } from '@lingui/macro';
 import { Group, Stack } from '@mantine/core';
 import { Button } from '@mantine/core';
+import {
+  IconBuilding,
+  IconGlobe,
+  IconKey,
+  IconMail,
+  IconUser
+} from '@tabler/icons-react';
 import { useState } from 'react';
 
 import { ApiForm, ApiFormFieldType } from '../../components/forms/ApiForm';
@@ -20,7 +27,8 @@ export default function Home() {
       name: 'description'
     },
     {
-      name: 'keywords'
+      name: 'keywords',
+      icon: <IconKey />
     },
     {
       name: 'category'
@@ -59,13 +67,16 @@ export default function Home() {
       name: 'description'
     },
     {
-      name: 'website'
+      name: 'website',
+      icon: <IconGlobe />
     },
     {
-      name: 'email'
+      name: 'email',
+      icon: <IconMail />
     },
     {
-      name: 'contact'
+      name: 'contact',
+      icon: <IconUser />
     },
     {
       name: 'is_customer'