Rename newHome to wecomePage (#5283)

* Rename to welcomePage

* add changeset

* Restore index.ts files

* Apply CR fixes

.changeset/eleven-beans-attend.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Rename newHome to wecomePage to allow seamlessly removing a feature flag

src/components/DevModePanel/DevModePanel.tsx

@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { DashboardModal } from "@dashboard/components/Modal";
-import { useOnboarding } from "@dashboard/newHome/homeOnboarding/onboardingContext";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { createGraphiQLFetcher, FetcherOpts, FetcherParams } from "@graphiql/toolkit";
 import { createFetch } from "@saleor/sdk";
 import React from "react";

src/custom-apps/views/CustomAppList.tsx

@@ -14,9 +14,9 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import { sectionNames } from "@dashboard/intl";
 import { findById } from "@dashboard/misc";
-import { useOnboarding } from "@dashboard/newHome/homeOnboarding/onboardingContext";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 

src/graphql/types.generated.ts

@@ -10745,36 +10745,6 @@ export type MenuDetailsQueryVariables = Exact<{
 
 export type MenuDetailsQuery = { __typename: 'Query', menu: { __typename: 'Menu', id: string, name: string, items: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null } | null };
 
-export type UpdateUserMetadataMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: Array<MetadataInput> | MetadataInput;
-}>;
-
-
-export type UpdateUserMetadataMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
-
-export type WelcomePageActivitiesQueryVariables = Exact<{
-  hasPermissionToManageOrders: Scalars['Boolean'];
-}>;
-
-
-export type WelcomePageActivitiesQuery = { __typename: 'Query', activities: { __typename: 'OrderEventCountableConnection', edges: Array<{ __typename: 'OrderEventCountableEdge', node: { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null } }> } | null };
-
-export type WelcomePageAnalyticsQueryVariables = Exact<{
-  channel: Scalars['String'];
-  hasPermissionToManageOrders: Scalars['Boolean'];
-}>;
-
-
-export type WelcomePageAnalyticsQuery = { __typename: 'Query', salesToday: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } | null };
-
-export type WelcomePageNotificationsQueryVariables = Exact<{
-  channel: Scalars['String'];
-}>;
-
-
-export type WelcomePageNotificationsQuery = { __typename: 'Query', productsOutOfStock: { __typename: 'ProductCountableConnection', totalCount: number | null } | null };
-
 export type OrderCancelMutationVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -12657,3 +12627,33 @@ export type WarehousesCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type WarehousesCountQuery = { __typename: 'Query', warehouses: { __typename: 'WarehouseCountableConnection', totalCount: number | null } | null };
+
+export type SaveOnBoardingStateMutationVariables = Exact<{
+  id: Scalars['ID'];
+  input: Array<MetadataInput> | MetadataInput;
+}>;
+
+
+export type SaveOnBoardingStateMutation = { __typename: 'Mutation', updateMetadata: { __typename: 'UpdateMetadata', errors: Array<{ __typename: 'MetadataError', code: MetadataErrorCode, field: string | null, message: string | null }> } | null };
+
+export type WelcomePageActivitiesQueryVariables = Exact<{
+  hasPermissionToManageOrders: Scalars['Boolean'];
+}>;
+
+
+export type WelcomePageActivitiesQuery = { __typename: 'Query', activities: { __typename: 'OrderEventCountableConnection', edges: Array<{ __typename: 'OrderEventCountableEdge', node: { __typename: 'OrderEvent', date: any | null, email: string | null, message: string | null, orderNumber: string | null, type: OrderEventsEnum | null, user: { __typename: 'User', email: string } | null } }> } | null };
+
+export type WelcomePageAnalyticsQueryVariables = Exact<{
+  channel: Scalars['String'];
+  hasPermissionToManageOrders: Scalars['Boolean'];
+}>;
+
+
+export type WelcomePageAnalyticsQuery = { __typename: 'Query', salesToday: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } | null };
+
+export type WelcomePageNotificationsQueryVariables = Exact<{
+  channel: Scalars['String'];
+}>;
+
+
+export type WelcomePageNotificationsQuery = { __typename: 'Query', productsOutOfStock: { __typename: 'ProductCountableConnection', totalCount: number | null } | null };

src/index.tsx

@@ -8,6 +8,7 @@ import { useFlag } from "@dashboard/featureFlags";
 import { PermissionEnum } from "@dashboard/graphql";
 import useAppState from "@dashboard/hooks/useAppState";
 import { ThemeProvider } from "@dashboard/theme";
+import { OnboardingProvider } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
 import { SaleorProvider } from "@saleor/sdk";
 import React from "react";
@@ -62,8 +63,6 @@ import { useLocationState } from "./hooks/useLocationState";
 import { commonMessages } from "./intl";
 import NavigationSection from "./navigation";
 import { navigationSection } from "./navigation/urls";
