fix(ui): add close button to field details panel

This commit adds a close button to the details panel so that the panel can be closed. It also fixes
a bug where unused fields were clickable.

Author: CDThomas

graphql-usage-ui/src/App.tsx

@@ -15,6 +15,9 @@ function App() {
     setShowDetails(true);
     setSelectedField(field);
   };
+  const handleClose = (): void => {
+    setShowDetails(false);
+  };
 
   const [report, setReport] = useState<Report | null>(null);
   const hasReportLoaded = !!report;
@@ -64,7 +67,7 @@ function App() {
             onFieldClick={handleFieldClick}
           />
           {showDetails && selectedField && (
-            <DetailsPanel field={selectedField} />
+            <DetailsPanel field={selectedField} onClose={handleClose} />
           )}
         </div>
       )}

graphql-usage-ui/src/DetailsPanel.tsx

@@ -92,17 +92,39 @@ const DetailsPanelHeading: React.FC = ({ children }) => {
   );
 };
 
+interface CloseButtonProps {
+  onClick(): void;
+}
+
+const CloseButton: React.FC<CloseButtonProps> = ({ onClick }) => {
+  return (
+    <div
+      style={{
+        margin: "-7px -8px -6px 0",
+        cursor: "pointer",
+        padding: "18px 16px 15px 12px",
+        fontSize: "24px"
+      }}
+      onClick={onClick}
+    >
+      ✕
+    </div>
+  );
+};
+
 interface Props {
   field: ReportField;
+  onClose(): void;
 }
 
-const DetailsPanel: React.FC<Props> = ({ field }) => {
+const DetailsPanel: React.FC<Props> = ({ field, onClose }) => {
   if (field.occurrences.length === 0) return null;
 
   return (
     <Panel>
       <DetailsPanelHeader>
         <DetailsPanelTitle field={field} />
+        <CloseButton onClick={onClose} />
       </DetailsPanelHeader>
       <DetailsPanelBody>
         <DetailsPanelHeading>Type</DetailsPanelHeading>

graphql-usage-ui/src/FieldLine.tsx

@@ -17,14 +17,20 @@ const FieldLine: React.FC<Props> = ({ field, filter, onFieldClick }) => {
   const lowerCaseFilter = filter.toLowerCase();
   const fieldMatchesFilter = field.name.toLowerCase().includes(lowerCaseFilter);
   const typeMatchesFilter = field.type.toLowerCase().includes(lowerCaseFilter);
-  const handleFieldClick = () => onFieldClick(field);
+  const isClickable = field.occurrences.length > 0;
+  const handleFieldClick = () => {
+    if (isClickable) onFieldClick(field);
+  };
 
   return (
     <div
       style={{ display: "flex", alignItems: "center", paddingLeft: "16px" }}
       onClick={handleFieldClick}
     >
-      <div className="field-line" style={{ padding: "10px 0px" }}>
+      <div
+        className={isClickable ? "clickable-field-line" : ""}
+        style={{ padding: "10px 0px" }}
+      >
         <FieldName highlight={!!filter && fieldMatchesFilter}>{name}</FieldName>
         <Delimiter token={":"} />{" "}
         <FieldType highlight={!!filter && typeMatchesFilter}>{type}</FieldType>

graphql-usage-ui/src/index.css

@@ -1,31 +1,35 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-  color: 'rgba(0, 0, 0, 0.3)';
+/* Chrome/Opera/Safari */
+::-webkit-input-placeholder {
+  color: "rgba(0, 0, 0, 0.3)";
 }
-::-moz-placeholder { /* Firefox 19+ */
-  color: 'rgba(0, 0, 0, 0.3)';
+/* Firefox 19+ */
+::-moz-placeholder {
+  color: "rgba(0, 0, 0, 0.3)";
 }
-:-ms-input-placeholder { /* IE 10+ */
-  color: 'rgba(0, 0, 0, 0.3)';
+/* IE 10+ */
+:-ms-input-placeholder {
+  color: "rgba(0, 0, 0, 0.3)";
 }
-:-moz-placeholder { /* Firefox 18- */
-  color: 'rgba(0, 0, 0, 0.3)';
+/* Firefox 18- */
+:-moz-placeholder {
+  color: "rgba(0, 0, 0, 0.3)";
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
-.field-line:hover {
+.clickable-field-line:hover {
   text-decoration: underline;
   cursor: pointer;
 }