From 99a94219f3718483c4ececbdb910eb0071d5328b Mon Sep 17 00:00:00 2001
From: Elliot Winkler <elliot.winkler@gmail.com>
Date: Thu, 16 Feb 2023 14:38:49 -0700
Subject: [PATCH] [TS dashboard] Be consistent with terminology (#17337)

There are two sides to the TypeScript dashboard code, the build scripts
and the app code. Currently we use the word "module" in the former but
"file" in the latter. Similarly, we use "partition" in the build code
but "level" in the app code. All of the logic that powers the
visualization you see on the dashboard is complicated enough, so there's
no reason to use duplicate terminology.
---
 .../app/components/App.tsx                    | 43 ++++++++++---------
 .../app/styles/custom-elements.scss           |  4 +-
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/development/ts-migration-dashboard/app/components/App.tsx b/development/ts-migration-dashboard/app/components/App.tsx
index 3a196f7ca..317856a1f 100644
--- a/development/ts-migration-dashboard/app/components/App.tsx
+++ b/development/ts-migration-dashboard/app/components/App.tsx
@@ -4,23 +4,24 @@ import { Tooltip as ReactTippy } from 'react-tippy';
 import { readPartitionsFile } from '../../common/partitions-file';
 
 type Summary = {
-  numConvertedFiles: number;
-  numFiles: number;
+  numConvertedModules: number;
+  numModules: number;
 };
 
 function calculatePercentageComplete(summary: Summary) {
-  return ((summary.numConvertedFiles / summary.numFiles) * 100).toFixed(1);
+  return ((summary.numConvertedModules / summary.numModules) * 100).toFixed(1);
 }
 
 export default function App() {
   const partitions = readPartitionsFile();
 
-  const allFiles = partitions.flatMap((partition) => {
+  const allModules = partitions.flatMap((partition) => {
     return partition.children;
   });
   const overallTotal = {
-    numConvertedFiles: allFiles.filter((file) => file.hasBeenConverted).length,
-    numFiles: allFiles.length,
+    numConvertedModules: allModules.filter((module) => module.hasBeenConverted)
+      .length,
+    numModules: allModules.length,
   };
 
   return (
@@ -35,7 +36,7 @@ export default function App() {
           '--progress': `${calculatePercentageComplete(overallTotal)}%`,
         }}
       >
-        OVERALL: {overallTotal.numConvertedFiles}/{overallTotal.numFiles} (
+        OVERALL: {overallTotal.numConvertedModules}/{overallTotal.numModules} (
         {calculatePercentageComplete(overallTotal)}%)
       </h2>
       <details className="help">
@@ -50,13 +51,13 @@ export default function App() {
 
           <p>
             Each box
-            <div className="file file--inline file--to-be-converted">
+            <div className="module module--inline module--to-be-converted">
               &nbsp;
             </div>
             on this page represents a file that either we want to convert or
             we've already converted to TypeScript (hover over a box to see the
             filename). Boxes that are
-            <div className="file file--inline file--to-be-converted file--test">
+            <div className="module module--inline module--to-be-converted module--test">
               &nbsp;
             </div>
             greyed out are test or Storybook files.
@@ -96,15 +97,17 @@ export default function App() {
           </p>
         </div>
       </details>
-      <div className="levels">
+      <div className="partitions">
         {partitions.map((partition) => {
           return (
-            <div key={partition.level} className="level">
-              <div className="level__name">level {partition.level}</div>
-              <div className="level__children">
+            <div key={partition.level} className="partition">
+              <div className="partition__name">level {partition.level}</div>
+              <div className="partition__children">
                 {partition.children.map(({ name, hasBeenConverted }) => {
                   const isTest = /\.test\.(?:js|tsx?)/u.test(name);
-                  const isStorybookFile = /\.stories\.(?:js|tsx?)/u.test(name);
+                  const isStorybookModule = /\.stories\.(?:js|tsx?)/u.test(
+                    name,
+                  );
                   return (
                     <ReactTippy
                       key={name}
@@ -112,15 +115,15 @@ export default function App() {
                       arrow={true}
                       animation="fade"
                       duration={250}
-                      className="file__tooltipped"
+                      className="module__tooltipped"
                       style={{ display: 'block' }}
                     >
                       <div
-                        className={classnames('file', {
-                          'file--has-been-converted': hasBeenConverted,
-                          'file--to-be-converted': !hasBeenConverted,
-                          'file--test': isTest,
-                          'file--storybook': isStorybookFile,
+                        className={classnames('module', {
+                          'module--has-been-converted': hasBeenConverted,
+                          'module--to-be-converted': !hasBeenConverted,
+                          'module--test': isTest,
+                          'module--storybook': isStorybookModule,
                         })}
                       />
                     </ReactTippy>
diff --git a/development/ts-migration-dashboard/app/styles/custom-elements.scss b/development/ts-migration-dashboard/app/styles/custom-elements.scss
index 985a423ab..216c1ed6d 100644
--- a/development/ts-migration-dashboard/app/styles/custom-elements.scss
+++ b/development/ts-migration-dashboard/app/styles/custom-elements.scss
@@ -69,7 +69,7 @@
   border: 1px solid rgb(0 0 0 / 50%);
 }
 
-.level {
+.partition {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
@@ -91,7 +91,7 @@
   }
 }
 
-.file {
+.module {
   width: 1.5rem;
   height: 1.5rem;
   border: 1px solid rgba(0 0 0 / 25%);