[MINT-2208] Homepage refactor (#1245)

* Changed file names, minor refactor

* Fixed route and models favorites props

* Remove feature flag

* Targeted first table in cypress

* Merge in main, resolved conflicts, move HomeTable

* Removed unneeded flag

* Updated snapshots

src/i18n/en-US/index.ts

@@ -53,7 +53,6 @@ import feedback from './feedback';
 import footer from './footer';
 import general from './general';
 import header from './header';
-import home from './home';
 import landing from './landing';
 import plan from './modelPlan';
 import modelPlanTaskList from './modelPlanTaskList';
@@ -77,7 +76,6 @@ const enUS = {
   getAccess,
   header,
   helpAndKnowledge,
-  home,
   homepageSettings,
   landing,
   plan,

src/types/flags.ts

@@ -5,7 +5,6 @@ export type Flags = {
   helpScoutEnabled: boolean;
   feedbackEnabled: boolean;
   notificationsEnabled: boolean;
-  customHomepageEnabled: boolean;
 };
 
 export type FlagsState = {

src/utils/export/CsvExportLink.tsx

@@ -11,7 +11,7 @@ type CsvExportLinkType = {
 export const CsvExportLink = ({
   modelPlanID
 }: CsvExportLinkType): React.ReactElement => {
-  const { t } = useTranslation('home');
+  const { t } = useTranslation('customHome');
 
   const { fetchSingleData, fetchAllData } = useFetchCSVData();
 

src/utils/user.test.ts

@@ -44,8 +44,7 @@ describe('user', () => {
             hideGroupView: true,
             helpScoutEnabled: false,
             feedbackEnabled: false,
-            notificationsEnabled: false,
-            customHomepageEnabled: false
+            notificationsEnabled: false
           })
         ).toBe(false);
       });

src/views/App/index.tsx

@@ -26,8 +26,7 @@ import FlagsWrapper from 'views/FlagsWrapper';
 import HelpAndKnowledge from 'views/HelpAndKnowledge';
 import GetAccess from 'views/HelpAndKnowledge/Articles/GetAccess';
 import Home from 'views/Home';
-import HomeNew from 'views/HomeNew';
-import HomePageSettings from 'views/HomeNew/Settings';
+import HomePageSettings from 'views/Home/Settings';
 import Landing from 'views/Landing';
 import Login from 'views/Login';
 import ModelAccessWrapper from 'views/ModelAccessWrapper';
@@ -117,18 +116,11 @@ const AppRoutes = () => {
           if (!authState?.isAuthenticated) {
             return <Landing />;
           }
-          if (flags.customHomepageEnabled) {
-            return <HomeNew />;
-          }
           return <Home />;
         }}
       />
 
-      <ProtectedRoute
-        path="/homepage-settings"
-        enabled={flags.customHomepageEnabled}
-        component={HomePageSettings}
-      />
+      <ProtectedRoute path="/homepage-settings" component={HomePageSettings} />
 
       <ProtectedRoute path="/notifications" component={Notifications} />
 

src/views/FlagsWrapper/index.tsx

@@ -42,8 +42,7 @@ const UserTargetingWrapper = ({ children }: WrapperProps) => {
             helpScoutEnabled: false,
             feedbackEnabled: false,
             downgradeNonCMS: false,
-            notificationsEnabled: false,
-            customHomepageEnabled: false
+            notificationsEnabled: false
           }
         });
 

src/views/ModelPlan/HomeTable/index.tsx → src/views/Home/Table/index.tsx

@@ -51,25 +51,15 @@ type CRTDLType =
   | GetCrtdLsQuery['modelPlan']['crs'][0]
   | GetCrtdLsQuery['modelPlan']['tdls'][0];
 
