From 3fce7af292444ee0eff4e6f3912f1d2da8d612dc Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Thu, 2 Jan 2025 14:48:29 +0100
Subject: [PATCH] Show total unused fields (#5878) (#6225)

Co-authored-by: Mart Ganzevles <martganzevles@gmail.com>
Co-authored-by: Mart Ganzevles <mart.ganzevles@klm.com>
---
 .../app/src/pages/target-explorer-unused.tsx  | 66 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-explorer-unused.tsx b/packages/web/app/src/pages/target-explorer-unused.tsx
index 582fb896c..07f66d29d 100644
--- a/packages/web/app/src/pages/target-explorer-unused.tsx
+++ b/packages/web/app/src/pages/target-explorer-unused.tsx
@@ -23,9 +23,21 @@ const UnusedSchemaView_UnusedSchemaExplorerFragment = graphql(`
       __typename
       ... on GraphQLObjectType {
         name
+        fields {
+          __typename
+          args {
+            __typename
+          }
+        }
       }
       ... on GraphQLInterfaceType {
         name
+        fields {
+          __typename
+          args {
+            __typename
+          }
+        }
       }
       ... on GraphQLUnionType {
         name
@@ -35,6 +47,9 @@ const UnusedSchemaView_UnusedSchemaExplorerFragment = graphql(`
       }
       ... on GraphQLInputObjectType {
         name
+        fields {
+          __typename
+        }
       }
       ... on GraphQLScalarType {
         name
@@ -70,7 +85,9 @@ const UnusedSchemaView = memo(function _UnusedSchemaView(props: {
     return grouped;
   }, [types]);
 
-  const letters = Array.from(typesGroupedByFirstLetter.keys()).sort();
+  const letters = useMemo(() => {
+    return Array.from(typesGroupedByFirstLetter.keys()).sort();
+  }, [typesGroupedByFirstLetter]);
 
   useEffect(() => {
     if (!selectedLetter) {
@@ -78,6 +95,38 @@ const UnusedSchemaView = memo(function _UnusedSchemaView(props: {
     }
   }, [selectedLetter, setSelectedLetter]);
 
+  const unused = useMemo(() => {
+    const count = {
+      fields: 0,
+      fieldArguments: 0,
+      types: 0,
+    };
+
+    for (const type of types) {
+      if (type.__typename === 'GraphQLInputObjectType') {
+        count.types++;
+        count.fields += type.fields.length;
+      } else if (
+        type.__typename === 'GraphQLObjectType' ||
+        type.__typename === 'GraphQLInterfaceType'
+      ) {
+        count.types++;
+
+        for (const field of type.fields) {
+          if (field.args.length === 0) {
+            // if there are no arguments, it means the entire field is unused
+            count.fields++;
+          } else {
+            // if there are arguments, the field is used, but the arguments are not
+            count.fieldArguments += field.args.length;
+          }
+        }
+      }
+    }
+
+    return count;
+  }, [types]);
+
   if (types.length === 0) {
     return (
       <div className="flex h-[250px] shrink-0 items-center justify-center rounded-md border border-dashed">
@@ -97,8 +146,23 @@ const UnusedSchemaView = memo(function _UnusedSchemaView(props: {
     return null;
   }
 
+  const unusedFieldsMessage = [
+    unused.fields ? `${unused.fields} unused fields` : null,
+    unused.fieldArguments ? `${unused.fieldArguments} unused field arguments` : null,
+  ]
+    .filter(Boolean)
+    .join(' and ');
+
   return (
     <div className="space-y-6">
+      {unusedFieldsMessage.length ? (
+        <div>
+          <p className="text-sm text-gray-400">
+            You have a total of {unusedFieldsMessage} within {unused.types} different types in the
+            selected time period
+          </p>
+        </div>
+      ) : null}
       <div>
         <TooltipProvider>
           {letters.map(letter => (