Merge branch 'master' into fix-bugs

Signed-off-by: Aabid Sofi <65964225+aabidsofi19@users.noreply.github.com>

Author: aabidsofi19

.github/workflows/multi-platform.yml

@@ -37,43 +37,64 @@ on:
         type: string
 
 env:
-  GIT_VERSION: ${{github.event.inputs.release-ver}}
+  GIT_VERSION: ${{github.event.inputs.release-ver || inputs.release-ver }}
   RELEASE_CHANNEL: ${{github.event.inputs.release-channel || inputs.release-channel }}
 
 jobs:
-  print-inputs:
+  validate-inputs:
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          echo "Env RELEASE_CHANNEL: ${{env.RELEASE_CHANNEL}}"
-          echo "Env GIT_VERSION: ${{env.GIT_VERSION}}"
+      - name: Validate inputs
+        run: |
+          echo "Validating GIT_VERSION and RELEASE_CHANNEL..."
+
+          if [ -z "${{ env.GIT_VERSION }}" ]; then
+            echo "❌ Error: GIT_VERSION is empty!"
+            exit 1
+          fi
+          
+          if [ ${#GIT_VERSION} -le 3 ]; then
+            echo "❌ Error: GIT_VERSION '${GIT_VERSION}' is too short. It must be > 3 characters."
+            exit 1
+          fi
+
+          if [ -z "${{ env.RELEASE_CHANNEL }}" ]; then
+            echo "❌ Error: RELEASE_CHANNEL is empty!"
+            exit 1
+          fi
+
+          echo "✓ Validation passed: GIT_VERSION=${{ env.GIT_VERSION }}, RELEASE_CHANNEL=${{ env.RELEASE_CHANNEL }}"
+
 
   docker-build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
+        
       - name: Identify Release Values
         run: |
-          # LATEST_VERSION=$(git ls-remote --tags | tail -1 | cut -f2 | sed 's/refs\/tags\///g')
-          # GIT_VERSION=$(git ls-remote --tags | tail -1 | cut -f2 | sed 's/refs\/tags\///g')
-          # GIT_VERSION=$(git describe --tags `git rev-list --tags --max-count=1` --always)
-          GIT_STRIPPED_VERSION=$(echo $GIT_VERSION | cut -c2-)
-          # echo "GIT_LATEST=$LATEST_VERSION" >> $GITHUB_ENV
-          echo "GIT_VERSION=$GIT_VERSION" >> $GITHUB_ENV
+          GIT_VERSION="${{ env.GIT_VERSION }}"
+          GIT_STRIPPED_VERSION="${GIT_VERSION#v}"
           echo "GIT_STRIPPED_VERSION=$GIT_STRIPPED_VERSION" >> $GITHUB_ENV
         shell: bash
 
       - name: Generate release notes
         id: release_notes
         run: |
           RELEASE_NOTES=$(gh release create ${{ github.ref_name }} --generate-notes --repo ${{ github.repository }} | tail -n +2)  # Get generated release notes, excluding the first line
-          RELEASE_NOTES="$RELEASE_NOTES\nSee https://docs.layer5.io/kanvas/reference/releases/$GIT_VERSION"
+          RELEASE_NOTES="$RELEASE_NOTES\nSee https://docs.layer5.io/kanvas/reference/releases/${{env.GIT_VERSION}}"
           echo "RELEASE_NOTES<<EOF" >> $GITHUB_ENV
           echo "$RELEASE_NOTES" >> $GITHUB_ENV
           echo "EOF" >> $GITHUB_ENV
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Setup image tags in docker-compose.yaml
+        run: |
+          sed -i "s/kanvas-docker-extension:stable-latest/kanvas-docker-extension:${{env.RELEASE_CHANNEL}}-${{env.GIT_VERSION}}/g" docker-compose.yaml
+          sed -i "s/meshery:kanvas-latest/meshery:kanvas-${{env.GIT_VERSION}}/g" docker-compose.yaml
+          cat docker-compose.yaml
           
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3

ui/src/components/ExtensionComponent/AuthedDashboard.js

@@ -30,6 +30,7 @@ import {
 // import KanvasColor from "../../img/SVGs/kanvasColor";
 import KanvasWhite from "../../img/SVGs/kanvasWhite";
 import DocsIcon from "../../img/SVGs/docsIcon";
+import VideosIcon from "../../img/SVGs/videosIcon";
 import KanvasHorizontalLight from "../../img/SVGs/KanvasHorizontalLight";
 
 import { randomApplicationNameGenerator } from "../../utils";
@@ -59,21 +60,46 @@ const DocsButton = ({ isDarkTheme, onClick }) => (
   </StyledButton>
 );
 
+const VideosButton = ({ isDarkTheme, onClick }) => (
+  <StyledButton
+    size="small"
+    onClick={onClick}
+    style={{
+      backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE",
+    }}
+  >
+    <VideosIcon
+      width="24"
+      height="24"
+      CustomColor={isDarkTheme ? "white" : "#3C494F"}
+    />
+    &nbsp;Videos
+  </StyledButton>
+);
+
 const HeaderSection = ({ isDarkTheme }) => (
   <MuiBox>
     <MuiBox
       display="flex"
       justifyContent={"end"}
-      gap={4}
+      gap={1}
       alignItems={"center"}
-      m={2}
+      ml={2}
+      mr={4}
+      my={2}
     >
       <VersionInfoSection isDarkTheme={isDarkTheme} />
       <DocsButton
         isDarkTheme={isDarkTheme}
         onClick={() =>
           window.ddClient.host.openExternal("https://docs.layer5.io/kanvas/")
         }
+      />      
+      <VideosButton
+        isDarkTheme={isDarkTheme}
+        onClick={() =>
+          window.ddClient.host.openExternal("https://docs.layer5.io/videos/")
+        }
       />
 
       <UserAccountSection isDarkTheme={isDarkTheme} />
@@ -281,7 +307,7 @@ const VersionInfoSection = ({ isDarkTheme }) => {
       <a
         onClick={() =>
           openExternalLink(
-            `https://docs.Kanvas.io/project/releases/${kanvasVersion}`,
+            `https://docs.layer5.io/project/releases/${kanvasVersion}`,
           )
         }
         target="_blank"

ui/src/components/ExtensionComponent/RecentDesigns.js

@@ -82,6 +82,9 @@ export default function RecentDesignsCard({ isDarkTheme }) {
     const myDesignsURL = `https://cloud.layer5.io/catalog/content/my-designs/${name}-${design.id}?source=%257B%2522type%2522%253A%2522my-designs%2522%257D`;
     window.ddClient.host.openExternal(myDesignsURL);
   };
+  const RecentsTooltipTitle = (
+    <Typography variant="body2">Designs in this list are those owned by you, available in your currently selected Organization and Workspace. Learn more about Spaces at https://docs.layer5.io/cloud/spaces/</Typography>
+  );
 
   const RecentDesignsTooltipTitle = (
     <Typography variant="body1" component="p" sx={{ mt: 0.5 }}>
@@ -101,6 +104,7 @@ export default function RecentDesignsCard({ isDarkTheme }) {
       isDarkTheme={isDarkTheme}
       sx={{ flexDirection: "column", pt: "0.5rem", pb: "0.5rem" }}
     >
+
       <Box
         display="flex"
         justifyContent="center"

ui/src/img/SVGs/videosIcon.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const VideosIcon = ({ width = 32, height = 32 }) => (
+  <svg
+    width={width}
+    height={height}
+    version="1.1"
+    viewBox="0 0 32 32"
+    fill="#fff"
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 32 32"
+  >
+    <title>Videos</title>
+    
+    <path d="M16 0C7.164 0 0 7.164 0 16s7.164 16 16 16 16-7.164 16-16S24.836 0 16 0zm-6 24V8l16.008 8L10 24z" fill="#00b39f" class="fill-4e4e50" 
+    />
+  </svg>
+);
+
+export default VideosIcon;