Allow pr-deploy-site to operate with scoped builds (microsoft#14549)

* all pr-deploy-site to operate with partial builds * turn off progress plugin if in TF_BUILD & storybook! * typo! * Update pr-deploy-site.js
levithomason · Aug 24, 2020 · 8f78cf1 · 8f78cf1
1 parent fe62e38
commit 8f78cf1
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 178 deletions.
diff --git a/apps/pr-deploy-site/index.html b/apps/pr-deploy-site/index.html
@@ -7,169 +7,22 @@
       rel="stylesheet"
       href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css"
     />
-    <style>
-      html {
-        box-sizing: border-box;
-      }
-
-      *,
-      *:before,
-      *:after {
-        box-sizing: inherit;
-      }
-
-      body {
-        align-items: center;
-        background-color: #f3f2f1;
-        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+);
-        background-position: 50% 50%;
-        background-repeat: no-repeat;
-        background-size: 900px 740px;
-        display: flex;
-        height: 100vh;
-        justify-content: center;
-        padding: 20px;
-      }
-
-      .Tiles {
-        display: flex;
-        flex-wrap: wrap;
-        list-style-type: none;
-        margin: 0;
-        max-width: 800px;
-        padding: 0;
-      }
-
-      .Tile {
-        background-color: white;
-        border-radius: 2px;
-        box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
-        margin: 0 12px 12px 0;
-        opacity: 0.96;
-        transition: all 0.15s linear;
-      }
-
-      .Tile:not(.Tile--intro):hover {
-        box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-        opacity: 1;
-      }
-
-      .Tile-link {
-        align-items: center;
-        color: #323130;
-        display: flex;
-        flex-direction: column;
-        height: 148px;
-        justify-content: center;
-        padding: 20px;
-        text-decoration: none;
-        width: 148px;
-      }
-
-      .Tile-link i {
-        font-size: 32px;
-        margin-bottom: 12px;
-        color: #605e5c;
-      }
-
-      .Tile--intro {
-        max-width: 468px;
-        padding: 20px;
-        width: 100%;
-      }
-
-      .Tile--intro h1 {
-        font-size: 24px;
-        font-weight: 300;
-        margin: 8px 0;
-        padding: 0;
-      }
-
-      .Tile--intro p {
-        font-size: 14px;
-        margin: 0;
-      }
-
-      .Tile--intro a,
-      .Tile--intro a:visited {
-        color: #0078d4;
-      }
-    </style>
+    <link rel="stylesheet" href="./pr-deploy-site.css" />
   </head>
 
   <body class="ms-Fabric">
-    <ul class="Tiles">
+    <ul class="Tiles" id="site-list">
       <li class="Tile Tile--intro">
         <h1>Deployed sites for PR <a href="#" class="prLink"></a></h1>
         <p>
           Use these test apps to verify that the changes introduced by the pull request work as intended and do not
           introduce any new issues.
         </p>
       </li>
