add promote and loc links

adobecom · Dec 18, 2024 · 489e817 · 489e817
1 parent 95c2fe7
commit 489e817
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
-    "daisyui": "^4.11.1",
+    "daisyui": "latest",
     "http-proxy-middleware": "^3.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -9,6 +9,36 @@ const menuData = {
   DA: ['da-homepage', 'da-dc', 'da-cc', 'da-bacom', 'da-bacom-blog', 'da-feds']
 };
 
+const SHAREPOINT_BASE = 'https://adobe.sharepoint.com/:x:/r/sites/adobecom/';
+const PROMOTE_BASE = `${SHAREPOINT_BASE}_layouts/15/Doc.aspx?sourcedoc=%7B{id}%7D&file=promote-smoke.xlsx&action=default&mobileredirect=true`;
+
+const testResultsLinks = {
+  'graybox-homepage': {
+    promote: PROMOTE_BASE.replace('{id}', 'ED68EF15-FEE9-4E1F-BA59-DAC1E465C645'),
+    loc: `${SHAREPOINT_BASE}homepage-loc`
+  },
+  'graybox-dc': {
+    promote: PROMOTE_BASE.replace('{id}', 'F7A2C477-5147-4973-A8C4-A4C26B64F9CD'),
+    loc: `${SHAREPOINT_BASE}dc-loc`
+  },
+  'graybox-cc': {
+    promote: PROMOTE_BASE.replace('{id}', 'F61F81F7-F112-40EA-968F-2FAF01C2938D'),
+    loc: `${SHAREPOINT_BASE}cc-loc`
+  },
+  'graybox-bacom': {
+    promote: PROMOTE_BASE.replace('{id}', 'BACF3853-3534-48AF-B252-2AAC17F0801D'),
+    loc: 'https://main--bacom-graybox--adobecom.hlx.page/tools/loc?milolibs=locui&ref=main&repo=bacom-graybox&owner=adobecom&host=business.adobe.com&project=BACOM&referrer=https%3A%2F%2Fadobe.sharepoint.com%2F%3Ax%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B5888e09b-93a3-4bc7-8f0f-d751da9f5a89%257D%26action%3Deditnew'
+  },
+  'graybox-feds': {
+    promote: PROMOTE_BASE.replace('{id}', 'A8238599-7245-462D-8863-BC37CACFAC32'),
+    loc: `${SHAREPOINT_BASE}feds-loc`
+  },
+  'da-bacom-graybox': {
+    promote: `${SHAREPOINT_BASE}da-bacom-promote`,
+    loc: `${SHAREPOINT_BASE}da-bacom-loc`
+  }
+};
+
 const HomePage = () => {
     const [isDarkMode, setIsDarkMode] = useState(false);
     const [activeMenu, setActiveMenu] = useState('MILOCORE');
@@ -48,34 +78,59 @@ const HomePage = () => {
             <Breadcrumb items={breadcrumbItems} isDarkMode={isDarkMode} activeMenu={activeMenu}/>
 
             <div className='container mx-auto pb-5 pt-4'>
-                {/* Cards */}
-                <div className='text-xl flex flex-row gap-6 m-3 flex-wrap'>
+                <div className='text-xl flex flex-row gap-6 m-3 flex-wrap justify-center'>
                     {menuData[activeMenu].map((directory, index) => (
-                        <div key={index} className="card w-80 bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200">
-                            <figure className="px-4 pt-4">
-                                <img src="dog.jpg" alt={`${index}`} className="rounded-xl" />
+                        <div key={index} 
+                             className={`card w-96 ${isDarkMode ? 'bg-gray-800' : 'bg-base-100'} 
+                                       shadow-xl hover:shadow-2xl transition-all duration-300 
+                                       transform hover:-translate-y-1`}>
+                            <figure className="px-6 pt-6">
+                                <img 
+                                    src="dog.jpg" 
+                                    alt={`${directory} preview`} 
+                                    className="rounded-xl h-48 w-full object-cover" 
+                                />
                             </figure>
-                            <div className="card-body items-center text-center">
-                                <h2 className={`card-title uppercase ${isDarkMode ? 'text-white' : 'text-black'}`}>
+                            <div className="card-body items-center text-center p-6">
+                                <h2 className={`card-title uppercase ${isDarkMode ? 'text-white' : 'text-black'} 
+                                             text-xl font-bold mb-2`}>
                                     {directory}
                                 </h2>
-                                <p className={`${isDarkMode ? 'text-white' : 'text-black'}`}>
-                                    screenshots under three resolutions
+                                <p className={`${isDarkMode ? 'text-gray-300' : 'text-gray-600'} text-sm mb-4`}>
+                                    Visual comparison and performance metrics
                                 </p>
-                                <div className="card-actions gap-2">
+                                <div className="card-actions flex flex-col w-full gap-2">
                                     <a 
-                                        className="btn btn-primary" 
+                                        className="btn btn-primary w-full" 
                                         href={`/imagediff/${directory}`}
                                     >
-                                        Check
+                                        Screenshot Diff
                                     </a>
                                     {directory.includes('graybox') && (
+                                        <>
                                         <a 
-                                            className="btn btn-secondary" 
+                                            className="btn btn-secondary w-full" 
                                             href={`/json-viewer/${directory}`}
                                         >
-                                            View JSON
+                                            Page Load Check
+                                        </a>
+                                        <a 
+                                            className="btn btn-info w-full" 
+                                            href={testResultsLinks[directory]?.promote}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            Promote Tests
+                                        </a>
+                                        <a 
+                                            className="btn btn-success w-full" 
+                                            href={testResultsLinks[directory]?.loc}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            Loc Tests
                                         </a>
+                                        </>
                                     )}
                                 </div>
                             </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,21 +1,19 @@
-
-// eslint-disable-next-line no-undef
-const daisyui = require('daisyui')
-
-export default {
+module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      colors: {
-        'custom-white': '#ffffff !important',
-        'custom-black': '#000000 !important',
-      },
-    },
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark"],
+    styled: true,
+    base: true,
+    utils: true,
+    logs: true,
+    rtl: false,
   },
-  plugins: [daisyui],
-  darkMode: 'class',
 }