CodeQL model editor: support saving single/selected models

extensions/ql-vscode/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [UNRELEASED]
 
+- In the CodeQL model editor, you can now select individual method rows and save changes to only the selected rows, instead of having to save the entire library model. [#3156](https://github.com/github/vscode-codeql/pull/3156)
 - If you run a query without having selected a database, we show a more intuitive prompt to help you select a database. [#3214](https://github.com/github/vscode-codeql/pull/3214)
 - The UI for browsing and running CodeQL tests has moved to use VS Code's built-in test UI. This makes the CodeQL test UI more consistent with the test UIs for other languages.
   This change means that this extension no longer depends on the "Test Explorer UI" and "Test Adapter Converter" extensions. You can uninstall those two extensions if they are

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -37,7 +37,10 @@ export function DataGrid({ gridTemplateColumns, children }: DataGridProps) {
   );
 }
 
-const StyledDataGridRow = styled.div<{ $focused?: boolean }>`
+const StyledDataGridRow = styled.div<{
+  $focused?: boolean;
+  $selected?: boolean;
+}>`
   display: contents;
 
   &:hover > * {
@@ -48,14 +51,18 @@ const StyledDataGridRow = styled.div<{ $focused?: boolean }>`
     // Use !important to override the background color set by the hover state
     background-color: ${(props) =>
       props.$focused
-        ? "var(--vscode-editor-selectionBackground) !important"
-        : "inherit"};
+        ? "var(--vscode-editor-findMatchHighlightBackground) !important"
+        : props.$selected
+          ? "var(--vscode-editor-selectionBackground) !important"
+          : "inherit"};
   }
 `;
 
 interface DataGridRowProps {
   focused?: boolean;
+  selected?: boolean;
   children: ReactNode;
+  onClick?: () => void;
   "data-testid"?: string;
 }
 
@@ -69,10 +76,22 @@ interface DataGridRowProps {
  */
 export const DataGridRow = forwardRef(
   (
-    { focused, children, "data-testid": testId }: DataGridRowProps,
+    {
+      focused,
+      selected,
+      children,
+      "data-testid": testId,
+      onClick,
+    }: DataGridRowProps,
     ref?: React.Ref<HTMLElement | undefined>,
   ) => (
-    <StyledDataGridRow $focused={focused} ref={ref} data-testid={testId}>
+    <StyledDataGridRow
+      $focused={focused}
+      $selected={selected}
+      ref={ref}
+      data-testid={testId}
+      onClick={onClick}
+    >
       {children}
     </StyledDataGridRow>
   ),

extensions/ql-vscode/src/view/common/Dropdown.tsx

@@ -25,6 +25,9 @@ type Props = {
   "aria-label"?: string;
 };
 
+const stopClickPropagation = (e: React.MouseEvent) => {
+  e.stopPropagation();
+};
 /**
  * A dropdown implementation styled to look like `VSCodeDropdown`.
  *
@@ -50,6 +53,7 @@ export function Dropdown({
       value={disabled ? disabledValue : value}
       disabled={disabled}
       onChange={onChange}
+      onClick={stopClickPropagation}
       className={className}
       {...props}
     >

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

@@ -71,11 +71,13 @@ export type LibraryRowProps = {
   methods: Method[];
   modeledMethodsMap: Record<string, ModeledMethod[]>;
   modifiedSignatures: Set<string>;
+  selectedSignatures: Set<string>;
   inProgressMethods: Set<string>;
   viewState: ModelEditorViewState;
   hideModeledMethods: boolean;
   revealedMethodSignature: string | null;
   onChange: (methodSignature: string, modeledMethods: ModeledMethod[]) => void;
+  onMethodClick: (methodSignature: string) => void;
   onSaveModelClick: (methodSignatures: string[]) => void;
   onGenerateFromLlmClick: (
     dependencyName: string,
@@ -92,11 +94,13 @@ export const LibraryRow = ({
   methods,
   modeledMethodsMap,
   modifiedSignatures,
+  selectedSignatures,
   inProgressMethods,
   viewState,
   hideModeledMethods,
   revealedMethodSignature,
   onChange,
+  onMethodClick,
   onSaveModelClick,
   onGenerateFromLlmClick,
   onStopGenerateFromLlmClick,
@@ -228,16 +232,18 @@ export const LibraryRow = ({
             methods={methods}
             modeledMethodsMap={modeledMethodsMap}
             modifiedSignatures={modifiedSignatures}
+            selectedSignatures={selectedSignatures}
             inProgressMethods={inProgressMethods}
             viewState={viewState}
             hideModeledMethods={hideModeledMethods}
             revealedMethodSignature={revealedMethodSignature}
             onChange={onChange}
+            onMethodClick={onMethodClick}
           />
           <SectionDivider />
           <ButtonsContainer>
             <VSCodeButton onClick={handleSave} disabled={!hasUnsavedChanges}>
-              Save
+              {selectedSignatures.size === 0 ? "Save" : "Save selected"}
             </VSCodeButton>
           </ButtonsContainer>
         </>

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

@@ -70,10 +70,12 @@ export type MethodRowProps = {
   methodCanBeModeled: boolean;
   modeledMethods: ModeledMethod[];
   methodIsUnsaved: boolean;
+  methodIsSelected: boolean;
   modelingInProgress: boolean;
   viewState: ModelEditorViewState;
   revealedMethodSignature: string | null;
   onChange: (methodSignature: string, modeledMethods: ModeledMethod[]) => void;
+  onMethodClick: (methodSignature: string) => void;
 };
 
 export const MethodRow = (props: MethodRowProps) => {
@@ -103,9 +105,11 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
       method,
       modeledMethods: modeledMethodsProp,
       methodIsUnsaved,
+      methodIsSelected,
       viewState,
       revealedMethodSignature,
       onChange,
+      onMethodClick,
     } = props;
 
     const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
@@ -186,6 +190,10 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
       <DataGridRow
         data-testid="modelable-method-row"
         focused={revealedMethodSignature === method.signature}
+        selected={methodIsSelected}
+        onClick={() => {
+          onMethodClick(method.signature);
+        }}
       >
         <DataGridCell
           gridRow={`span ${modeledMethods.length + validationErrors.length}`}
@@ -196,11 +204,23 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
             <MethodClassifications method={method} />
             <MethodName {...props.method} />
             {viewState.mode === Mode.Application && (
-              <UsagesButton onClick={jumpToMethod}>
+              <UsagesButton
+                onClick={(event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  jumpToMethod();
+                }}
+              >
                 {method.usages.length}
               </UsagesButton>
             )}
-            <ViewLink onClick={jumpToMethod}>View</ViewLink>
+            <ViewLink
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                jumpToMethod();
+              }}
+            >
+              View
+            </ViewLink>
             {props.modelingInProgress && <ProgressRing />}
           </ApiOrMethodRow>
         </DataGridCell>
@@ -269,7 +289,10 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     <CodiconRow
                       appearance="icon"
                       aria-label="Add new model"
-                      onClick={handleAddModelClick}
+                      onClick={(event: React.MouseEvent) => {
+                        event.stopPropagation();
+                        handleAddModelClick();
+                      }}
                       disabled={addModelButtonDisabled}
                     >
                       <Codicon name="add" />
@@ -278,7 +301,10 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     <CodiconRow
                       appearance="icon"
                       aria-label="Remove model"
-                      onClick={removeModelClickedHandlers[index]}
+                      onClick={(event: React.MouseEvent) => {
+                        event.stopPropagation();
+                        removeModelClickedHandlers[index]();
+                      }}
                     >
                       <Codicon name="trash" />
                     </CodiconRow>

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

@@ -95,6 +95,10 @@ export function ModelEditor({
     new Set(),
   );
 
+  const [selectedSignatures, setSelectedSignatures] = useState<Set<string>>(
+    new Set(),
+  );
+
   const [inProgressMethods, setInProgressMethods] = useState<Set<string>>(
     new Set(),
   );
@@ -189,6 +193,19 @@ export function ModelEditor({
     [],
   );
 
+  const onMethodClick = useCallback(
+    (methodSignature: string) => {
+      const newSelectedSignatures = new Set(selectedSignatures);
+      if (selectedSignatures.has(methodSignature)) {
+        newSelectedSignatures.delete(methodSignature);
+      } else {
+        newSelectedSignatures.add(methodSignature);
+      }
+      setSelectedSignatures(newSelectedSignatures);
+    },
+    [selectedSignatures],
+  );
+
   const onRefreshClick = useCallback(() => {
     vscode.postMessage({
       t: "refreshMethods",
@@ -198,16 +215,32 @@ export function ModelEditor({
   const onSaveAllClick = useCallback(() => {
     vscode.postMessage({
       t: "saveModeledMethods",
+      methodSignatures:
+        selectedSignatures.size === 0
+          ? undefined
+          : Array.from(selectedSignatures),
     });
-  }, []);
+  }, [selectedSignatures]);
 
-  const onSaveModelClick = useCallback((methodSignatures: string[]) => {
-    vscode.postMessage({
-      t: "saveModeledMethods",
-      methodSignatures,
-    });
+  const onDeselectAllClick = useCallback(() => {
+    setSelectedSignatures(new Set());
   }, []);
 
+  const onSaveModelClick = useCallback(
+    (methodSignatures: string[]) => {
+      vscode.postMessage({
+        t: "saveModeledMethods",
+        methodSignatures:
+          selectedSignatures.size === 0
+            ? methodSignatures
+            : methodSignatures.filter((signature) =>
+                selectedSignatures.has(signature),
+              ),
+      });
+    },
+    [selectedSignatures],
+  );
+
   const onGenerateFromSourceClick = useCallback(() => {
     vscode.postMessage({
       t: "generateMethod",
@@ -309,7 +342,14 @@ export function ModelEditor({
                 onClick={onSaveAllClick}
                 disabled={modifiedSignatures.size === 0}
               >
-                Save all
+                {selectedSignatures.size === 0 ? "Save all" : "Save selected"}
+              </VSCodeButton>
+              <VSCodeButton
+                appearance="secondary"
+                onClick={onDeselectAllClick}
+                disabled={selectedSignatures.size === 0}
+              >
+                Deselect all
               </VSCodeButton>
               <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
                 Refresh
@@ -339,11 +379,13 @@ export function ModelEditor({
           methods={methods}
           modeledMethodsMap={modeledMethods}
           modifiedSignatures={modifiedSignatures}
+          selectedSignatures={selectedSignatures}
           inProgressMethods={inProgressMethods}
           viewState={viewState}
           hideModeledMethods={hideModeledMethods}
           revealedMethodSignature={revealedMethodSignature}
           onChange={onChange}
+          onMethodClick={onMethodClick}
           onSaveModelClick={onSaveModelClick}
           onGenerateFromLlmClick={onGenerateFromLlmClick}
           onStopGenerateFromLlmClick={onStopGenerateFromLlmClick}

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

@@ -16,22 +16,26 @@ export type ModeledMethodDataGridProps = {
   methods: Method[];
   modeledMethodsMap: Record<string, ModeledMethod[]>;
   modifiedSignatures: Set<string>;
+  selectedSignatures: Set<string>;
   inProgressMethods: Set<string>;
   viewState: ModelEditorViewState;
   hideModeledMethods: boolean;
   revealedMethodSignature: string | null;
   onChange: (methodSignature: string, modeledMethods: ModeledMethod[]) => void;
+  onMethodClick: (methodSignature: string) => void;
 };
 
 export const ModeledMethodDataGrid = ({
   methods,
   modeledMethodsMap,
   modifiedSignatures,
+  selectedSignatures,
   inProgressMethods,
   viewState,
   hideModeledMethods,
   revealedMethodSignature,
   onChange,
+  onMethodClick,
 }: ModeledMethodDataGridProps) => {
   const [methodsWithModelability, numHiddenMethods]: [
     Array<{ method: Method; methodCanBeModeled: boolean }>,
@@ -80,10 +84,12 @@ export const ModeledMethodDataGrid = ({
                 methodCanBeModeled={methodCanBeModeled}
                 modeledMethods={modeledMethods}
                 methodIsUnsaved={modifiedSignatures.has(method.signature)}
+                methodIsSelected={selectedSignatures.has(method.signature)}
                 modelingInProgress={inProgressMethods.has(method.signature)}
                 viewState={viewState}
                 revealedMethodSignature={revealedMethodSignature}
                 onChange={onChange}
+                onMethodClick={onMethodClick}
               />
             );
           })}

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

@@ -13,11 +13,13 @@ export type ModeledMethodsListProps = {
   methods: Method[];
   modeledMethodsMap: Record<string, ModeledMethod[]>;
   modifiedSignatures: Set<string>;
+  selectedSignatures: Set<string>;
   inProgressMethods: Set<string>;
   revealedMethodSignature: string | null;
   viewState: ModelEditorViewState;
   hideModeledMethods: boolean;
   onChange: (methodSignature: string, modeledMethods: ModeledMethod[]) => void;
+  onMethodClick: (methodSignature: string) => void;
   onSaveModelClick: (methodSignatures: string[]) => void;
   onGenerateFromLlmClick: (
     packageName: string,
@@ -36,11 +38,13 @@ export const ModeledMethodsList = ({
   methods,
   modeledMethodsMap,
   modifiedSignatures,
+  selectedSignatures,
   inProgressMethods,
   viewState,
   hideModeledMethods,
   revealedMethodSignature,
   onChange,
+  onMethodClick,
   onSaveModelClick,
   onGenerateFromLlmClick,
   onStopGenerateFromLlmClick,
@@ -82,11 +86,13 @@ export const ModeledMethodsList = ({
           methods={grouped[libraryName]}
           modeledMethodsMap={modeledMethodsMap}
           modifiedSignatures={modifiedSignatures}
+          selectedSignatures={selectedSignatures}
           inProgressMethods={inProgressMethods}
           viewState={viewState}
           hideModeledMethods={hideModeledMethods}
           revealedMethodSignature={revealedMethodSignature}
           onChange={onChange}
+          onMethodClick={onMethodClick}
           onSaveModelClick={onSaveModelClick}
           onGenerateFromLlmClick={onGenerateFromLlmClick}
           onStopGenerateFromLlmClick={onStopGenerateFromLlmClick}