feat(ask-ai): integrate kapa-ai page [BE-11409] (#214)

app/react/sidebar/Footer/BuildInfoModal.tsx

@@ -23,22 +23,25 @@ import styles from './Footer.module.css';
 export function BuildInfoModalButton() {
   const [isBuildInfoVisible, setIsBuildInfoVisible] = useState(false);
   const statusQuery = useSystemStatus();
+  const versionQuery = useSystemVersion();
 
-  if (!statusQuery.data) {
+  if (!statusQuery.data || !versionQuery.data) {
     return null;
   }
 
   const { Version } = statusQuery.data;
+  const { VersionSupport } = versionQuery.data;
 
   return (
     <>
       <button
         type="button"
         data-cy="portainerSidebar-versionNumber"
-        className="btn-none"
+        className="btn-none hover:underline"
         onClick={() => setIsBuildInfoVisible(true)}
+        title="About Portainer"
       >
-        {Version}
+        {`${Version} (${VersionSupport})`}
       </button>
       {isBuildInfoVisible && (
         <BuildInfoModal closeModal={() => setIsBuildInfoVisible(false)} />
@@ -57,8 +60,14 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
   }
 
   const { Edition } = statusQuery.data;
-  const { ServerVersion, DatabaseVersion, Build, Dependencies, Runtime } =
-    versionQuery.data;
+  const {
+    ServerVersion,
+    DatabaseVersion,
+    Build,
+    Dependencies,
+    Runtime,
+    VersionSupport,
+  } = versionQuery.data;
 
   return (
     <Modal onDismiss={closeModal} aria-label="build-info-modal">
@@ -69,13 +78,13 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
             <tbody>
               <tr>
                 <td>
-                  <span className="inline-flex items-center">
+                  <span className="inline-flex items-center flex-wrap">
                     <Server size="13" className="space-right" />
-                    Server Version: {ServerVersion}
+                    Server Version: {ServerVersion} ({VersionSupport})
                   </span>
                 </td>
                 <td>
-                  <span className="inline-flex items-center">
+                  <span className="inline-flex items-center flex-wrap">
                     <Database size="13" className="space-right" />
                     Database Version: {DatabaseVersion}
                   </span>
@@ -83,13 +92,13 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
               </tr>
               <tr>
                 <td>
-                  <span className="inline-flex items-center">
+                  <span className="inline-flex items-center flex-wrap">
                     <Hash size="13" className="space-right" />
                     CI Build Number: {Build.BuildNumber}
                   </span>
                 </td>
                 <td>
-                  <span>
+                  <span className="inline-flex items-center flex-wrap">
                     <Tag size="13" className="space-right" />
                     Image Tag: {Build.ImageTag}
                   </span>
@@ -97,8 +106,10 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
               </tr>
               <tr>
                 <td>
-                  <GitCommit size="13" className="space-right" />
-                  Git Commit: {Build.GitCommit}
+                  <span className="inline-flex items-center flex-wrap">
+                    <GitCommit size="13" className="space-right" />
+                    Git Commit: {Build.GitCommit}
+                  </span>
                 </td>
                 <td />
               </tr>

app/react/sidebar/SettingsSidebar.tsx

@@ -205,7 +205,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
             data-cy="portainerSidebar-edgeCompute"
           />
 
-          <SidebarItem.Wrapper label="Help / About">
+          <SidebarItem.Wrapper label="Get Help">
             <a
               href={
                 process.env.PORTAINER_EDITION === 'CE'
@@ -216,7 +216,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
               rel="noreferrer"
               className="hover:!underline focus:no-underline text-sm flex h-8 w-full items-center rounded px-3 transition-colors duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20"
             >
-              Help / About
+              Get Help
             </a>
           </SidebarItem.Wrapper>
         </SidebarParent>

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { Clock, Icon } from 'lucide-react';
+import { Clock, type LucideIcon } from 'lucide-react';
 
 import { SidebarItem } from '.';
 
@@ -10,7 +10,7 @@ const meta: Meta = {
 export default meta;
 
 interface StoryProps {
-  icon?: Icon;
+  icon?: LucideIcon;
   label: string;
 }
 

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import { Icon as IconTest } from 'lucide-react';
+import { type LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
 import { MouseEventHandler, PropsWithChildren } from 'react';
 
@@ -13,7 +13,7 @@ import { SidebarTooltip } from './SidebarTooltip';
 import { useSidebarSrefActive } from './useSidebarSrefActive';
 
 interface Props extends AutomationTestingProps {
-  icon?: IconTest;
+  icon?: LucideIcon;
   to: string;
   params?: object;
   label: string;