fix codeql issues 01162025 (#686)

* fix codeql issues 01162025

* fix tests

* fix model location list

package.json

@@ -72,9 +72,6 @@
     "@azure/core-amqp": "3.2.0",
     "@azure/event-hubs": "5.6.0",
     "@azure/msal-node": "1.14.6",
-    "@dnd-kit/core": "6.3.1",
-    "@dnd-kit/sortable": "10.0.0",
-    "@dnd-kit/utilities": "3.2.2",
     "@fluentui/react": "8.101.2",
     "@microsoft/applicationinsights-web": "2.8.4",
     "@rjsf/fluent-ui": "5.7.0",
@@ -100,6 +97,7 @@
     "react-i18next": "11.11.1",
     "react-jsonschema-form": "1.8.1",
     "react-monaco-editor": "0.54.0",
+    "react-movable": "^3.4.0",
     "react-router-dom": "5.2.0",
     "react-toastify": "4.4.0",
     "redux-saga": "1.1.3",
@@ -191,6 +189,7 @@
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
     },
+    "transformIgnorePatterns": ["node_modules/(?!react-movable)"],
     "testRegex": "(\\.|/)(spec)\\.(tsx?)$",
     "moduleNameMapper": {
       "^.+\\.(scss)$": "<rootDir>/scss-stub.js",

src/app/modelRepository/components/__snapshots__/modelRepositoryLocationList.spec.tsx.snap

@@ -1,107 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModelRepositoryLocationList matches snapshot with all items 1`] = `
-<Memo(DndContext)
-  collisionDetection={[Function]}
-  onDragEnd={[Function]}
-  sensors={
-    Array [
-      Object {
-        "options": Object {},
-        "sensor": [Function],
-      },
-      Object {
-        "options": Object {
-          "coordinateGetter": [Function],
-        },
-        "sensor": [Function],
-      },
-    ]
-  }
+<div
+  className="location-list"
 >
-  <SortableContext
-    items={
+  <List
+    lockVertically={false}
+    onChange={[Function]}
+    removableByMove={false}
+    renderItem={[Function]}
+    renderList={[Function]}
+    transitionDuration={300}
+    values={
       Array [
-        "PUBLIC",
-        "CONFIGURABLE",
-        "LOCAL",
-        "DMR",
+        Object {
+          "repositoryLocationType": "PUBLIC",
+          "value": "",
+        },
+        Object {
+          "repositoryLocationType": "CONFIGURABLE",
+          "value": "test.com",
+        },
+        Object {
+          "repositoryLocationType": "LOCAL",
+          "value": "d:/myModels",
+        },
+        Object {
+          "repositoryLocationType": "DMR",
+          "value": "c:/dtmi",
+        },
       ]
     }
-  >
-    <div
-      className="location-list"
-    >
-      <SortableItem
-        index={0}
-        item={
-          Object {
-            "repositoryLocationType": "PUBLIC",
-            "value": "",
-          }
-        }
-        key="PUBLIC"
-      />
-      <SortableItem
-        index={1}
-        item={
-          Object {
-            "repositoryLocationType": "CONFIGURABLE",
-            "value": "test.com",
-          }
-        }
-        key="CONFIGURABLE"
-      />
-      <SortableItem
-        index={2}
-        item={
-          Object {
-            "repositoryLocationType": "LOCAL",
-            "value": "d:/myModels",
-          }
-        }
-        key="LOCAL"
-      />
-      <SortableItem
-        index={3}
-        item={
-          Object {
-            "repositoryLocationType": "DMR",
-            "value": "c:/dtmi",
-          }
-        }
-        key="DMR"
-      />
-    </div>
-  </SortableContext>
-</Memo(DndContext)>
+    voiceover={
+      Object {
+        "canceled": [Function],
+        "dropped": [Function],
+        "item": [Function],
+        "lifted": [Function],
+        "moved": [Function],
+      }
+    }
+  />
+</div>
 `;
 
 exports[`ModelRepositoryLocationList matches snapshot with no items 1`] = `
-<Memo(DndContext)
-  collisionDetection={[Function]}
-  onDragEnd={[Function]}
-  sensors={
-    Array [
-      Object {
-        "options": Object {},
-        "sensor": [Function],
-      },
-      Object {
-        "options": Object {
-          "coordinateGetter": [Function],
-        },
-        "sensor": [Function],
-      },
-    ]
-  }
+<div
+  className="location-list"
 >
-  <SortableContext
-    items={Array []}
-  >
-    <div
-      className="location-list"
-    />
-  </SortableContext>
-</Memo(DndContext)>
+  <List
+    lockVertically={false}
+    onChange={[Function]}
+    removableByMove={false}
+    renderItem={[Function]}
+    renderList={[Function]}
+    transitionDuration={300}
+    values={Array []}
+    voiceover={
+      Object {
+        "canceled": [Function],
+        "dropped": [Function],
+        "item": [Function],
+        "lifted": [Function],
+        "moved": [Function],
+      }
+    }
+  />
+</div>
 `;

src/app/modelRepository/components/modelRepositoryLocationList.spec.tsx

@@ -11,6 +11,10 @@ import { getInitialModelRepositoryFormState } from '../state';
 import { getInitialModelRepositoryFormOps } from '../interface';
 
 describe('ModelRepositoryLocationList', () => {
+    jest.mock('react-movable', () => ({
+        List: ({ children }) => <div>{children}</div>,
+        arrayMove: jest.fn(),
+    }));
 
     it('matches snapshot with no items', () => {
         const component = (

src/app/modelRepository/components/modelRepositoryLocationList.tsx

@@ -3,105 +3,52 @@
  * Licensed under the MIT License
  **********************************************************/
 import * as React from 'react';
-import {
-    DndContext,
-    closestCenter,
-    useSensor,
-    useSensors,
-    PointerSensor,
-    KeyboardSensor,
-} from '@dnd-kit/core';
-import {
-    arrayMove,
-    SortableContext,
-    useSortable,
-    sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { List, arrayMove, IItemProps, RenderListParams } from 'react-movable';
 import { ModelRepositoryLocationListItem } from './modelRepositoryLocationListItem';
 import { ModelRepositoryFormType } from '../hooks/useModelRepositoryForm';
 import { ModelRepositoryConfiguration } from '../../shared/modelRepository/state';
 import './modelRepositoryLocationList.scss';
 
 export const ModelRepositoryLocationList: React.FC<{
     formState: ModelRepositoryFormType;
-  }> = ({ formState }) => {
+}> = ({ formState }) => {
     const [
         { repositoryLocationSettings },
         { setRepositoryLocationSettings, setDirtyFlag },
     ] = formState;
 
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        })
-    );
-
-    const handleDragEnd = (event: any) => { // tslint:disable-line: no-any
-        const { active, over } = event;
-
-        if (active.id !== over?.id) {
-            const oldIndex = repositoryLocationSettings.findIndex(
-                item => item.repositoryLocationType === active.id
-            );
-            const newIndex = repositoryLocationSettings.findIndex(
-                item => item.repositoryLocationType === over.id
-            );
-
+    const handleSortEnd = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
+        if (oldIndex !== newIndex) {
             const updatedRepositoryLocationSettings = arrayMove(
                 repositoryLocationSettings,
                 oldIndex,
                 newIndex
             );
-
             setDirtyFlag(true);
             setRepositoryLocationSettings(updatedRepositoryLocationSettings);
         }
     };
 
-    const SortableItem: React.FC<{ item: ModelRepositoryConfiguration, index: number }> = ({ item, index }) => {
-        const {
-            attributes,
-            listeners,
-            setNodeRef,
-            transform,
-            transition,
-        } = useSortable({ id: item.repositoryLocationType });
-
-        const style = {
-            transform: CSS.Transform.toString(transform),
-            transition,
-        };
-
-        return (
-            <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+    const renderItem = ({value, props}: {value: ModelRepositoryConfiguration, props: IItemProps} ) => (
+        <div {...props} key={value.repositoryLocationType}>
             <ModelRepositoryLocationListItem
-                item={item}
-                index={index}
+                item={value}
+                index={repositoryLocationSettings.indexOf(value)}
                 formState={formState}
             />
-            </div>
-        );
-    };
+        </div>
+    );
+
+    const renderList = ({ children, props }: RenderListParams) => <div {...props}>{children}</div>;
 
     return (
-        <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-        >
-            <SortableContext
-                items={repositoryLocationSettings.map(
-                    item => item.repositoryLocationType
-                )}
-            >
-            <div className="location-list">
-                {repositoryLocationSettings.map((item, index) => (
-                    <SortableItem key={item.repositoryLocationType} item={item} index={index} />
-                ))}
-            </div>
-            </SortableContext>
-        </DndContext>
+        <div className="location-list">
+            <List
+                values={repositoryLocationSettings}
+                onChange={handleSortEnd}
+                renderList={renderList}
+                renderItem={renderItem}
+            />
+        </div>
     );
 };

src/app/shared/components/copyButton.spec.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { act, create } from 'react-test-renderer';
-import { IconButton } from '@fluentui/react';
 import { shallow } from 'enzyme';
 import { CopyButton } from './copyButton';
 
@@ -12,26 +10,4 @@ describe('copyToClipboard', () => {
     it('matches snapshot disabled', () => {
         expect(shallow(<CopyButton copyText='text' disabled={true}/>)).toMatchSnapshot();
     });
-
-    it('executes copyToClipboard', async () => {
-        const wrapper = create(
-            <CopyButton copyText='text'/>,
-            {
-                createNodeMock: (element: React.ReactElement) => {
-                    if (element.type === 'input') {
-                        return {
-                            select: () => {}
-                        };
-                    }
-                    return null;
-                }
-            });
-
-        act(() => {
-            const clipboardButton = wrapper.root.findByType(IconButton);
-            clipboardButton.props.onClick(undefined);
-        });
-
-        expect(document.execCommand).toHaveBeenLastCalledWith('copy');
-    });
 });

src/server/dataPlaneHelper.spec.ts

@@ -6,7 +6,7 @@ import  * as express from 'express';
 import { generateDataPlaneRequestBody, processDataPlaneResponse } from './dataPlaneHelper';
 
 describe('server', () => {
-    const hostName = 'testHub.private.azure-devices-int.net';
+    const hostName = 'testHub.private.azure-devices.net';
     it('generates data plane request with API version and query string specified in body', () => {
         const queryString = 'connectTimeoutInSeconds=20&responseTimeoutInSeconds=20';
         const req = {
@@ -83,7 +83,7 @@ describe('server', () => {
     });
 
     it('generates data plane response with no httpResponse', async () => {
-        const response = await processDataPlaneResponse(null);
+        const response = await processDataPlaneResponse(null as any);
         expect(response.body).toEqual({body: {Message: 'Failed to get any response from iot hub service.'}});
     });