Implement "Hide modeled APIs" checkbox and make it the default (#2651)

Author: shati-patel

extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx

@@ -91,6 +91,8 @@ export function DataExtensionsEditor({
     new Set(),
   );
 
+  const [hideModeledApis, setHideModeledApis] = useState(true);
+
   const [modeledMethods, setModeledMethods] = useState<
     Record<string, ModeledMethod>
   >(initialModeledMethods);
@@ -252,6 +254,10 @@ export function DataExtensionsEditor({
     });
   }, [viewState?.mode]);
 
+  const onHideModeledApis = useCallback(() => {
+    setHideModeledApis((oldHideModeledApis) => !oldHideModeledApis);
+  }, []);
+
   if (viewState === undefined || externalApiUsages.length === 0) {
     return <LoadingContainer>Loading...</LoadingContainer>;
   }
@@ -292,7 +298,12 @@ export function DataExtensionsEditor({
         </HeaderColumn>
         <HeaderSpacer />
         <HeaderColumn>
-          <VSCodeCheckbox>Hide modeled APIs</VSCodeCheckbox>
+          <VSCodeCheckbox
+            checked={hideModeledApis}
+            onChange={onHideModeledApis}
+          >
+            Hide modeled APIs
+          </VSCodeCheckbox>
         </HeaderColumn>
       </HeaderContainer>
 
@@ -320,6 +331,7 @@ export function DataExtensionsEditor({
           modeledMethods={modeledMethods}
           modifiedSignatures={modifiedSignatures}
           viewState={viewState}
+          hideModeledApis={hideModeledApis}
           onChange={onChange}
           onSaveModelClick={onSaveModelClick}
           onGenerateFromLlmClick={onGenerateFromLlmClick}

extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx

@@ -73,6 +73,7 @@ type Props = {
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
   viewState: DataExtensionEditorViewState;
+  hideModeledApis: boolean;
   onChange: (
     modelName: string,
     externalApiUsage: ExternalApiUsage,
@@ -97,6 +98,7 @@ export const LibraryRow = ({
   modeledMethods,
   modifiedSignatures,
   viewState,
+  hideModeledApis,
   onChange,
   onSaveModelClick,
   onGenerateFromLlmClick,
@@ -208,6 +210,7 @@ export const LibraryRow = ({
             modeledMethods={modeledMethods}
             modifiedSignatures={modifiedSignatures}
             mode={viewState.mode}
+            hideModeledApis={hideModeledApis}
             onChange={onChangeWithModelName}
           />
           <SectionDivider />

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

@@ -56,14 +56,16 @@ type Props = {
   modeledMethod: ModeledMethod | undefined;
   methodIsUnsaved: boolean;
   mode: Mode;
+  hideModeledApis: boolean;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
   ) => void;
 };
 
 export const MethodRow = (props: Props) => {
-  const { externalApiUsage, modeledMethod, methodIsUnsaved } = props;
+  const { externalApiUsage, modeledMethod, methodIsUnsaved, hideModeledApis } =
+    props;
 
   const methodCanBeModeled =
     !externalApiUsage.supported ||
@@ -72,6 +74,8 @@ export const MethodRow = (props: Props) => {
 
   if (methodCanBeModeled) {
     return <ModelableMethodRow {...props} />;
+  } else if (hideModeledApis) {
+    return null;
   } else {
     return <UnmodelableMethodRow {...props} />;
   }

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

@@ -16,6 +16,7 @@ type Props = {
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
   mode: Mode;
+  hideModeledApis: boolean;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -27,6 +28,7 @@ export const ModeledMethodDataGrid = ({
   modeledMethods,
   modifiedSignatures,
   mode,
+  hideModeledApis,
   onChange,
 }: Props) => {
   const sortedExternalApiUsages = useMemo(
@@ -60,6 +62,7 @@ export const ModeledMethodDataGrid = ({
           modeledMethod={modeledMethods[externalApiUsage.signature]}
           methodIsUnsaved={modifiedSignatures.has(externalApiUsage.signature)}
           mode={mode}
+          hideModeledApis={hideModeledApis}
           onChange={onChange}
         />
       ))}

extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx

@@ -15,6 +15,7 @@ type Props = {
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
   viewState: DataExtensionEditorViewState;
+  hideModeledApis: boolean;
   onChange: (
     modelName: string,
     externalApiUsage: ExternalApiUsage,
@@ -41,6 +42,7 @@ export const ModeledMethodsList = ({
   modeledMethods,
   modifiedSignatures,
   viewState,
+  hideModeledApis,
   onChange,
   onSaveModelClick,
   onGenerateFromLlmClick,
@@ -83,6 +85,7 @@ export const ModeledMethodsList = ({
           modeledMethods={modeledMethods}
           modifiedSignatures={modifiedSignatures}
           viewState={viewState}
+          hideModeledApis={hideModeledApis}
           onChange={onChange}
           onSaveModelClick={onSaveModelClick}
           onGenerateFromLlmClick={onGenerateFromLlmClick}