-      <li class="Tile">
-        <a href="./fabric-website-resources/dist/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--FavoriteStar"></i>Demo Site</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./office-ui-fabric-react/dist-storybook/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--FavoriteStar"></i>Fabric Storybook Site</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./fabric-website/dist/index.html?devhost" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--Website"></i>Website</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./react-northstar" class="Tile-link"><i class="ms-Icon ms-Icon--FavoriteStar"></i>react-northstar</a>
-      </li>
-      <li class="Tile">
-        <a href="./react-button/dist-storybook/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--LikeSolid"></i>Button</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./react-tabs/dist-storybook/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--BrowserTab"></i>Tabs</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./react-next/dist-storybook/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--DoubleChevronRight12"></i>Next</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./experiments/dist/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--TestBeaker"></i>Experiments</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./charting/dist/index.html" class="Tile-link"><i class="ms-Icon ms-Icon--BarChart4"></i>Charting</a>
-      </li>
-      <li class="Tile">
-        <a href="./date-time/dist/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--PrimaryCalendar"></i>Date/Time</a
-        >
-      </li>
-      <!--
-        TODO: temporarily disabling this for now until a new pipeline is created for PR Deploy Site builds
-      <li class="Tile">
-        <a href="./test-bundles/test-bundles.stats.html" class="Tile-link"><i class="ms-Icon ms-Icon--SpeedHigh"></i>Bundle Analyzer</a>
-      </li>
-      -->
-      <li class="Tile">
-        <a href="./todo-app/index.html" class="Tile-link"><i class="ms-Icon ms-Icon--CheckMark"></i>Todo Example</a>
-      </li>
-      <li class="Tile">
-        <a href="./theming-designer/index.html" class="Tile-link"
-          ><i class="ms-Icon ms-Icon--CheckMark"></i>Theme Designer Example</a
-        >
-      </li>
-      <li class="Tile">
-        <a href="./perf-test/index.html" class="Tile-link"><i class="ms-Icon ms-Icon--SpeedHigh"></i>Perf Tests</a>
-      </li>
     </ul>
+
+    <script src="./pr-deploy-site.js"></script>
+
     <script>
       const pathParts = window.location.href.split('/');
       const pullRequestIndex = pathParts.indexOf('pull') + 1;
@@ -181,5 +34,9 @@ <h1>Deployed sites for PR <a href="#" class="prLink"></a></h1>
         link.href = `https://github.com/microsoft/fluentui/pull/${number}`;
       }
     </script>
+
+    <script>
+      renderSiteLinks(/* insert packages here */);
+    </script>
   </body>
 </html>
diff --git a/apps/pr-deploy-site/just.config.ts b/apps/pr-deploy-site/just.config.ts
@@ -1,14 +1,39 @@
 import fs from 'fs';
 import path from 'path';
 import { preset, just } from '@uifabric/build';
-import { findRepoDeps, findGitRoot } from '@uifabric/build/monorepo/index';
+import { findGitRoot, getAllPackageInfo } from '@uifabric/build/monorepo/index';
 
-const { task, copyInstructionsTask, copyInstructions } = just;
+const { series, task, copyInstructionsTask, copyInstructions } = just;
 
 const gitRoot = findGitRoot();
-let instructions = copyInstructions.copyFilesToDestinationDirectory(['index.html', 'chiclet-test.html'], 'dist');
+let instructions = copyInstructions.copyFilesToDestinationDirectory(
+  ['pr-deploy-site.js', 'pr-deploy-site.css', 'chiclet-test.html'],
+  'dist',
+);
 
-const repoDeps = findRepoDeps();
+// If you are adding a new tile into this site, please make sure it is also listed in the siteInfo of
+// `pr-deploy-site.js`
+//
+// Dependencies are listed here and NOT in package.json because we do not want to allow for partial builds for scoping
+const dependencies = [
+  '@fluentui/docs',
+  '@fluentui/react-button',
+  '@fluentui/react-next',
+  '@fluentui/react-tabs',
+  '@uifabric/charting',
+  '@uifabric/date-time',
+  '@uifabric/experiments',
+  '@uifabric/fabric-website',
+  '@uifabric/fabric-website-resources',
+  'office-ui-fabric-react',
+  'perf-test',
+  'theming-designer',
+  'todo-app',
+];
+
+const allPackages = getAllPackageInfo();
+const repoDeps = dependencies.map(dep => allPackages[dep]);
+const deployedPackages = new Set<string>();
 repoDeps.forEach(dep => {
   const distPath = path.join(gitRoot, dep.packagePath, 'dist');
 
@@ -24,12 +49,15 @@ repoDeps.forEach(dep => {
           path.join('dist', path.basename(dep.packagePath)),
         ),
       );
+      deployedPackages.add(dep.packageJson.name);
     } else if (dep.packageJson.name === '@fluentui/docs') {
       instructions.push(...copyInstructions.copyFilesInDirectory(sourcePath, path.join('dist', 'react-northstar')));
+      deployedPackages.add(dep.packageJson.name);
     } else {
       instructions.push(
         ...copyInstructions.copyFilesInDirectory(sourcePath, path.join('dist', path.basename(dep.packagePath))),
       );
+      deployedPackages.add(dep.packageJson.name);
     }
   }
 
