Merge pull request #2800 from github/robertbrignull/num-hidden-methods

Add a row to the model editor tables showing how many methods have been hidden

Author: robertbrignull

extensions/ql-vscode/src/view/model-editor/HiddenMethodsRow.tsx

@@ -0,0 +1,35 @@
+import {
+  VSCodeDataGridCell,
+  VSCodeDataGridRow,
+} from "@vscode/webview-ui-toolkit/react";
+import * as React from "react";
+import { styled } from "styled-components";
+import { pluralize } from "../../common/word";
+
+const HiddenMethodsCell = styled(VSCodeDataGridCell)`
+  text-align: center;
+`;
+
+interface Props {
+  numHiddenMethods: number;
+  someMethodsAreVisible: boolean;
+}
+
+export function HiddenMethodsRow({
+  numHiddenMethods,
+  someMethodsAreVisible,
+}: Props) {
+  if (numHiddenMethods === 0) {
+    return null;
+  }
+
+  return (
+    <VSCodeDataGridRow>
+      <HiddenMethodsCell gridColumn="span 5">
+        {someMethodsAreVisible && "And "}
+        {pluralize(numHiddenMethods, "method", "methods")} modeled in other
+        CodeQL packs
+      </HiddenMethodsCell>
+    </VSCodeDataGridRow>
+  );
+}

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -62,26 +62,19 @@ const modelTypeOptions: Array<{ value: ModeledMethodType; label: string }> = [
 
 type Props = {
   method: Method;
+  methodCanBeModeled: boolean;
   modeledMethod: ModeledMethod | undefined;
   methodIsUnsaved: boolean;
   modelingInProgress: boolean;
   mode: Mode;
-  hideModeledApis: boolean;
   onChange: (method: Method, modeledMethod: ModeledMethod) => void;
 };
 
 export const MethodRow = (props: Props) => {
-  const { method, modeledMethod, methodIsUnsaved, hideModeledApis } = props;
-
-  const methodCanBeModeled =
-    !method.supported ||
-    (modeledMethod && modeledMethod?.type !== "none") ||
-    methodIsUnsaved;
+  const { methodCanBeModeled } = props;
 
   if (methodCanBeModeled) {
     return <ModelableMethodRow {...props} />;
-  } else if (hideModeledApis) {
-    return null;
   } else {
     return <UnmodelableMethodRow {...props} />;
   }

extensions/ql-vscode/src/view/model-editor/ModeledMethodDataGrid.tsx

@@ -11,6 +11,7 @@ import { useMemo } from "react";
 import { Mode } from "../../model-editor/shared/mode";
 import { sortMethods } from "../../model-editor/shared/sorting";
 import { InProgressMethods } from "../../model-editor/shared/in-progress-methods";
+import { HiddenMethodsRow } from "./HiddenMethodsRow";
 
 export const GRID_TEMPLATE_COLUMNS = "0.5fr 0.125fr 0.125fr 0.125fr 0.125fr";
 
@@ -35,42 +36,73 @@ export const ModeledMethodDataGrid = ({
   hideModeledApis,
   onChange,
 }: Props) => {
-  const sortedMethods = useMemo(() => sortMethods(methods), [methods]);
+  const [methodsWithModelability, numHiddenMethods]: [
+    Array<{ method: Method; methodCanBeModeled: boolean }>,
+    number,
+  ] = useMemo(() => {
+    const methodsWithModelability = [];
+    let numHiddenMethods = 0;
+    for (const method of sortMethods(methods)) {
+      const modeledMethod = modeledMethods[method.signature];
+      const methodIsUnsaved = modifiedSignatures.has(method.signature);
+      const methodCanBeModeled =
+        !method.supported ||
+        (modeledMethod && modeledMethod?.type !== "none") ||
+        methodIsUnsaved;
+
+      if (methodCanBeModeled || !hideModeledApis) {
+        methodsWithModelability.push({ method, methodCanBeModeled });
+      } else {
+        numHiddenMethods += 1;
+      }
+    }
+    return [methodsWithModelability, numHiddenMethods];
+  }, [hideModeledApis, methods, modeledMethods, modifiedSignatures]);
+
+  const someMethodsAreVisible = methodsWithModelability.length > 0;
 
   return (
     <VSCodeDataGrid gridTemplateColumns={GRID_TEMPLATE_COLUMNS}>
-      <VSCodeDataGridRow rowType="header">
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
-          API or method
-        </VSCodeDataGridCell>
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
-          Model type
-        </VSCodeDataGridCell>
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
-          Input
-        </VSCodeDataGridCell>
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
-          Output
-        </VSCodeDataGridCell>
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
-          Kind
-        </VSCodeDataGridCell>
-      </VSCodeDataGridRow>
-      {sortedMethods.map((method) => (
-        <MethodRow
-          key={method.signature}
-          method={method}
-          modeledMethod={modeledMethods[method.signature]}
-          methodIsUnsaved={modifiedSignatures.has(method.signature)}
-          modelingInProgress={inProgressMethods.hasMethod(
-            packageName,
-            method.signature,
-          )}
-          mode={mode}
-          hideModeledApis={hideModeledApis}
-          onChange={onChange}
-        />
-      ))}
+      {someMethodsAreVisible && (
+        <>
+          <VSCodeDataGridRow rowType="header">
+            <VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
+              API or method
+            </VSCodeDataGridCell>
+            <VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
+              Model type
+            </VSCodeDataGridCell>
+            <VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
+              Input
+            </VSCodeDataGridCell>
+            <VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
+              Output
+            </VSCodeDataGridCell>
+            <VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
+              Kind
+            </VSCodeDataGridCell>
+          </VSCodeDataGridRow>
+          {methodsWithModelability.map(({ method, methodCanBeModeled }) => (
+            <MethodRow
+              key={method.signature}
+              method={method}
+              methodCanBeModeled={methodCanBeModeled}
+              modeledMethod={modeledMethods[method.signature]}
+              methodIsUnsaved={modifiedSignatures.has(method.signature)}
+              modelingInProgress={inProgressMethods.hasMethod(
+                packageName,
+                method.signature,
+              )}
+              mode={mode}
+              onChange={onChange}
+            />
+          ))}
+        </>
+      )}
+      <HiddenMethodsRow
+        numHiddenMethods={numHiddenMethods}
+        someMethodsAreVisible={someMethodsAreVisible}
+      />
     </VSCodeDataGrid>
   );
 };