feat: AI insights tab

src/AppRoot.tsx

@@ -7,23 +7,19 @@ import {Content} from 'antd/lib/layout/layout';
 
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 
-import {IconLabel, Tag} from '@atoms';
-
 import {ConfigContext, DashboardContext, MainContext} from '@contexts';
 import {ModalHandler, ModalOutletProvider} from '@contexts/ModalContext';
 
 import {useAxiosInterceptors} from '@hooks/useAxiosInterceptors';
 import {useLastCallback} from '@hooks/useLastCallback';
 
-import {AiInsightsTab} from '@molecules';
-
 import {Sider} from '@organisms';
 
 import {ErrorBoundary} from '@pages';
 
 import {BasePermissionsResolver, PermissionsProvider} from '@permissions/base';
 
-import PluginScope from '@plugins/PluginScope';
+import createAiInsightsPlugin from '@plugins/definitions/ai-insights';
 import {Plugin} from '@plugins/types';
 
 import {useAppDispatch} from '@redux/hooks';
@@ -111,27 +107,7 @@ const AppRoot: React.FC = () => {
     [navigate, location]
   );
 
-  const plugins: Plugin[] = useMemo(
-    () => [
-      {
-        name: 'ai-insights',
-        setup: (scope: PluginScope) => {
-          scope.appendSlot(
-            'testExecutionTabs',
-            {
-              key: 'ai-insights-tab',
-              label: <IconLabel title="AI Insights" icon={<Tag title="NEW" type="info" />} />,
-              children: <AiInsightsTab />,
-            },
-            {
-              order: 4,
-            }
-          );
-        },
-      },
-    ],
-    []
-  );
+  const plugins: Plugin[] = useMemo(() => [createAiInsightsPlugin()], []);
 
   return composeProviders()
     .append(ConfigContext.Provider, {value: config})

src/components/molecules/AiInsightsTab/AiInsightsTab.styled.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import Colors from '@styles/Colors';
+
+export const AiInsightContainer = styled.div`
+  width: 100%;
+  border: 1px solid ${Colors.indigo400};
+  border-radius: 4px;
+  background-color: ${Colors.slate900};
+`;
+
+export const AiInsightContent = styled.div`
+  padding: 40px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+`;

src/components/molecules/AiInsightsTab/AiInsightsTab.tsx

@@ -1,19 +1,43 @@
+import {ReactComponent as LockedIcon} from '@assets/lockedIcon.svg';
+
+import {Button, Text} from '@custom-antd';
+
 import {Execution} from '@models/execution';
 
-import {usePluginState} from '@plugins/pluginHooks';
+import Colors from '@styles/Colors';
+
+import {externalLinks} from '@utils/externalLinks';
+
+import {AiInsightContainer, AiInsightContent} from './AiInsightsTab.styled';
 
 interface AiInsightsTabProps {
   execution: Execution;
   test: any;
 }
 
 const AiInsightsTab = () => {
-  const [{execution}] = usePluginState<AiInsightsTabProps>('testExecutionTabs');
   return (
-    <div>
-      This is a cloud only feature. Please log in to cloud in order to use this feature for id
-      {execution.id}
-    </div>
+    <AiInsightContainer>
+      <AiInsightContent>
+        <LockedIcon />
+        <Text className="big bold"> This feature is available only in Testkube Cloud.</Text>
+        <Text color={Colors.slate400}>
+          Start using Testkube Cloud to get AI insights for your test executions, as well as other exclusive features.
+          <a href={externalLinks.testkubeCloud} target="_blank">
+            {' '}
+            Learn more
+          </a>
+        </Text>
+        <Button
+          type="primary"
+          onClick={() => {
+            window.open(externalLinks.testkubeCloud, '_blank');
+          }}
+        >
+          Go to Testkube Cloud
+        </Button>
+      </AiInsightContent>
+    </AiInsightContainer>
   );
 };
 

src/plugins/definitions/ai-insights.tsx

@@ -0,0 +1,30 @@
+import {IconLabel, Tag} from '@atoms';
+
+import {AiInsightsTab} from '@molecules';
+
+import {Plugin, TestExecutionTabsInterface} from '@plugins/types';
+
+const createAiInsightsPlugin = (): Plugin => ({
+  name: 'ai-insights',
+  setup: scope => {
+    scope.appendSlot(
+      'testExecutionTabs',
+      {
+        key: 'ai-insights-tab',
+        label: <IconLabel title="AI Insights" icon={<Tag title="NEW" type="info" />} />,
+        children: <AiInsightsTab />,
+      },
+      {
+        order: 4,
+        visible: () => {
+          return (
+            scope.getState<TestExecutionTabsInterface>('testExecutionTabs')?.execution?.executionResult?.status ===
+            'failed'
+          );
+        },
+      }
+    );
+  },
+});
+
+export default createAiInsightsPlugin;

src/utils/externalLinks.ts

@@ -10,6 +10,7 @@ export enum externalLinks {
   sourcesApi = 'https://docs.testkube.io/openapi/#tag/test-sources',
   sourcesDocumentation = 'https://docs.testkube.io/articles/creating-tests/#test-source',
   testSources = 'https://docs.testkube.io/articles/test-sources',
+  testkubeCloud = 'https://cloud.testkube.io',
   OSStoCloudMigration = 'https://cloud.testkube.io/system-init?cloudMigrate=true',
   apiEndpoint = 'https://docs.testkube.io/articles/testkube-dashboard-api-endpoint',
   createTestSuite = 'https://docs.testkube.io/articles/creating-test-suites',