Merge remote-tracking branch 'origin/master' into marcin/prod-3146-co…

…nsole-controller-improvements

.github/workflows/controller-ci.yaml

@@ -66,7 +66,7 @@ jobs:
         with:
           go-version-file: go/controller/go.mod
           check-latest: true
-      - uses: golangci/golangci-lint-action@3a919529898de77ec3da873e3063ca4b10e7f5cc # v3.7.0
+      - uses: golangci/golangci-lint-action@3cfe3a4abbb849e10058ce4af15d205b6da42804 # v3.7.1
         with:
           version: v1.61.0
           working-directory: go/controller

AGENT_VERSION

@@ -1 +1 @@
-v0.5.9
+v0.5.12

Makefile

@@ -69,7 +69,7 @@ build: ## Build the Docker image
 helm-dependencies-rapid:
 	cd charts/console-rapid && helm dependency update
 
-helm-dependencies:
+helm-dependencies: ## updates helm deps for all key charts
 	cd charts/console && helm dependency update && \
 	cd ../../plural/helm/console && helm dependency update
 

assets/package.json

@@ -49,7 +49,7 @@
     "@nivo/radial-bar": "0.88.0",
     "@nivo/tooltip": "0.88.0",
     "@nivo/treemap": "0.88.0",
-    "@pluralsh/design-system": "5.4.0",
+    "@pluralsh/design-system": "5.5.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",
@@ -80,7 +80,6 @@
     "jsonpath": "1.1.1",
     "kubernetes-resource-parser": "0.1.0",
     "lodash": "4.17.21",
-    "moment": "2.29.4",
     "phoenix": "1.7.14",
     "pluralize": "8.0.0",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
@@ -98,15 +97,15 @@
     "react-merge-refs": "2.1.1",
     "react-resize-detector": "9.1.0",
     "react-router-dom": "6.28.1",
-    "react-spring": "9.7.1",
+    "react-spring": "9.7.5",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "1.8.10",
     "react-window-infinite-loader": "1.0.9",
     "react-window-reversed": "1.4.1",
     "reactflow": "11.10.1",
     "regenerator-runtime": "0.13.11",
     "semver": "7.5.4",
-    "styled-components": "6.1.13",
+    "styled-components": "6.1.15",
     "type-fest": "4.8.3",
     "use-immer": "0.9.0",
     "uuid": "9.0.1",
@@ -123,7 +122,6 @@
     "@apollo/sandbox": "2.7.0",
     "@cypress/webpack-preprocessor": "5.17.1",
     "@eslint/compat": "1.1.1",
-    "@eslint/eslintrc": "3.1.0",
     "@graphql-codegen/add": "5.0.0",
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/fragment-matcher": "5.0.2",
@@ -141,52 +139,48 @@
     "@types/humanize-duration": "3.27.4",
     "@types/jsdom": "21.1.5",
     "@types/mocha": "10.0.8",
-    "@types/node": "22.7.4",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
+    "@types/node": "22.13.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-window": "1.8.8",
     "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "8.8.0",
-    "@typescript-eslint/parser": "8.8.0",
+    "@typescript-eslint/eslint-plugin": "8.24.0",
+    "@typescript-eslint/parser": "8.24.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
-    "@vitejs/plugin-react": "4.3.2",
+    "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "2.1.1",
     "@vitest/ui": "2.1.1",
     "babel-plugin-styled-components": "2.1.4",
     "concurrently": "8.1.0",
     "customize-cra": "1.0.0",
     "cypress": "12.14.0",
-    "eslint": "9.11.1",
-    "eslint-config-pluralsh": "3.1.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint": "9.20.0",
+    "eslint-config-prettier": "10.0.1",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-import-newlines": "1.4.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.1",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "4.6.2",
     "globals": "15.10.0",
     "husky": "8.0.3",
     "jsdom": "22.1.0",
     "jwt-decode": "4.0.0",
     "lint-staged": "15.0.2",
-    "moment-timezone": "0.5.43",
     "npm-run-all": "4.1.5",
     "prettier": "3.3.3",
     "react-error-boundary": "4.0.11",
     "stylelint": "15.11.0",
-    "typescript": "5.6.2",
-    "typescript-eslint": "8.8.0",
+    "typescript": "5.7.3",
+    "typescript-eslint": "8.24.0",
     "usehooks-ts": "2.9.1",
     "vite": "5.4.11",
     "vite-bundle-visualizer": "1.2.1",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-rewrite-all": "1.0.2",