@@ -43,9 +71,24 @@ repoDeps.forEach(dep => {
         path.join('dist', path.basename(dep.packagePath)),
       ),
     );
+    deployedPackages.add(dep.packageJson.name);
   }
 });
 
 preset();
 
-task('bundle', copyInstructionsTask({ copyInstructions: instructions }));
+/**
+ * Renders a site with tiles that are potentially from a partial set of deployed packages
+ */
+task('generate:index', () => {
+  const indexContent = fs.readFileSync(path.join(__dirname, './index.html'), 'utf-8');
+  fs.writeFileSync(
+    path.join('dist', 'index.html'),
+    indexContent.replace('/* insert packages here */', JSON.stringify([...deployedPackages])),
+  );
+});
+
+/**
+ * Copies all the built (potentially partially) dist files and then generates a index HTML for it
+ */
+task('generate:site', series(copyInstructionsTask({ copyInstructions: instructions }), 'generate:index'));
diff --git a/apps/pr-deploy-site/package.json b/apps/pr-deploy-site/package.json
@@ -5,27 +5,10 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
-    "test": "just-scripts test",
+    "generate:site": "just-scripts generate:site",
     "just": "just-scripts"
   },
   "license": "MIT",
-  "dependencies": {
-    "@fluentui/docs": "^0.51.0",
-    "@fluentui/react-button": "^0.9.3",
-    "@fluentui/react-next": "^8.0.0-alpha.86",
-    "@fluentui/react-tabs": "^0.2.13",
-    "@uifabric/charting": "^3.0.9",
-    "@uifabric/date-time": "^7.14.3",
-    "@uifabric/experiments": "^7.28.2",
-    "@uifabric/fabric-website": "^7.13.24",
-    "@uifabric/fabric-website-resources": "^7.6.121",
-    "office-ui-fabric-react": "^7.128.1",
-    "perf-test": "^7.0.0",
-    "theming-designer": "^7.0.0",
-    "todo-app": "^7.0.0"
-  },
   "devDependencies": {
     "@uifabric/build": "^7.0.0"
   }

diff --git a/apps/pr-deploy-site/pr-deploy-site.css b/apps/pr-deploy-site/pr-deploy-site.css
@@ -0,0 +1,86 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  align-items: center;
+  background-color: #f3f2f1;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 900px 740px;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  padding: 20px;
+}
+
+.Tiles {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  margin: 0;
+  max-width: 800px;
+  padding: 0;
+}
+
+.Tile {
+  background-color: white;
+  border-radius: 2px;
+  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+  margin: 0 12px 12px 0;
+  opacity: 0.96;
+  transition: all 0.15s linear;
+}
+
+.Tile:not(.Tile--intro):hover {
+  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+  opacity: 1;
+}
+
+.Tile-link {
+  align-items: center;
+  color: #323130;
+  display: flex;
+  flex-direction: column;
+  height: 148px;
+  justify-content: center;
+  padding: 20px;
+  text-decoration: none;
+  width: 148px;
+}
+
+.Tile-link i {
+  font-size: 32px;
+  margin-bottom: 12px;
+  color: #605e5c;
+}
+
+.Tile--intro {
+  max-width: 468px;
+  padding: 20px;
+  width: 100%;
+}
+
+.Tile--intro h1 {
+  font-size: 24px;
+  font-weight: 300;
+  margin: 8px 0;
+  padding: 0;
+}
+
+.Tile--intro p {
+  font-size: 14px;
+  margin: 0;
+}
+
+.Tile--intro a,
+.Tile--intro a:visited {
+  color: #0078d4;
+}