[pull] master from layer5io:master

src/custom/LearningCard/LearningCard.tsx

@@ -19,9 +19,7 @@ interface Tutorial {
     courseTitle: string;
     description: string;
     status?: boolean;
-    cardImage: {
-      src: string;
-    };
+    cardImage: string;
   };
 }
 
@@ -52,7 +50,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
                 <p className="summary">{tutorial.frontmatter.description}</p>
               </CardDesc>
               <CardImage>
-                <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+                <img src={tutorial.frontmatter.cardImage} alt={tutorial.frontmatter.title} />
               </CardImage>
             </div>
           </CardParent>
@@ -83,7 +81,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
                   </p>
                 </CardSubdata>
                 <CardImage>
-                  <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+                  <img src={tutorial.frontmatter.cardImage} />
                 </CardImage>
               </div>
             </CardParent>

src/custom/SetupPrerequisite/SetupPrerequisite.tsx

@@ -9,24 +9,22 @@ interface SetupItem {
   heading: string;
   description: string;
   Icon: JSX.Element;
-  onClick: () => void;
+  url: string;
 }
 interface SetupPreReqProps {
   Steps: SetupItem[];
+  PrerequisiteLine?: string;
 }
-const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps }) => (
+const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps, PrerequisiteLine }) => (
   <SetupPreReqWrapper>
     <div className="get-started-desc" id="pre-requisites">
       <h2>Prerequisites</h2>
-      <p>
-        In this learning path, we will be using Meshery as the management plane to manage the
-        service meshes. Meshery, collaborative Kubernetes manager
-      </p>
+      <p>{PrerequisiteLine}</p>
     </div>
     <ContainerCardWrapper id="Set up">
       {Steps.map((item) => {
         return (
-          <Card>
+          <Card href={item.url} target="_blank">
             <CardHeader>
               <h2>{item.heading}</h2>
               {item.Icon}

src/custom/SetupPrerequisite/style.tsx

@@ -13,14 +13,15 @@ const SetupPreReqWrapper = styled('div')({
 const ContainerCardWrapper = styled('div')(({ theme }) => ({
   display: 'flex',
   cursor: 'pointer',
-  '& div': {
+  '& a': {
     color: theme.palette.text.primary,
     margin: '1rem'
   }
 }));
 
-const Card = styled('div')(({ theme }) => ({
+const Card = styled('a')(({ theme }) => ({
   padding: '2rem',
+  textDecoration: 'none',
   background: theme.palette.mode === 'light' ? '#EEEEEE' : '#212121',
   maxWidth: '20rem',
   minHeight: '21.5rem',
@@ -33,12 +34,9 @@ const Card = styled('div')(({ theme }) => ({
 
 const CardHeader = styled('div')({
   display: 'flex',
-  flex: 'auto',
-  '& .setup-imgs ': {
-    flex: '0 0 25%',
-    alignSelf: 'center',
-    margin: '0 0.5rem'
-  }
+  alignItems: 'center',
+  margin: '1rem 0 !important',
+  gap: '1rem'
 });
 
 const SetupImgs = styled('div')({

src/custom/StyledChapter/StyledChapter.tsx

@@ -15,7 +15,8 @@ const StyledChapter = styled('div')(({ theme }) => ({
   },
 
   '& a': {
-    color: KEPPEL
+    color: KEPPEL,
+    textDecoration: 'none'
   },
   '& pre': {
     backgroundColor: '#011627',

src/schemas/grafanaCredential/schema.tsx

@@ -0,0 +1,35 @@
+/**
+ * Schema for creating grafana credential;
+ */
+const grafanaCredentialSchema = {
+  type: 'object',
+  title: 'Grafana',
+  properties: {
+    credentialName: {
+      title: 'Credential Name',
+      type: 'string',
+      description: 'Name of your credential'
+    },
+    secret: {
+      type: 'object',
+      title: 'Credential Secret',
+      description: 'Credential secret for the Grafana instance',
+      properties: {
+        grafanaURL: {
+          type: 'string',
+          title: 'URL',
+          description: 'URL of the Grafana instance'
+        },
+        grafanaAPIKey: {
+          type: 'string',
+          title: 'API Key',
+          description: 'API Key for the Grafana instance'
+        }
+      },
+      required: ['grafanaURL', 'grafanaAPIKey']
+    }
+  },
+  required: ['credentialName']
+};
+
+export default grafanaCredentialSchema;

src/schemas/grafanaCredential/uiSchema.tsx

@@ -0,0 +1,3 @@
+const grafanaCredentialUiSchema = {};
+
+export default grafanaCredentialUiSchema;

src/schemas/index.tsx

@@ -19,11 +19,22 @@ import importFilterUiSchema from './importFilter/uiSchema';
 import publishCatalogItemSchema from './publishCatalogItem/schema';
 import publishCatalogItemUiSchema from './publishCatalogItem/uiSchema';
 
+import kubernetesCredentialSchema from './kubernetesCredential/schema';
+import kubernetesCredentialUiSchema from './kubernetesCredential/uiSchema';
+
+import prometheusCredentialSchema from './prometheusCredential/schema';
+import prometheusCredentialUiSchema from './prometheusCredential/uiSchema';
+
+import grafanaCredentialSchema from './grafanaCredential/schema';
+import grafanaCredentialSUiSchema from './grafanaCredential/uiSchema';
+
 export {
   createAndEditEnvironmentSchema,
   createAndEditEnvironmentUiSchema,
   createAndEditWorkspaceSchema,
   createAndEditWorkspaceUiSchema,
+  grafanaCredentialSUiSchema,
+  grafanaCredentialSchema,
   helmConnectionSchema,
   helmConnectionUiSchema,
   helpAndSupportModalSchema,
@@ -32,6 +43,10 @@ export {
   importDesignUiSchema,
   importFilterSchema,
   importFilterUiSchema,
+  kubernetesCredentialSchema,
+  kubernetesCredentialUiSchema,
+  prometheusCredentialSchema,
+  prometheusCredentialUiSchema,
   publishCatalogItemSchema,
   publishCatalogItemUiSchema
 };

src/schemas/kubernetesCredential/schema.tsx

@@ -0,0 +1,74 @@
+/**
+ * Schema for creating grafana credential;
+ */
+const kubernetesCredentialSchema = {
+  type: 'object',
+  title: 'Kubernetes',
+  properties: {
+    credentialName: {
+      title: 'Credential Name',
+      type: 'string',
+      description: 'Name of your credential'
+    },
+    secret: {
+      type: 'object',
+      title: 'Credential Secret',
+      description: 'Credential secret for the Kubernetes cluster',
+      properties: {
+        clusterName: {
+          type: 'string',
+          title: 'Cluster Name',
+          description: 'Name of the Kubernetes cluster'
+        },
+        clusterServerURL: {
+          type: 'string',
+          title: 'Server URL',
+          description: 'URL of the Kubernetes cluster'
+        },
+        auth: {
+          type: 'object',
+          title: 'Auth',
+          description: 'Kubernetes cluster authentication',
+          properties: {
+            clusterUserName: {
+              type: 'string',
+              title: 'User Name',
+              description: 'Name of the Kubernetes cluster user'
+            },
+            clusterToken: {
+              type: 'string',
+              title: 'Token',
+              description: 'Token of the Kubernetes cluster user'
+            },
+            clusterClientCertificateData: {
+              type: 'string',
+              title: 'Client Certificate Data',
+              description: 'Certificate data of the Kubernetes cluster'
+            },
+            clusterClientKeyData: {
+              type: 'string',
+              title: 'Client Key Data',
+              description: 'Client Key data of the Kubernetes cluster'
+            },
+            clusterCertificateAuthorityData: {
+              type: 'string',
+              title: 'Certificate Authority Data',
+              description: 'Certificate Authority data of the Kubernetes cluster'
+            }
+          },
+          required: [
+            'clusterUserName',
+            'clusterToken',
+            'clusterClientCertificateData',
+            'clusterClientKeyData',
+            'clusterCertificateAuthorityData'
+          ]
+        }
+      },
+      required: ['clusterName', 'clusterServerURL']
+    }
+  },
+  required: ['credentialName']
+};
+
+export default kubernetesCredentialSchema;

src/schemas/kubernetesCredential/uiSchema.tsx

@@ -0,0 +1,3 @@
+const kubernetesCredentialUiSchema = {};
+
+export default kubernetesCredentialUiSchema;

src/schemas/prometheusCredential/schema.tsx

@@ -0,0 +1,30 @@
+/**
+ * Schema for creating prometheus credential;
+ */
+const prometheusCredentialSchema = {
+  type: 'object',
+  title: 'Prometheus',
+  properties: {
+    credentialName: {
+      title: 'Credential Name',
+      type: 'string',
+      description: 'Name of your credential'
+    },
+    secret: {
+      type: 'object',
+      title: 'Credential Secret',
+      description: 'Credential secret for the Prometheus instance',
+      properties: {
+        prometheusURL: {
+          type: 'string',
+          title: 'URL',
+          description: 'URL of the Prometheus instance'
+        }
+      },
+      required: ['prometheusURL']
+    }
+  },
+  required: ['credentialName']
+};
+
+export default prometheusCredentialSchema;

src/schemas/prometheusCredential/uiSchema.tsx

@@ -0,0 +1,3 @@
+const prometheusCredentialUiSchema = {};
+
+export default prometheusCredentialUiSchema;

src/theme/typography.ts

@@ -18,16 +18,31 @@ declare module '@mui/material/styles' {
 
   // allow configuration using `createTheme`
   interface TypographyVariantsOptions {
-    textH1Bold: React.CSSProperties;
-    textH2Medium: React.CSSProperties;
-    textH3Medium: React.CSSProperties;
-    textB1Regular: React.CSSProperties;
-    textB2SemiBold: React.CSSProperties;
-    textB3Regular: React.CSSProperties;
-    textL1Bold: React.CSSProperties;
-    textL2Regular: React.CSSProperties;
-    textC1Regular: React.CSSProperties;
-    textC2Regular: React.CSSProperties;
+    textH1Bold?: React.CSSProperties;
+    textH2Medium?: React.CSSProperties;
+    textH3Medium?: React.CSSProperties;
+    textB1Regular?: React.CSSProperties;
+    textB2SemiBold?: React.CSSProperties;
+    textB3Regular?: React.CSSProperties;
+    textL1Bold?: React.CSSProperties;
+    textL2Regular?: React.CSSProperties;
+    textC1Regular?: React.CSSProperties;
+    textC2Regular?: React.CSSProperties;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    textH1Bold: true;
+    textH2Medium: true;
+    textH3Medium: true;
+    textB1Regular: true;
+    textB2SemiBold: true;
+    textB3Regular: true;
+    textL1Bold: true;
+    textL2Regular: true;
+    textC1Regular: true;
+    textC2Regular: true;
   }
 }
 
@@ -37,7 +52,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
   return {
     fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),
     textH1Bold: {
-      fontFamily: ['Qanelas Soft'].join(','),
+      fontFamily: ['Qanelas Soft Regular'].join(','),
       fontSize: '52px',
       lineHeight: '64px',
       fontWeight: 700,
@@ -47,7 +62,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
       }
     },
     textH2Medium: {
-      fontFamily: ['Qanelas Soft'].join(','),
+      fontFamily: ['Qanelas Soft Regular'].join(','),
       fontSize: '32px',
       lineHeight: '40px',
       fontWeight: 500,
@@ -57,7 +72,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
       }
     },
     textH3Medium: {
-      fontFamily: ['Qanelas Soft'].join(','),
+      fontFamily: ['Qanelas Soft Regular'].join(','),
       fontSize: '1.5rem',
       lineHeight: '2.25rem',
       fontWeight: 500,
@@ -97,7 +112,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
       lineHeight: '1.5rem'
     },
     textL1Bold: {
-      fontFamily: ['Qanelas Soft'].join(','),
+      fontFamily: ['Qanelas Soft Regular'].join(','),
       fontSize: '0.75rem',
       fontWeight: 700,
       lineHeight: '1rem'