chore: copy change from report to story

src/app/Routes.tsx

@@ -53,7 +53,7 @@ const EmbedChartModule = lazy(
 );
 
 const ChartModule = lazy(() => import("app/modules/chart-module"));
-const ReportModule = lazy(() => import("app/modules/report-module"));
+const StoryModule = lazy(() => import("app/modules/story-module"));
 
 const AuthCallbackModule = lazy(() => import("app/modules/callback-module"));
 const OnboardingModule = lazy(() => import("app/modules/onboarding-module"));
@@ -268,9 +268,9 @@ export function MainRoutes() {
               <DashboardModule />
             </AuthProtectedRoute>
           </RouteWithAppBar>
-          <RouteWithAppBar exact path="/report/:page/:view?">
+          <RouteWithAppBar exact path="/story/:page/:view?">
             <AuthProtectedRoute>
-              <ReportModule />
+              <StoryModule />
             </AuthProtectedRoute>
           </RouteWithAppBar>
           <RouteWithAppBar exact path="/dataset/:page/:view?">

src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx

@@ -21,7 +21,7 @@ export default function ChartContainer(props: {
   setChartErrorMessage: React.Dispatch<React.SetStateAction<string>>;
   renderedChartType?: ChartType;
   inChartWrapper?: boolean;
-  chartPreviewInReport?: boolean;
+  chartPreviewInStory?: boolean;
   mapping?: any;
   datasetDetails?: DatasetListItemAPIModel;
   setNotFound: React.Dispatch<React.SetStateAction<boolean>>;

src/app/components/Dialogs/EmbedChartDialog/index.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import CloseOutlined from "@material-ui/icons/ClearOutlined";
 import Modal from "@material-ui/core/Modal";
 import { useStyles } from "app/components/Dialogs/deleteChartDialog";
-import { useRenderChartFromAPI } from "app/modules/report-module/components/chart-wrapper/useRenderChartFromAPI";
+import { useRenderChartFromAPI } from "app/modules/story-module/components/chart-wrapper/useRenderChartFromAPI";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
 import get from "lodash/get";
-import { useLoadDatasetDetails } from "app/modules/report-module/components/chart-wrapper/useLoadDatasetDetailsAPI";
+import { useLoadDatasetDetails } from "app/modules/story-module/components/chart-wrapper/useLoadDatasetDetailsAPI";
 import ChartContainer from "./chartContainer";
 import { copyToClipboard } from "app/utils/copyToClipboard";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";

src/app/components/Dialogs/TourGuide/index.tsx

@@ -4,37 +4,37 @@ import RowFrameIntro from "app/components/Dialogs/TourGuide/rowFrameIntro";
 import SelectStructure from "./selectStructure";
 import TourEnd from "./tourEnd";
 import { useRecoilState } from "recoil";
-import { reportCreationTourStepAtom } from "app/state/recoil/atoms";
+import { storyCreationTourStepAtom } from "app/state/recoil/atoms";
 import useCookie from "@devhammed/use-cookie";
 
 export default function TourGuide(props: {
-  reportType: "basic" | "advanced" | "ai";
+  storyType: "basic" | "advanced" | "ai";
   toolBoxOpen: boolean;
   handleClose: () => void;
   open: boolean;
 }) {
-  const [reportCreationTourStep, setReportCreationTourStep] = useRecoilState(
-    reportCreationTourStepAtom
+  const [storyCreationTourStep, setStoryCreationTourStep] = useRecoilState(
+    storyCreationTourStepAtom
   );
 
-  const displayBasicReportTourStep = () => {
-    switch (reportCreationTourStep) {
+  const displayBasicStoryTourStep = () => {
+    switch (storyCreationTourStep) {
       case 0:
         return (
           <TourStart
-            setStep={setReportCreationTourStep}
+            setStep={setStoryCreationTourStep}
             open={props.open}
             handleClose={props.handleClose}
           />
         );
       case 1:
         return (
           <RowFrameIntro
-            setStep={setReportCreationTourStep}
+            setStep={setStoryCreationTourStep}
             handleClose={props.handleClose}
             open={props.open}
             toolBoxOpen={props.toolBoxOpen}
-            reportType={props.reportType}
+            storyType={props.storyType}
           />
         );
       case 2:
@@ -50,40 +50,40 @@ export default function TourGuide(props: {
           <TourEnd
             handleClose={props.handleClose}
             open={props.open}
-            reportType={props.reportType}
+            storyType={props.storyType}
             toolBoxOpen={props.toolBoxOpen}
           />
         );
       default:
         return;
     }
   };
-  const displayAdvancedReportTourStep = () => {
-    switch (reportCreationTourStep) {
+  const displayAdvancedStoryTourStep = () => {
+    switch (storyCreationTourStep) {
       case 0:
         return (
           <TourStart
-            setStep={setReportCreationTourStep}
+            setStep={setStoryCreationTourStep}
             open={props.open}
             handleClose={props.handleClose}
           />
         );
       case 1:
         return (
           <RowFrameIntro
-            setStep={setReportCreationTourStep}
+            setStep={setStoryCreationTourStep}
             handleClose={props.handleClose}
             open={props.open}
             toolBoxOpen={props.toolBoxOpen}
-            reportType={props.reportType}
+            storyType={props.storyType}
           />
         );
       case 2:
         return (
           <TourEnd
             handleClose={props.handleClose}
             open={props.open}
-            reportType={props.reportType}
+            storyType={props.storyType}
             toolBoxOpen={props.toolBoxOpen}
           />
         );
@@ -95,8 +95,8 @@ export default function TourGuide(props: {
 
   return (
     <>
-      {props.reportType === "basic" && displayBasicReportTourStep()}
-      {props.reportType === "advanced" && displayAdvancedReportTourStep()}
+      {props.storyType === "basic" && displayBasicStoryTourStep()}
+      {props.storyType === "advanced" && displayAdvancedStoryTourStep()}
     </>
   );
 }

src/app/components/Dialogs/TourGuide/rowFrameIntro.tsx

@@ -7,16 +7,16 @@ export default function RowFrameIntro(props: {
   setStep: SetterOrUpdater<number>;
   handleClose: () => void;
   open: boolean;
-  reportType: "basic" | "advanced" | "ai";
+  storyType: "basic" | "advanced" | "ai";
   toolBoxOpen: boolean;
 }) {
   return (
     <div
       css={`
         position: absolute;
-        ${props.reportType === "basic" &&
+        ${props.storyType === "basic" &&
         `top: 13rem; left: ${props.toolBoxOpen ? "0.5%" : "10%"}; `}
-        ${props.reportType === "advanced" && "top: 11.7rem; left: -5%;"} 
+        ${props.storyType === "advanced" && "top: 11.7rem; left: -5%;"} 
         transition: left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
         display: ${props.open ? "block" : "none"};
@@ -75,7 +75,7 @@ export default function RowFrameIntro(props: {
         </IconButton>
         <p>
           <b>
-            The reports in Dx are created by rows. Whenever you want to add
+            The stories in Dx are created by rows. Whenever you want to add
             chart or text, you need to use the Row frame element and Select a
             structure for the row.
           </b>

src/app/components/Dialogs/TourGuide/tourEnd.tsx

@@ -5,22 +5,22 @@ import React from "react";
 export default function TourEnd({
   handleClose,
   open,
-  reportType,
+  storyType,
   toolBoxOpen,
 }: {
   handleClose: () => void;
   open: boolean;
-  reportType: "basic" | "advanced" | "ai";
+  storyType: "basic" | "advanced" | "ai";
   toolBoxOpen: boolean;
 }) {
   return (
     <div
       css={`
         position: absolute;
 
-        ${reportType === "basic" &&
+        ${storyType === "basic" &&
         `top: 19.8rem; right: ${toolBoxOpen ? "-25%" : "-10%"};`}
-        ${reportType === "advanced" &&
+        ${storyType === "advanced" &&
         `top: 2.4rem; right: ${toolBoxOpen ? "-29%" : "-10%"};`} 
         display: ${open ? "block" : "none"};
         transition: right 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
@@ -82,13 +82,13 @@ export default function TourEnd({
           <CloseOutlined color={"inherit"} fontSize={"inherit"} />
         </IconButton>
         <p>
-          {reportType === "basic" &&
+          {storyType === "basic" &&
             " Good job! These grey rectangles are called placeholders. You drag and drop Chart or other Layout elements inside from the right panel."}
-          {reportType === "advanced" &&
+          {storyType === "advanced" &&
             "These grey rectangles are called placeholders. You drag and drop Chart or other Layout elements inside from the right panel"}
           <br />
           <br />
-          That’s how you create a report. Easy right!
+          That’s how you create a story. Easy right!
         </p>
         <button
           type="button"

src/app/components/Dialogs/TourGuide/tourStart.tsx

@@ -73,7 +73,7 @@ export default function TourStart(props: {
               font-family: "Inter", sans-serif;
             `}
           >
-            Welcome to the Dataxplorer report builder!
+            Welcome to the Dataxplorer story builder!
           </p>
           <p
             css={`
@@ -82,7 +82,7 @@ export default function TourStart(props: {
               line-height: normal;
             `}
           >
-            <b>Are you ready to create your first report?</b>
+            <b>Are you ready to create your first story?</b>
           </p>
           <p
             css={`

src/app/components/Dialogs/deleteDatasetDialog.tsx

@@ -1,6 +1,6 @@
 import { IconButton, Modal, createStyles, makeStyles } from "@material-ui/core";
 import { CloseOutlined } from "@material-ui/icons";
-import useGetChartsReportsCountByDataset from "app/hooks/useGetChartsReportsCountByDataset";
+import useGetChartsStoriesCountByDataset from "app/hooks/useGetChartsStoriesCountByDataset";
 import CircleLoader from "app/modules/home-module/components/Loader";
 import React from "react";
 
@@ -54,7 +54,7 @@ export default function DeleteDatasetDialog(props: Props) {
     }
   };
 
-  const { data, loading } = useGetChartsReportsCountByDataset(props.cardId);
+  const { data, loading } = useGetChartsStoriesCountByDataset(props.cardId);
 
   return (
     <div>
@@ -112,10 +112,10 @@ export default function DeleteDatasetDialog(props: Props) {
                   By deleting this dataset you and other users will lose access
                   to
                   <br />
-                  this data and will affect usage of some charts and reports. A
+                  this data and will affect usage of some charts and stories. A
                   <br />
-                  total of {data.chartsCount} charts and {data.reportsCount}{" "}
-                  reports will be affected.
+                  total of {data.chartsCount} charts and {data.storiesCount}{" "}
+                  stories will be affected.
                   <br /> <br />{" "}
                   <b>
                     Once you delete this dataset there is no turning back as

src/app/components/Dialogs/deleteReportDialog.tsx → src/app/components/Dialogs/deleteStoryDialog.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles(() =>
   })
 );
 
-export default function DeleteReportDialog(props: Props) {
+export default function DeleteStoryDialog(props: Props) {
   const classes = useStyles();
 
   const onInputEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -56,7 +56,7 @@ export default function DeleteReportDialog(props: Props) {
       <div className={classes.paper}>
         <form
           onSubmit={() => props.handleDelete(props.cardId as string)}
-          data-cy="delete-report-item-form"
+          data-cy="delete-story-item-form"
           aria-label="form"
         >
           <div
@@ -83,14 +83,14 @@ export default function DeleteReportDialog(props: Props) {
                 margin-bottom: 0px;
               `}
             >
-              Delete report
+              Delete story
             </p>
             <p
               css={`
                 margin-top: 3px;
               `}
             >
-              Absolutely sure you want to delete the report(s)? <br />{" "}
+              Absolutely sure you want to delete the story(s)? <br />{" "}
               <b>This action is irreversible!</b>
             </p>
             <div
@@ -104,7 +104,7 @@ export default function DeleteReportDialog(props: Props) {
                 placeholder='Type "DELETE" to confirm'
                 onChange={props.handleInputChange}
                 onKeyPress={onInputEnter}
-                data-cy="delete-report-item-input"
+                data-cy="delete-story-item-input"
                 css={`
                   border: 1px solid #231d2c;
                   border-radius: 10px;

src/app/components/Dialogs/emptyRowsDialog.tsx

@@ -76,7 +76,7 @@ export default function EmptyRowsDialog() {
             `}
           >
             <b>
-              We are unable to save the report as it contains rows with empty
+              We are unable to save the story as it contains rows with empty
               placeholders.
             </b>
           </p>

src/app/components/Dialogs/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
 import EmptyRowsDialog from "./emptyRowsDialog";
-import UntitledReportDialog from "./untitledReportDialog";
+import UntitledStoryDialog from "./untitledStoryDialog";
 
 export function AppDialogs() {
   return (
     <React.Fragment>
       <EmptyRowsDialog />
-      <UntitledReportDialog />
+      <UntitledStoryDialog />
     </React.Fragment>
   );
 }

src/app/components/Dialogs/logOutDialog.tsx

@@ -22,15 +22,15 @@ export default function LogOutDialog(props: Props) {
   const clearCharts = useStoreActions(
     (actions) => actions.charts.ChartGetList.clear
   );
-  const clearReports = useStoreActions(
-    (actions) => actions.reports.ReportGetList.clear
+  const clearStories = useStoreActions(
+    (actions) => actions.stories.StoryGetList.clear
   );
 
   function clearAssets() {
     setToken("");
     clearDatasets();
     clearCharts();
-    clearReports();
+    clearStories();
   }
 
   function onLogout() {