-    "vite-tsconfig-paths": "5.0.1",
-    "vitest": "2.1.5",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.0.5",
     "wait-on": "7.0.1"
   },
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx,graphql,md}": "prettier --write"
   }
-}
+}

assets/src/components/ai/AIPanelOverlay.tsx

@@ -17,12 +17,10 @@ const getTransitionProps = (open: boolean) => ({
 export function AIPanelOverlay({
   open,
   onClose,
-  alwaysGrow = false,
   children,
 }: {
   open: boolean
   onClose: () => void
-  alwaysGrow?: boolean
   children: ReactNode
 }) {
   const theme = useTheme()
@@ -36,25 +34,31 @@ export function AIPanelOverlay({
 
   return transitions((styles) => (
     <AnimatedDiv
-      ref={ref}
       css={{
-        display: 'flex',
-        transition: 'max-height 0.2s ease-in-out, height 0.2s ease-in-out',
-        pointerEvents: 'none',
+        zIndex: theme.zIndexes.modal,
         position: 'absolute',
         right: 0,
         top: 32 + theme.spacing.small,
-        width: 600,
-        zIndex: theme.zIndexes.modal,
-        '& > *': { pointerEvents: 'auto' },
-      }}
-      style={{
-        ...(alwaysGrow ? { height: maxHeight } : { maxHeight }),
         transformOrigin: 'top right',
-        ...styles,
       }}
+      style={styles}
     >
-      {children}
+      {/* react-spring incorrectly injects refs into the outermost component, which was causing an error with react 19 */}
+      {/* can probably remove this wrapper once this issue is closed: https://github.com/pmndrs/react-spring/issues/2341  */}
+      {/* perfectly fine for now though */}
+      <div
+        ref={ref}
+        css={{
+          display: 'flex',
+          transition: 'max-height 0.2s ease-in-out, height 0.2s ease-in-out',
+          pointerEvents: 'none',
+          width: 600,
+          '& > *': { pointerEvents: 'auto' },
+        }}
+        style={{ maxHeight }}
+      >
+        {children}
+      </div>
     </AnimatedDiv>
   ))
 }

assets/src/components/ai/AITableEntry.tsx

@@ -29,7 +29,7 @@ import {
 } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { dayjsExtended as dayjs } from 'utils/datetime.ts'
+import { dayjsExtended as dayjs, fromNow, isAfter } from 'utils/datetime.ts'
 import {
   getClusterDetailsPath,
   getServiceComponentPath,
@@ -88,7 +88,7 @@ export function AITableEntry({
 
   const timestamp = getThreadOrPinTimestamp(item)
 
-  const isStale = dayjs().isAfter(dayjs(timestamp).add(24, 'hours'))
+  const isStale = isAfter(dayjs(), dayjs(timestamp).add(24, 'hours'))
 
   const onClick = useCallback(() => {
     if (isInsight && insight) goToInsight(insight)
@@ -121,7 +121,7 @@ export function AITableEntry({
         </Chip>
       )}
       <CaptionP css={{ opacity: isStale ? 0.6 : 1, flexShrink: 0 }}>
-        {`${dayjs(timestamp).fromNow()}`}
+        {fromNow(timestamp)}
       </CaptionP>
       {!modal && (
         <>
@@ -387,7 +387,7 @@ function TableEntryResourceLink({
 export const getThreadOrPinTimestamp = (
   item: Nullable<ChatThreadTinyFragment | AiPinFragment>
 ) => {
-  if (!item) return dayjs()
+  if (!item) return new Date()
 
   const isPin = item.__typename === 'AiPin'
   const isInsight = isPin && !item.thread
@@ -396,8 +396,8 @@ export const getThreadOrPinTimestamp = (
   const insight = item.insight
 
   return isInsight
-    ? (insight?.updatedAt ?? insight?.insertedAt ?? dayjs())
-    : (thread?.lastMessageAt ?? thread?.insertedAt ?? dayjs())
+    ? (insight?.updatedAt ?? insight?.insertedAt ?? new Date())
+    : (thread?.lastMessageAt ?? thread?.insertedAt ?? new Date())
 }
 
 export const sortThreadsOrPins = (

assets/src/components/ai/chatbot/AISuggestFix.tsx

@@ -7,6 +7,7 @@ import {
 } from '@pluralsh/design-system'
 import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext.tsx'
 import {
+  ComponentPropsWithRef,
   Dispatch,
   ReactNode,
   SetStateAction,
@@ -29,8 +30,10 @@ import { AIPanel } from '../AIPanel.tsx'
 import { AISuggestFixButton } from './AISuggestFixButton.tsx'
 import { ChatWithAIButton, insightMessage } from './ChatbotButton.tsx'
 
-interface AISuggestFixProps {
+type AISuggestFixProps = {
   insight: Nullable<AiInsightFragment>
+  buttonProps?: ComponentPropsWithRef<typeof AISuggestFixButton>
+  iconOnly?: boolean
 }
 
 function fixMessage(fix: string): ChatMessage {
@@ -50,7 +53,7 @@ export function Loading({
   scopeId?: string
   scrollToBottom: () => void
   setStreaming: Dispatch<SetStateAction<boolean>>
-}): ReactNode {
+}) {
   const [streamedMessage, setStreamedMessage] = useState<AiDelta[]>([])
   useAiChatStreamSubscription({
     variables: { insightId, scopeId },
@@ -129,7 +132,7 @@ function FixPr({
   )
 }
 
-function AISuggestFix({ insight }: AISuggestFixProps): ReactNode {
+function AISuggestFix({ insight, buttonProps }: AISuggestFixProps) {
   const settings = useDeploymentSettings()
   const ref = useRef<HTMLDivElement>(null)
   const [streaming, setStreaming] = useState<boolean>(false)
@@ -169,12 +172,11 @@ function AISuggestFix({ insight }: AISuggestFixProps): ReactNode {
   )
 
   return (
-    <div
-      css={{
-        position: 'relative',
-      }}
-    >
-      <AISuggestFixButton onClick={showPanel} />
+    <div css={{ position: 'relative' }}>
+      <AISuggestFixButton
+        {...buttonProps}
+        onClick={showPanel}
+      />
       <AIPanel
         ref={ref}
         open={open}

assets/src/components/ai/chatbot/AISuggestFixButton.tsx

@@ -1,10 +1,20 @@
-import { Button, MagicWandIcon } from '@pluralsh/design-system'
-import { ComponentProps, ReactNode } from 'react'
+import { Button, IconFrame, MagicWandIcon } from '@pluralsh/design-system'
+import { ComponentProps } from 'react'
 
 function AISuggestFixButton({
+  iconOnly,
   ...props
-}: Omit<ComponentProps<typeof Button>, 'startIcon'>): ReactNode {
-  return (
+}: Omit<ComponentProps<typeof Button>, 'startIcon'> & { iconOnly?: boolean }) {
+  return iconOnly ? (
+    <IconFrame
+      clickable
+      tooltip
+      textValue="Suggest a fix"
+      icon={<MagicWandIcon />}
+      type="secondary"
+      {...props}
+    />
+  ) : (
     <Button
       startIcon={<MagicWandIcon />}
       {...props}

assets/src/components/ai/chatbot/ChatbotButton.tsx

@@ -1,9 +1,14 @@
-import { Button, ChatOutlineIcon } from '@pluralsh/design-system'
+import {
+  Button,
+  ChatOutlineIcon,
+  IconFrame,
+  Spinner,
+} from '@pluralsh/design-system'
 import { AiInsightFragment, AiRole, ChatMessage } from 'generated/graphql.ts'
+import { ButtonProps } from 'honorable'
 import { Dispatch, ReactNode } from 'react'
 import { useChatbot } from '../AIContext.tsx'
 import AIButton from '../explain/ExplainWithAIButton.tsx'
-import { ButtonProps } from 'honorable'
 
 const FIX_PREFACE =
   "The following is an insight into an issue on the user's infrastructure we'd like to learn more about:"
@@ -43,12 +48,14 @@ export function insightMessage(
 export function ChatWithAIButton({
   messages,
   insightId,
-  bodyText,
+  bodyText = 'Chat with AI',
+  iconOnly = false,
   ...props
 }: {
   messages?: Nullable<ChatMessage[]>
   insightId?: Nullable<string>
   bodyText?: string
+  iconOnly?: boolean
 } & ButtonProps) {
   const { createNewThread, loading } = useChatbot()
 
@@ -61,14 +68,24 @@ export function ChatWithAIButton({
       messages: messages || [],
     })
   }
-  return (
+  return iconOnly ? (
+    <IconFrame
+      clickable
+      onClick={handleClick}
+      tooltip
+      textValue={bodyText}
+      icon={loading ? <Spinner /> : <ChatOutlineIcon />}
+      type="secondary"
+      {...props}
+    />
+  ) : (
     <Button
       loading={loading}
       onClick={handleClick}
       startIcon={<ChatOutlineIcon />}
       {...props}
     >
-      {bodyText ?? 'Chat with AI'}
+      {bodyText}
     </Button>
   )
 }