-import { HomePage } from "./newHome";
-import { OnboardingProvider } from "./newHome/homeOnboarding/onboardingContext/OnboardingContext";
 import { NotFound } from "./NotFound";
 import OrdersSection from "./orders";
 import PageSection from "./pages";
@@ -81,6 +80,7 @@ import { paletteOverrides, themeOverrides } from "./themeOverrides";
 import TranslationsSection from "./translations";
 import WarehouseSection from "./warehouses";
 import { warehouseSection } from "./warehouses/urls";
+import { WelcomePage } from "./welcomePage";
 
 if (GTM_ID) {
   TagManager.initialize({ gtmId: GTM_ID });
@@ -159,7 +159,7 @@ const Routes: React.FC = () => {
   const homePageLoading = (authenticated && !channelLoaded) || authenticating;
   const { isAppPath } = useLocationState();
   const { enabled: isNewHomePageEnabled } = useFlag("new_home_page");
-  const HomePageComponent = isNewHomePageEnabled ? HomePage : OldHomePage;
+  const HomePageComponent = isNewHomePageEnabled ? WelcomePage : OldHomePage;
 
   return (
     <>

src/orders/views/OrderList/OrderList.tsx

@@ -17,12 +17,12 @@ import usePaginator, {
   createPaginationState,
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
-import { useOnboarding } from "@dashboard/newHome/homeOnboarding/onboardingContext";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 

src/products/views/ProductCreate/ProductCreate.tsx

@@ -23,7 +23,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import useShop from "@dashboard/hooks/useShop";
 import { getMutationErrors } from "@dashboard/misc";
-import { useOnboarding } from "@dashboard/newHome/homeOnboarding/onboardingContext";
 import ProductCreatePage, {
   ProductCreateData,
 } from "@dashboard/products/components/ProductCreatePage";
@@ -46,6 +45,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createMetadataCreateHandler from "@dashboard/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { warehouseAddPath } from "@dashboard/warehouses/urls";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 

src/staff/views/StaffList/StaffList.tsx

@@ -14,7 +14,6 @@ import usePaginator, {
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
 import { commonMessages } from "@dashboard/intl";
-import { useOnboarding } from "@dashboard/newHome/homeOnboarding/onboardingContext";
 import usePermissionGroupSearch from "@dashboard/searches/usePermissionGroupSearch";
 import { ListViews } from "@dashboard/types";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
@@ -23,6 +22,7 @@ import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
+import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import React from "react";
 import { useIntl } from "react-intl";
 import urlJoin from "url-join";

src/newHome/HomePage.tsx → src/welcomePage/WelcomePage.tsx

@@ -6,12 +6,12 @@ import { PermissionEnum } from "@dashboard/graphql";
 import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 
-import { HomeTilesContainer } from "./homeInfoTiles/TilesContainer";
-import HomeOnboarding from "./homeOnboarding/HomeOnboarding";
-import { HomeSidebar } from "./HomeSidebar";
-import { HomeTitle } from "./HomeTitle";
+import { WelcomePageOnboarding } from "./WelcomePageOnboarding";
+import { WelcomePageSidebar } from "./WelcomePageSidebar";
+import { WelcomePageTilesContainer } from "./WelcomePageTilesContainer";
+import { WelcomePageTitle } from "./WelcomePageTitle";
 
-export const HomePage = () => {
+export const WelcomePage = () => {
   const { channel, setChannel } = useAppChannel(false);
   const { user } = useUser();
   const channels = user?.accessibleChannels ?? [];
@@ -24,12 +24,12 @@ export const HomePage = () => {
     <DetailPageLayout withSavebar={false}>
       <Box gridColumn="8" gridRowStart="1" />
       <DetailPageLayout.Content paddingTop={6} paddingLeft={8}>
-        <HomeTitle />
-        <HomeOnboarding />
-        <HomeTilesContainer />
+        <WelcomePageTitle />
+        <WelcomePageOnboarding />
+        <WelcomePageTilesContainer />
       </DetailPageLayout.Content>
       <DetailPageLayout.RightSidebar borderLeftStyle="none">
-        <HomeSidebar
+        <WelcomePageSidebar
           channel={channel}
           setChannel={setChannel}
           channels={channels}

src/newHome/homeOnboarding/HomeOnboarding.tsx → src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx

@@ -1,10 +1,10 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import { TOTAL_STEPS_COUNT } from "@dashboard/newHome/homeOnboarding/onboardingContext/initialOnboardingState";
+import { TOTAL_STEPS_COUNT } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext/initialOnboardingState";
 import { Accordion, Box, Button, ChervonDownIcon, Text } from "@saleor/macaw-ui-next";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { HomeOnboardingAccordion } from "./HomeOnboardingAccordion";
+import { WelcomePageOnboardingAccordion } from "./components/WelcomePageOnboardingAccordion";
 import { useOnboarding } from "./onboardingContext/OnboardingContext";
 
 type TitleProps = {
@@ -15,7 +15,7 @@ type TitleProps = {
   };
 };
 
-const HomeOnboarding = () => {
+export const WelcomePageOnboarding = () => {
   const { markAllAsCompleted, isOnboardingCompleted, toggleOnboarding, onboardingState } =
     useOnboarding();
 
@@ -73,7 +73,7 @@ const HomeOnboarding = () => {
 
           <Accordion.Content>
             <DashboardCard.Content padding={6} paddingTop={0}>
-              <HomeOnboardingAccordion />
+              <WelcomePageOnboardingAccordion />
             </DashboardCard.Content>
           </Accordion.Content>
         </Accordion.Item>
@@ -82,7 +82,7 @@ const HomeOnboarding = () => {
   );
 };
 
-const Title: React.FC<TitleProps> = ({ isOnboardingCompleted, status }) => {
+const Title = ({ isOnboardingCompleted, status }: TitleProps) => {
   if (isOnboardingCompleted) {
     return (
       <Text size={7}>
@@ -109,5 +109,3 @@ const Title: React.FC<TitleProps> = ({ isOnboardingCompleted, status }) => {
     </Text>
   );
 };
-
-export default HomeOnboarding;

src/newHome/homeOnboarding/HomeCheckGraphQLButton.tsx → src/welcomePage/WelcomePageOnboarding/components/WelcomePageCheckGraphQLButton.tsx

@@ -3,7 +3,7 @@ import { Button } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-export const HomeCheckGraphQLButton = () => {
+export const WelcomePageCheckGraphQLButton = () => {
   const context = useDevModeContext();
 
   return (

src/newHome/homeOnboarding/HomeCreateProductButton.tsx → src/welcomePage/WelcomePageOnboarding/components/WelcomePageCreateProductButton.tsx

@@ -7,9 +7,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
-import { HomeFakeDisabledButton } from "./HomeFakeDisabledButton";
+import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
 
-export const HomeCreateProductButton = () => {
+export const WelcomePageCreateProductButton = () => {
   const { user } = useUser();
   const userPermissions = user?.userPermissions || [];
   const hasPermissionToManageProducts = hasPermissions(userPermissions, [
@@ -20,13 +20,13 @@ export const HomeCreateProductButton = () => {
     return (
       <Tooltip>
         <Tooltip.Trigger>
-          <HomeFakeDisabledButton>
+          <WelcomePageFakeDisabledButton>
             <FormattedMessage
               defaultMessage="Go to all products"
               id="XZpRr8"
               description="btn label"
             />
-          </HomeFakeDisabledButton>
+          </WelcomePageFakeDisabledButton>
         </Tooltip.Trigger>
         <Tooltip.Content>
           <Tooltip.Arrow />

src/newHome/homeOnboarding/HomeFakeDisabledButton.tsx → src/welcomePage/WelcomePageOnboarding/components/WelcomePageFakeDisabledButton.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonProps, vars } from "@saleor/macaw-ui-next";
 import React from "react";
 
-export const HomeFakeDisabledButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const WelcomePageFakeDisabledButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
 
@@ -30,4 +30,4 @@ export const HomeFakeDisabledButton = React.forwardRef<HTMLButtonElement, Button
   },
 );
 
-HomeFakeDisabledButton.displayName = "HomeFakeDisabledButton";
+WelcomePageFakeDisabledButton.displayName = "WelcomePageFakeDisabledButton";

src/newHome/homeOnboarding/HomeInviteStaffButton.tsx → src/welcomePage/WelcomePageOnboarding/components/WelcomePageInviteStaffButton.tsx

@@ -7,9 +7,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
-import { HomeFakeDisabledButton } from "./HomeFakeDisabledButton";
+import { WelcomePageFakeDisabledButton } from "./WelcomePageFakeDisabledButton";
 
-export const HomeInviteStaffButton = () => {
+export const WelcomePageInviteStaffButton = () => {
   const { user } = useUser();
   const userPermissions = user?.userPermissions || [];
   const hasPermissionToManageStaff = hasPermissions(userPermissions, [PermissionEnum.MANAGE_STAFF]);
@@ -18,9 +18,9 @@ export const HomeInviteStaffButton = () => {
     return (
       <Tooltip>
         <Tooltip.Trigger>
-          <HomeFakeDisabledButton variant="primary">
+          <WelcomePageFakeDisabledButton variant="primary">
             <FormattedMessage defaultMessage="Invite members" id="BBt3jD" description="btn label" />
-          </HomeFakeDisabledButton>
+          </WelcomePageFakeDisabledButton>
         </Tooltip.Trigger>
         <Tooltip.Content>
           <Tooltip.Arrow />