Merge pull request #235 from zimmerman-team/feat/report-header

Feat/report header

cypress/e2e/1-dx/4-reports.cy.ts

@@ -47,11 +47,9 @@ describe("Testing reports on DX", () => {
     cy.get('[data-cy="report-sub-header-title-input"]').type(reportTestName);
 
     cy.get('[data-cy="report-header-block"]').within(() => {
-      cy.get('[data-cy="report-header-block-title-input"]').type(
-        reportTestName
-      );
-      cy.get('[data-cy="rich-text-editor-container"]').click();
-      cy.get('[data-testid="rich-text-editor"]').type(
+      cy.get('[data-testid="heading-rich-text-editor"]').type(reportTestName);
+      cy.get('[data-cy="description-rich-text-editor-container"]').click();
+      cy.get('[data-testid="description-rich-text-editor"]').type(
         "This is a report on football players"
       );
     });
@@ -79,7 +77,7 @@ describe("Testing reports on DX", () => {
     cy.get('[data-cy="row-frame-item-drop-zone-0-0"]').drop();
 
     cy.get("[data-cy=row-frame-0]").within(() => {
-      cy.get('[data-testid="rich-text-editor"]')
+      cy.get('[data-testid="report-rich-text-editor"]')
         .first()
         .type(
           "This is a report on football players who played in a match last year"
@@ -221,9 +219,9 @@ describe("Edit, duplicate and delete report", () => {
     cy.get('[data-cy="report-sub-header-title-input"]').type(" - Edited");
 
     cy.get('[data-cy="report-header-block"]').within(() => {
-      cy.get('[data-cy="report-header-block-title-input"]').type(" - Edited");
-      cy.get('[data-cy="rich-text-editor-container"]').click();
-      cy.get('[data-testid="rich-text-editor"]').type(" - Edited");
+      cy.get('[data-testid="heading-rich-text-editor"]').type(" - Edited");
+      cy.get('[data-cy="description-rich-text-editor-container"]').click();
+      cy.get('[data-testid="description-rich-text-editor"]').type(" - Edited");
     });
 
     cy.get('[data-cy="save-report-button"]').click();

src/app/modules/chart-module/components/chartSubheaderToolbar/data.ts

@@ -2,7 +2,7 @@ import { IFramesArray } from "app/modules/report-module/views/create/data";
 import { IHeaderDetails } from "app/modules/report-module/components/right-panel/data";
 import { ToolbarPluginsType } from "app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar";
 
-export interface SubheaderToolbarProps {
+export interface ChartSubheaderToolbarProps {
   name: string;
   isAiSwitchActive: boolean;
   visualOptions?: any;
@@ -38,8 +38,8 @@ export interface ReportSubheaderToolbarProps {
   setName: (name: string) => void;
   isSaveEnabled?: boolean;
   rawViz?: any;
-  setHasSubHeaderTitleFocused?: (value: boolean) => void;
-  setHasSubHeaderTitleBlurred?: (value: boolean) => void;
+  setHasReportNameFocused?: (value: boolean) => void;
+  setHasReportNameBlurred?: (value: boolean) => void;
   plugins: ToolbarPluginsType;
   headerDetails: IHeaderDetails;
   framesArray: IFramesArray[];

src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx

@@ -26,7 +26,7 @@ import { styles } from "app/modules/chart-module/components/chartSubheaderToolba
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import DeleteChartDialog from "app/components/Dialogs/deleteChartDialog";
 import { ChartAPIModel, emptyChartAPI } from "app/modules/chart-module/data";
-import { SubheaderToolbarProps } from "app/modules/chart-module/components/chartSubheaderToolbar/data";
+import { ChartSubheaderToolbarProps } from "app/modules/chart-module/components/chartSubheaderToolbar/data";
 import { ExportChartButton } from "app/modules/chart-module/components/chartSubheaderToolbar/exportButton";
 import { ISnackbarState } from "app/modules/dataset-module/routes/upload-module/upload-steps/previewFragment";
 import { chartFromReportAtom, planDialogAtom } from "app/state/recoil/atoms";
@@ -41,7 +41,9 @@ import useMediaQuery from "@material-ui/core/useMediaQuery";
 import DuplicateMessage from "app/modules/common/mobile-duplicate-message";
 import { InfoSnackbar } from "app/modules/report-module/components/reportSubHeaderToolbar/infosnackbar";
 
-export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
+export function ChartSubheaderToolbar(
+  props: Readonly<ChartSubheaderToolbarProps>
+) {
   const classes = useStyles();
   const history = useHistory();
   const isMobile = useMediaQuery("(max-width: 599px)");

src/app/modules/common/RichEditor/index.tsx

@@ -4,7 +4,7 @@ import bgPicker from "app/modules/common/RichEditor/BGColorModal/Picker";
 import { ToolbarPluginsType } from "app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar";
 
 /*plugins */
-import { EditorState } from "draft-js";
+import { EditorState, SelectionState } from "draft-js";
 import Editor from "@draft-js-plugins/editor";
 import createLinkPlugin from "@draft-js-plugins/anchor";
 import createEmojiPlugin from "@draft-js-plugins/emoji";
@@ -38,6 +38,9 @@ export const RichEditor = (props: {
   focusOnMount?: boolean;
   setPlaceholderState: React.Dispatch<React.SetStateAction<string>>;
   placeholder: string;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  testId?: string;
 }): ReactElement => {
   const editor = useRef<Editor | null>(null);
 
@@ -46,7 +49,7 @@ export const RichEditor = (props: {
   };
 
   React.useEffect(() => {
-    if (props.focusOnMount) {
+    if (props.focusOnMount && props.editMode) {
       focus();
     }
   }, []);
@@ -135,7 +138,8 @@ export const RichEditor = (props: {
           font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
         }
       `}
-      data-cy="rich-text-editor-container"
+      data-cy={`${props.testId}-container`}
+      data-testid={`${props.testId}-container`}
     >
       <Editor
         plugins={plugins}
@@ -154,19 +158,20 @@ export const RichEditor = (props: {
         editorState={props.textContent}
         onChange={props.setTextContent}
         onBlur={() => {
+          props.onBlur?.();
           if (props.textContent.getCurrentContent().getPlainText().length === 0)
             props.setPlaceholderState(props.placeholder);
         }}
         onFocus={() => {
+          props.onFocus?.();
           props.setPlugins?.(plugins);
           props.setPlaceholderState("");
         }}
         placeholder={props.placeholderState}
         ref={(element) => {
           editor.current = element;
         }}
-        webDriverTestID="rich-text-editor"
-        data-cy="rich-text-editor"
+        webDriverTestID={props.testId}
       />
     </div>
   );

src/app/modules/home-module/__test__/reportCard.test.tsx

@@ -1,25 +1,26 @@
 import { Auth0Provider } from "@auth0/auth0-react";
-import { render } from "@testing-library/react";
 import userEvent, {
   PointerEventsCheckLevel,
 } from "@testing-library/user-event";
-import { screen } from "@testing-library/react";
+import { screen, render } from "@testing-library/react";
 import { mockUseAuth0 } from "app/utils/mockAuth0";
 import { Router } from "react-router-dom";
 import { createMemoryHistory } from "history";
 import GridItem from "app/modules/home-module/components/AssetCollection/Reports/gridItem";
+import { ContentState, EditorState } from "draft-js";
 
 interface MockProps {
   date: Date;
   id?: string;
   title: string;
-  descr: string;
+  name: string;
   color: string;
   viz: JSX.Element;
   handleDelete?: jest.Mock<any, any, any>;
   handleDuplicate?: jest.Mock<any, any, any>;
   showMenuButton: boolean;
   owner: string;
+  heading: EditorState;
 }
 
 let mockLoginStatus = true;
@@ -41,14 +42,17 @@ const defaultProps = (newProps: Partial<MockProps> = {}): MockProps => {
   return {
     date: "2021-08-13",
     id: "report-id",
-    title: "report-title",
-    descr: "report-description",
+    heading: EditorState.createWithContent(
+      ContentState.createFromText("report-title")
+    ),
+    name: "report-description",
     color: "#ffffff",
     viz: <div data-testid="report-grid-item-viz-icon">report</div>,
     handleDelete: jest.fn(),
     handleDuplicate: jest.fn(),
     showMenuButton: true,
     owner: "auth0|123",
+
     ...newProps,
   } as MockProps;
 };

src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx

@@ -19,10 +19,12 @@ import ReportGridItem from "app/modules/home-module/components/AssetCollection/R
 import ColoredReportIcon from "app/assets/icons/ColoredReportIcon";
 import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
 import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
-import { HomepageTable } from "../../Table";
+import { EditorState, convertFromRaw } from "draft-js";
+import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
+import { HomepageTable } from "app/modules/home-module/components/Table/";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import { useSetRecoilState } from "recoil";
-import { getColumns } from "./data";
+import { getColumns } from "app/modules/home-module/components/AssetCollection/All/data";
 
 interface Props {
   sortBy: string;
@@ -283,11 +285,12 @@ export default function AssetsGrid(props: Props) {
                   type: data.assetType,
                 };
               }
-
               return {
                 id: data.id,
                 name: data.name,
-                description: data.title,
+                heading: data.heading
+                  ? EditorState.createWithContent(convertFromRaw(data.heading))
+                  : EditorState.createEmpty(),
                 createdDate: data.createdDate,
                 type: data.assetType,
               };
@@ -342,7 +345,7 @@ export default function AssetsGrid(props: Props) {
                     <ReportGridItem
                       id={d.id}
                       key={d.id}
-                      descr={d.name}
+                      name={d.name}
                       date={d.createdDate}
                       viz={<ColoredReportIcon />}
                       color={d.backgroundColor}
@@ -353,7 +356,13 @@ export default function AssetsGrid(props: Props) {
                       handleDuplicate={() =>
                         handleDuplicate(d.id, d.assetType as assetType)
                       }
-                      title={d.title || d.name}
+                      heading={
+                        d.heading
+                          ? EditorState.createWithContent(
+                              convertFromRaw(d.heading)
+                            )
+                          : EditorState.createEmpty()
+                      }
                       owner={d.owner}
                     />
                   ),

src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx

@@ -27,6 +27,16 @@ interface Props {
   addCard?: boolean;
 }
 
+export interface IChartAsset {
+  id: string;
+  name: string;
+  createdDate: Date;
+  vizType: string;
+  isMappingValid: boolean;
+  owner: string;
+  isAIAssisted: boolean;
+}
+
 export default function ChartsGrid(props: Props) {
   const observerTarget = React.useRef(null);
   const [chartId, setChartId] = React.useState<string>("");
@@ -43,7 +53,7 @@ export default function ChartsGrid(props: Props) {
   const setPlanDialog = useSetRecoilState(planDialogAtom);
 
   const charts = useStoreState(
-    (state) => (state.charts.ChartGetList.crudData ?? []) as any[]
+    (state) => (state.charts.ChartGetList.crudData ?? []) as IChartAsset[]
   );
   const loadChartsCount = useStoreActions(
     (actions) => actions.charts.ChartsCount.fetch

src/app/modules/home-module/components/AssetCollection/Reports/gridItem.tsx

@@ -9,13 +9,14 @@ import { ReactComponent as EditIcon } from "app/modules/home-module/assets/edit.
 import { ReactComponent as DeleteIcon } from "app/modules/home-module/assets/delete.svg";
 import { ReactComponent as ClockIcon } from "app/modules/home-module/assets/clock-icon.svg";
 import { ReactComponent as DuplicateIcon } from "app/modules/home-module/assets/duplicate.svg";
+import { EditorState } from "draft-js";
 import { useMediaQuery } from "@material-ui/core";
 
 interface Props {
   date: Date;
   id?: string;
-  title: string;
-  descr: string;
+  heading: EditorState;
+  name: string;
   color: string;
   viz: JSX.Element;
   handleDelete?: (id: string) => void;
@@ -24,7 +25,7 @@ interface Props {
   owner: string;
 }
 
-export default function gridItem(props: Props) {
+export default function GridItem(props: Readonly<Props>) {
   const { user, isAuthenticated } = useAuth0();
   const [menuOptionsDisplay, setMenuOptionsDisplay] = React.useState(false);
   const isMobile = useMediaQuery("(max-width: 767px)");
@@ -86,7 +87,7 @@ export default function gridItem(props: Props) {
             `}
           >
             <p
-              title={props.title}
+              title={props.heading.getCurrentContent().getPlainText()}
               css={`
                 font-size: 14px;
                 line-height: 22px;
@@ -99,10 +100,10 @@ export default function gridItem(props: Props) {
                 margin-bottom: 0;
               `}
             >
-              <b>{props.title}</b>
+              <b>{props.heading.getCurrentContent().getPlainText()}</b>
             </p>
             <p
-              title={props.descr}
+              title={props.name}
               css={`
                 font-size: 10px;
                 line-height: 14px;
@@ -116,7 +117,7 @@ export default function gridItem(props: Props) {
                 color: #495057;
               `}
             >
-              {props.descr}
+              {props.name}
             </p>
           </div>
           <IconButton

src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx

@@ -12,6 +12,7 @@ import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
 import ReformedGridItem from "app/modules/home-module/components/AssetCollection/Reports/gridItem";
 import ReportAddnewCard from "./reportAddNewCard";
 import { useInfinityScroll } from "app/hooks/useInfinityScroll";
+import { EditorState, convertFromRaw } from "draft-js";
 import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import CircleLoader from "app/modules/home-module/components/Loader";
@@ -24,7 +25,7 @@ interface Props {
   addCard?: boolean;
 }
 
-export default function ReportsGrid(props: Props) {
+export default function ReportsGrid(props: Readonly<Props>) {
   const observerTarget = React.useRef(null);
   const [cardId, setCardId] = React.useState<string>("");
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
@@ -220,14 +221,20 @@ export default function ReportsGrid(props: Props) {
               <ReformedGridItem
                 id={data.id}
                 key={data.id}
-                descr={data.name}
+                name={data.name}
                 date={data.createdDate}
                 viz={<ColoredReportIcon />}
                 color={data.backgroundColor}
                 showMenuButton={props.showMenuButton}
                 handleDelete={() => handleModal(data.id)}
                 handleDuplicate={() => handleDuplicate(data.id)}
-                title={data.title || data.name}
+                heading={
+                  data.heading
+                    ? EditorState.createWithContent(
+                        convertFromRaw(data.heading)
+                      )
+                    : EditorState.createEmpty()
+                }
                 owner={data.owner}
               />
               <Box height={16} />
@@ -245,6 +252,11 @@ export default function ReportsGrid(props: Props) {
             ],
             data: loadedReports.map((data) => ({
               ...data,
+              description: data.heading
+                ? EditorState.createWithContent(convertFromRaw(data.heading))
+                    .getCurrentContent()
+                    .getPlainText()
+                : "",
               type: "report",
             })),
           }}