Add tekton & topology dependencies utils, hooks, types and components

Author: Eswaraiahsapram

.changeset/ninety-news-boil.md

@@ -0,0 +1,5 @@
+---
+"@aonic-ui/pipelines": major
+---
+
+Added tekton and topology types, utils, hooks & components

packages/core/Readme.md

@@ -1,23 +1,17 @@
-
 # @aonic-ui/pipelines
 
 @aonic-core UI component library provides a set of customizable and easy-to-use components for building modern web applications with React.
 
 ## Getting Started
 
-
-
-
 ### Installation
 
 ```bash
 npm install @aonic-ui/core
 ```
 
-
 ### Usage
 
-
 ```bash
 import { Button } from '@aonic-ui/core';
 

packages/pipelines/Readme.md

@@ -1,24 +1,19 @@
-
 # @aonic-ui/pipelines
 
 @aonic-pipelines UI component library provides a set of customizable and easy-to-use components for building modern web applications with React. It contains UI components, utilities and types which can be used in tekton based web console.
 
 ## Getting Started
 
-
-
-
 ### Installation
 
 ```bash
 npm install @aonic-ui/pipelines
 ```
 
-
 ### Usage
 
-
 Basic
+
 ```bash
 import { Output, usePipelineRunOutput } from '@aonic-ui/pipelines';
 
@@ -31,14 +26,15 @@ import { Output, usePipelineRunOutput } from '@aonic-ui/pipelines';
 ```
 
 Using helper functions
+
 ```bash
 import { Output, usePipelineRunOutput } from '@aonic-ui/pipelines';
 
   const output = usePipelineRunOutput(
     mockData.pipelineRun as PipelineRunKind,
     mockData.taskRuns,
     getLogs);
-  
+
   const getLogs = (podName, containerName): Promise<string> => {
 
     // fetching the pod logs code goes here.

packages/pipelines/package.json

@@ -34,8 +34,18 @@
   },
   "homepage": "https://github.com/redhat-developer/aonic-ui#readme",
   "dependencies": {
+    "@backstage/catalog-model": "^1.7.3",
+    "@backstage/core-plugin-api": "^1.10.3",
+    "@backstage/plugin-kubernetes-common": "^0.9.2",
+    "@backstage/plugin-kubernetes-react": "^0.5.3",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "5.15.17",
+    "@mui/material": "^5.15.17",
     "@patternfly/react-table": "^6.0.0",
-    "js-yaml": "^4.1.0"
+    "classnames": "^2.3.2",
+    "js-yaml": "^4.1.0",
+    "react-router-dom": "^6.0.0",
+    "react-use": "^17.5.0"
   },
   "devDependencies": {
     "@aonic-ui/eslint-config": "*",

packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckTitle.tsx

@@ -7,7 +7,7 @@ const DeploymentCheckTitle: React.FC = () => {
   return (
     <Content
       style={{
-        marginBottom: "var(--pf-t--global--spacer--sm)",
+        marginBottom: 'var(--pf-t--global--spacer--sm)',
       }}
     >
       <Content component={ContentVariants.p}>

packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckTitle.tsx

@@ -7,7 +7,7 @@ const ImageCheckTitle = () => {
   return (
     <Content
       style={{
-        marginBottom: "var(--pf-t--global--spacer--sm)",
+        marginBottom: 'var(--pf-t--global--spacer--sm)',
       }}
     >
       <Content component={ContentVariants.p}>

packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckToolbar.tsx

@@ -23,7 +23,7 @@ const ImageCheckToolbar: React.FC = () => {
 
   return (
     <Toolbar
-      style={{ marginTop: "var(--pf-t--global--spacer--sm)" }}
+      style={{ marginTop: 'var(--pf-t--global--spacer--sm)' }}
       className="pf-m-toggle-group-container"
       clearAllFilters={() => onClearAllFilters(SubTab.imageCheck)}
       data-testid="image-check-toolbar"

packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/__tests__/ImageCheckTable.test.tsx

@@ -39,7 +39,6 @@ describe('ImageCheckTable', () => {
     });
   });
 
-
   test('should render the ImageCheckTable even if the results are not available', async () => {
     render(
       <ACSContextProvider
@@ -50,7 +49,7 @@ describe('ImageCheckTable', () => {
       </ACSContextProvider>,
     );
 
-   await waitFor(() => {
+    await waitFor(() => {
       screen.getByTestId('image-check-table');
     });
   });

packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanTitle.tsx

@@ -7,7 +7,7 @@ const ImageScanTitle = () => {
   return (
     <Content
       style={{
-        marginBottom: "var(--pf-t--global--spacer--sm)",
+        marginBottom: 'var(--pf-t--global--spacer--sm)',
       }}
     >
       <Content component={ContentVariants.p}>

packages/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractTitle.tsx

@@ -5,7 +5,7 @@ const EnterpriseContractTitle = () => {
   return (
     <Content
       style={{
-        marginBottom: "var(--pf-t--global--spacer--sm)",
+        marginBottom: 'var(--pf-t--global--spacer--sm)',
       }}
     >
       <Content component={ContentVariants.p}>
@@ -18,7 +18,9 @@ const EnterpriseContractTitle = () => {
           isInline
           iconPosition="right"
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
+            <ExternalLinkAltIcon
+              style={{ fontSize: 'var(--pf-t--global--icon--size--font--xs)' }}
+            />
           }
           component={(props) => (
             <a
@@ -36,7 +38,9 @@ const EnterpriseContractTitle = () => {
           variant="link"
           style={{ padding: 0 }}
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
+            <ExternalLinkAltIcon
+              style={{ fontSize: 'var(--pf-t--global--icon--size--font--xs)' }}
+            />
           }
           iconPosition="right"
           component={(props) => (
@@ -58,7 +62,9 @@ const EnterpriseContractTitle = () => {
             padding: 0,
           }}
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
+            <ExternalLinkAltIcon
+              style={{ fontSize: 'var(--pf-t--global--icon--size--font--xs)' }}
+            />
           }
           iconPosition="right"
         >