-type ModelPlansTableProps =
-  | {
-      id: string;
-      type: ViewCustomizationType;
-      updateFavorite?: never;
-      hiddenColumns?: number[]; // indexes of columns to be hidden
-      canSearch?: boolean;
-      isHome?: boolean;
-      isAssessment?: boolean;
-    }
-  | {
-      id: string;
-      type: ViewCustomizationType.FOLLOWED_MODELS;
-      updateFavorite: (modelPlanID: string, type: UpdateFavoriteProps) => void;
-      hiddenColumns?: number[]; // indexes of columns to be hidden
-      canSearch?: boolean;
-      isHome?: boolean;
-      isAssessment?: boolean;
-    };
+type ModelPlansTableProps = {
+  id: string;
+  type: ViewCustomizationType;
+  updateFavorite?: (modelPlanID: string, type: UpdateFavoriteProps) => void;
+  hiddenColumns?: number[]; // indexes of columns to be hidden
+  canSearch?: boolean;
+  isHome?: boolean;
+  isAssessment?: boolean;
+};
 
 const ModelPlansTable = ({
   id,
@@ -122,7 +112,10 @@ const ModelPlansTable = ({
 
     const tableColumns: Record<ViewCustomizationType, string[]> = {
       [ViewCustomizationType.MY_MODEL_PLANS]: [...homeColumns],
-      [ViewCustomizationType.ALL_MODEL_PLANS]: [...homeColumns],
+      [ViewCustomizationType.ALL_MODEL_PLANS]: [
+        ...(!isHome ? ['isFavorite'] : []),
+        ...homeColumns
+      ],
       [ViewCustomizationType.FOLLOWED_MODELS]: ['isFavorite', ...homeColumns],
       [ViewCustomizationType.MODELS_WITH_CR_TDL]: [
         'modelName',
@@ -337,8 +330,12 @@ const ModelPlansTable = ({
           if (value) {
             return value
               .map(characteristics => {
-                return i18next.t(
-                  `generalCharacteristics:keyCharacteristics.options.${characteristics}`
+                return (
+                  <div key={characteristics}>
+                    {i18next.t(
+                      `generalCharacteristics:keyCharacteristics.options.${characteristics}`
+                    )}
+                  </div>
                 );
               })
               .join(', ');
@@ -363,7 +360,7 @@ const ModelPlansTable = ({
           return (
             <ul className="margin-0">
               {value.map((crtdl: CRTDLType) => (
-                <li>{crtdl.idNumber}</li>
+                <li key={crtdl.idNumber}>{crtdl.idNumber}</li>
               ))}
             </ul>
           );
@@ -476,15 +473,9 @@ const ModelPlansTable = ({
   const modelsStyle = (index: number) => {
     return {
       minWidth:
-        (type === ViewCustomizationType.FOLLOWED_MODELS &&
-          index === 0 &&
-          '50px') ||
-        (type === ViewCustomizationType.FOLLOWED_MODELS &&
-          index === 2 &&
-          '100px') ||
-        (type === ViewCustomizationType.FOLLOWED_MODELS &&
-          index === 3 &&
-          '100px') ||
+        (!isHome && index === 0 && '50px') ||
+        (!isHome && index === 2 && '100px') ||
+        (!isHome && index === 3 && '100px') ||
         '138px',
       padding: index === 0 ? '0' : 'auto',
       paddingTop: index === 0 ? '0rem' : 'auto',
@@ -542,11 +533,7 @@ const ModelPlansTable = ({
                     aria-sort={getColumnSortStatus(column)}
                     className="table-header"
                     scope="col"
-                    style={
-                      type === ViewCustomizationType.FOLLOWED_MODELS
-                        ? modelsStyle(index)
-                        : homeStyle(index)
-                    }
+                    style={!isHome ? modelsStyle(index) : homeStyle(index)}
                   >
                     <button
                       className={classNames(
@@ -649,7 +636,7 @@ const ModelPlansTable = ({
 };
 
 const RenderFilteredNameHistory = ({ names }: { names: string[] }) => {
-  const { t } = useTranslation('home');
+  const { t } = useTranslation('customHome');
   const [isShowingAllNames, setShowAllNames] = useState(false);
 
   const firstThreeNames = names.slice(0, 3);

src/views/HomeNew/__snapshots__/index.test.tsx.snap → src/views/Home/__snapshots__/index.test.tsx.snap

@@ -137,11 +137,9 @@ exports[`The home page > matches setting snapshot 1`] = `
                 >
                   Did you know you can customize this page?
                 </p>
-                <div
-                  class="row-reverse"
-                >
+                <div>
                   <a
-                    class="display-flex flex-align-center usa-button--unstyled"
+                    class="display-flex flex-align-center"
                     href="/homepage-settings"
                   >
                     <svg

src/views/HomeNew/components/ModelsBySolutions/banner.tsx → src/views/Home/components/ModelsBySolutions/banner.tsx

@@ -6,7 +6,7 @@ import { ModelBySolutionStatus, OperationalSolutionKey } from 'gql/gen/graphql';
 
 import useCheckResponsiveScreen from 'hooks/useCheckMobile';
 import { helpSolutions } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
-import { ModelsBySolutionType } from 'views/HomeNew/components/ModelsBySolutions/table';
+import { ModelsBySolutionType } from 'views/Home/components/ModelsBySolutions/table';
 
 import './index.scss';
 

src/views/HomeNew/components/ModelsBySolutions/index.tsx → src/views/Home/components/ModelsBySolutions/index.tsx

@@ -11,7 +11,7 @@ import {
   HelpSolutionBaseType,
   helpSolutions
 } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
-import ModelsBySolutionTable from 'views/HomeNew/components/ModelsBySolutions/table';
+import ModelsBySolutionTable from 'views/Home/components/ModelsBySolutions/table';
 
 import './index.scss';
 

src/views/HomeNew/components/ModelsBySolutions/table.tsx → src/views/Home/components/ModelsBySolutions/table.tsx

@@ -21,7 +21,7 @@ import { TranslationBasics } from 'types/translation';
 import { formatDateUtc } from 'utils/date';
 import ModelsBySolutionsBanner, {
   StatusCategories
-} from 'views/HomeNew/components/ModelsBySolutions/banner';
+} from 'views/Home/components/ModelsBySolutions/banner';
 
 import ModelSolutionCard from './card';
 

src/views/Home/index.scss

@@ -1,7 +1,16 @@
 @use 'uswds-core' as *;
 
 .home {
-  &__hr {
-    border-top: 1px solid color('base-light');
-  }
+    &__card {
+        flex-direction: row-reverse;
+
+        .usa-card__container {
+            padding: 1rem;
+            border-radius: .25rem;
+            border: 2px solid color('base-lighter');    
+            box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
+            height: auto !important;
+            margin: 0 !important;
+        }
+    }
 }