Students tab fixes (#1614)

* Refactor Course Students Page and Floating Header Table styles for improved responsiveness and accessibility. Adjusted padding, widths, and overflow properties across components to enhance layout on various screen sizes. Removed unnecessary state management and optimized column definitions in the FloatingHeaderTable. Updated styles for better visual consistency and user experience.

* Handle nones

* Refactor CopyButton and Clipboard Utility

- Updated CopyButton component to use new `useCopyHtmlContentToClipboard` hook for improved HTML content copying functionality.
- Refactored utility functions in `utils.ts` to streamline the copying process, including handling HTML content and fallback methods.
- Adjusted tests to reflect changes in the copying functionality and updated references to the new hook.
- Enhanced clipboard functionality to ensure better handling of HTML content and improved user experience.

* Implement user search functionality across course student tabs

- Added search capabilities to the User, Completions, and Progress tabs, allowing users to filter results based on input.
- Updated CourseUserInfo structure to replace the name field with first_name and last_name for better clarity.
- Enhanced the backend query to support the new data structure and ensure compatibility with the frontend search features.
- Refactored relevant components to utilize the new search query state and improve user experience.
- Introduced a new JSON query file for fetching user details from the database.

* Add student tab visibility based on global admin authorization

- Integrated `useAuthorizeMultiple` hook to check for global admin permissions.
- Conditionally rendered the students tab and associated page based on the user's admin status.
- Enhanced user experience by ensuring only authorized users can access the students tab in the course management page.

* Update package manager version to [email protected] and comment out minimumReleaseAge in workspace configuration files across multiple services for improved consistency and to reduce supply-chain risk.

* Fixes

* Update snapshots

Author: nygrenh

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "homepage": "https://github.com/rage/secret-project-331#readme",
   "main": "index.js",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.26.2",
   "type": "module",
   "bugs": {
     "url": "https://github.com/rage/secret-project-331/issues"

pnpm-workspace.yaml

@@ -18,7 +18,7 @@ updateNotifier: false
 sharedWorkspaceLockfile: false
 
 # Delay brand-new releases to reduce supply-chain risk (minutes)
-minimumReleaseAge: 1440
+# minimumReleaseAge: 1440
 # If you want to exclude some packages from the minimumReleaseAge, you can do it here
 minimumReleaseAgeExclude: ["next", "react", "react-dom", "@next/*"]
 

services/cms/package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "version": "0.1.0",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.26.2",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production next build",

services/cms/pnpm-workspace.yaml

@@ -4,7 +4,7 @@ linkWorkspacePackages: true
 
 managePackageManagerVersions: true
 
-minimumReleaseAge: 1440
+# minimumReleaseAge: 1440
 minimumReleaseAgeExclude: ["next", "react", "@next/*"]
 
 nodeVersion: 22.20.0

services/course-material/package.json

@@ -1,7 +1,7 @@
 {
   "name": "course-material",
   "version": "1.0.0",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.26.2",
   "scripts": {
     "build": "NODE_ENV=production next build",
     "dev": "next dev --port 3003 --turbopack",

services/course-material/pnpm-workspace.yaml

@@ -18,7 +18,7 @@ updateNotifier: false
 sharedWorkspaceLockfile: false
 
 # Delay brand-new releases to reduce supply-chain risk (minutes)
-minimumReleaseAge: 1440
+# minimumReleaseAge: 1440
 # If you want to exclude some packages from the minimumReleaseAge, you can do it here
 minimumReleaseAgeExclude: ["next", "react", "react-dom", "@next/*"]
 

services/course-material/src/components/ContentRenderer/core/formatting/CodeBlock/CopyButton.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { animated, SpringValue, useTransition } from "react-spring"
 
-import { useCopyToClipboard } from "./utils"
+import { useCopyHtmlContentToClipboard } from "./utils"
 
 import CopyIcon from "@/img/copy.svg"
 import { baseTheme } from "@/shared-module/common/styles"
@@ -112,7 +112,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {
   const { t } = useTranslation()
   const [copyStatus, setCopyStatus] = useState<CopyStatus>(COPY_STATUS.DEFAULT)
   const [showTooltip, setShowTooltip] = useState(false)
-  const copyToClipboard = useCopyToClipboard(content)
+  const copyToClipboard = useCopyHtmlContentToClipboard(content)
 
   const buttonRef = useRef<HTMLButtonElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)

services/course-material/src/components/ContentRenderer/core/formatting/CodeBlock/__tests__/utils.test.ts

@@ -1,6 +1,10 @@
 import { renderHook } from "@testing-library/react"
 
-import { decodeHtmlEntities, replaceBrTagsWithNewlines, useCopyToClipboard } from "../utils"
+import {
+  decodeHtmlEntities,
+  replaceBrTagsWithNewlines,
+  useCopyHtmlContentToClipboard,
+} from "../utils"
 
 describe("replaceBrTagsWithNewlines", () => {
   it("should return null when input is null", () => {
@@ -81,7 +85,7 @@ describe("decodeHtmlEntities", () => {
   })
 })
 
-describe("useCopyToClipboard", () => {
+describe("useCopyHtmlContentToClipboard", () => {
   const originalConsole = {
     log: console.log,
     warn: console.warn,
@@ -118,7 +122,7 @@ describe("useCopyToClipboard", () => {
   })
 
   it("should handle basic text copying", async () => {
-    const { result } = renderHook(() => useCopyToClipboard("Hello world"))
+    const { result } = renderHook(() => useCopyHtmlContentToClipboard("Hello world"))
     const copyToClipboard = result.current
 
     const success = await copyToClipboard()
@@ -129,7 +133,7 @@ describe("useCopyToClipboard", () => {
 
   it("should decode HTML entities and convert BR tags", async () => {
     const { result } = renderHook(() =>
-      useCopyToClipboard("if (x &lt; 10) {<br>  return true;<br>}"),
+      useCopyHtmlContentToClipboard("if (x &lt; 10) {<br>  return true;<br>}"),
     )
     const copyToClipboard = result.current
 
@@ -139,7 +143,9 @@ describe("useCopyToClipboard", () => {
   })
 
   it("should preserve encoded <br> tags as text", async () => {
-    const { result } = renderHook(() => useCopyToClipboard("Example: &lt;br&gt; tag<br>Next line"))
+    const { result } = renderHook(() =>
+      useCopyHtmlContentToClipboard("Example: &lt;br&gt; tag<br>Next line"),
+    )
     const copyToClipboard = result.current
 
     await copyToClipboard()
@@ -149,7 +155,7 @@ describe("useCopyToClipboard", () => {
 
   it("should preserve literal \\n sequences", async () => {
     const { result } = renderHook(() =>
-      useCopyToClipboard("console.log('\\n');<br>const x = '\\n';"),
+      useCopyHtmlContentToClipboard("console.log('\\n');<br>const x = '\\n';"),
     )
     const copyToClipboard = result.current
 
@@ -169,7 +175,7 @@ describe("useCopyToClipboard", () => {
         configurable: true,
       })
 
-      const { result } = renderHook(() => useCopyToClipboard("Test content"))
+      const { result } = renderHook(() => useCopyHtmlContentToClipboard("Test content"))
       const copyToClipboard = result.current
 
       const success = await copyToClipboard()
@@ -184,7 +190,7 @@ describe("useCopyToClipboard", () => {
         configurable: true,
       })
 
-      const { result } = renderHook(() => useCopyToClipboard("Test content"))
+      const { result } = renderHook(() => useCopyHtmlContentToClipboard("Test content"))
       const copyToClipboard = result.current
 
       const success = await copyToClipboard()
@@ -202,7 +208,7 @@ describe("useCopyToClipboard", () => {
       })
       document.execCommand = jest.fn(() => false)
 
-      const { result } = renderHook(() => useCopyToClipboard("Test content"))
+      const { result } = renderHook(() => useCopyHtmlContentToClipboard("Test content"))
       const copyToClipboard = result.current
 
       const success = await copyToClipboard()

services/course-material/src/components/ContentRenderer/core/formatting/CodeBlock/utils.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react"
+import { useCopyToClipboard as useCopyToClipboardBase } from "@/shared-module/common/hooks/useCopyToClipboard"
 
 /**
  * Decodes HTML entities in a string
@@ -21,78 +21,15 @@ export function replaceBrTagsWithNewlines(html: string | null | undefined): type
 }
 
 /**
- * Fallback copy method using execCommand.
- * @throws Error if copy fails
+ * Returns a callback for copying HTML content to clipboard.
+ * Processes HTML content by replacing BR tags with newlines and decoding HTML entities before copying.
+ * @param htmlContent - The HTML content to copy (will be processed before copying)
+ * @returns A function that when called attempts to copy the processed text and returns true if successful
  */
-function copyWithFallback(text: string): void {
-  const textArea = document.createElement("textarea")
-  textArea.value = text
-  document.body.appendChild(textArea)
-  textArea.select()
+export function useCopyHtmlContentToClipboard(htmlContent: string): () => Promise<boolean> {
+  const withoutNewLines = replaceBrTagsWithNewlines(htmlContent) ?? ""
+  const processedText = decodeHtmlEntities(withoutNewLines)
+  const baseCopyToClipboard = useCopyToClipboardBase(processedText)
 
-  const successful = document.execCommand("copy")
-  document.body.removeChild(textArea)
-  if (!successful) {
-    throw new Error("Copy failed")
-  }
-  console.info(`[Copy] Success using legacy method:\n${text}`)
-}
-
-/**
- * Attempts to copy text using the Clipboard API.
- * @throws Error if copy fails
- */
-async function copyWithClipboardApi(text: string): Promise<void> {
-  await navigator.clipboard.writeText(text)
-  console.info(`[Copy] Success using Clipboard API:\n${text}`)
-}
-
-/**
- * Returns a callback for copying code to clipboard.
- * @returns A function that when called attempts to copy text and returns true if successful
- */
-export function useCopyToClipboard(content: string): () => Promise<boolean> {
-  const copyToClipboard = useCallback(async (): Promise<boolean> => {
-    const withoutNewLines = replaceBrTagsWithNewlines(content) ?? ""
-    const textToCopy = decodeHtmlEntities(withoutNewLines)
-
-    try {
-      if (navigator.clipboard) {
-        try {
-          await copyWithClipboardApi(textToCopy)
-          return true
-        } catch (error) {
-          const isSecureContext = window.isSecureContext
-          const isPermissionError = error instanceof Error && error.name === "NotAllowedError"
-
-          if (!isSecureContext) {
-            console.warn(
-              "[Copy] Unable to use Clipboard API - HTTPS required. Trying legacy method.",
-            )
-          } else if (isPermissionError) {
-            console.warn(
-              `[Copy] Unable to use Clipboard API - Permission denied: ${error instanceof Error ? error.message : String(error)}. Trying legacy method.`,
-            )
-          } else {
-            console.warn(
-              `[Copy] Unable to use Clipboard API - Unknown error: ${error instanceof Error ? error.message : String(error)}. Trying legacy method.`,
-            )
-          }
-          copyWithFallback(textToCopy)
-          return true
-        }
-      } else {
-        console.warn("[Copy] Clipboard API not available. Trying legacy method.")
-        copyWithFallback(textToCopy)
-        return true
-      }
-    } catch (error) {
-      console.error(
-        `[Copy Failed] Copy operation failed. Please try selecting the text manually and using Ctrl+C/Cmd+C. Error: ${error}`,
-      )
-      return false
-    }
-  }, [content])
-
-  return copyToClipboard
+  return baseCopyToClipboard
 }

services/example-exercise/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-exercise",
   "version": "1.0.1",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.26.2",
   "scripts": {
     "build": "NODE_ENV=production next build",
     "dev": "next dev --port 3002 --turbopack",