Project/new assessment registry

.gitignore

@@ -17,6 +17,7 @@ generated/
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

app/Base/configs/apollo.ts

@@ -69,6 +69,9 @@ const apolloOptions: ApolloClientOptions<NormalizedCacheObject> = {
             AssistedTaggingMutationType: {
                 keyFields: [],
             },
+            AssessmentDashboardStatisticsType: {
+                keyFields: [],
+            },
         },
     }),
     assumeImmutableResults: true,

app/Base/configs/routes.tsx

@@ -392,7 +392,7 @@ const assessments = wrap({
         if (!project) {
             return false;
         }
-        return project.hasAssessmentTemplate;
+        return project.isAssessmentEnabled;
     },
     visibility: 'is-authenticated',
 });
@@ -411,7 +411,7 @@ const leadGroups = wrap({
         if (!project) {
             return false;
         }
-        return project.hasAssessmentTemplate;
+        return project.isAssessmentEnabled;
     },
     visibility: 'is-authenticated',
 });
@@ -444,18 +444,6 @@ const aryDashboard = wrap({
     componentProps: {
     },
     visibility: 'is-authenticated',
-    checkPermissions: (_, project, skipProjectPermissionCheck) => {
-        if (skipProjectPermissionCheck) {
-            return true;
-        }
-        if (!project) {
-            return false;
-        }
-        return (
-            project.isVisualizationEnabled
-            && project.hasAssessmentTemplate
-        );
-    },
 });
 
 const exportRoute = wrap({
@@ -516,12 +504,36 @@ const newAssessmentExportCreateRoute = wrap({
     },
 });
 
-const assessmentEditRoute = wrap({
+const newAssessmentEditRoute = wrap({
     parent: { path: projectRoute.path },
-    path: '/assessments/leads/:leadId(\\d+)/',
+    path: '/assessments/:assessmentId(\\d+)/',
     title: 'Edit Assessment',
     navbarVisibility: false,
-    component: lazy(() => import('#views/EditAssessment')),
+    component: lazy(() => import('#views/EditAry')),
+    componentProps: {
+    },
+    visibility: 'is-authenticated',
+    checkPermissions: (_, project, skipProjectPermissionCheck) => {
+        if (skipProjectPermissionCheck) {
+            return true;
+        }
+        if (!project) {
+            return false;
+        }
+        // NOTE: using permission for LEAD as we don't have one for assessment
+        return project.isAssessmentEnabled && (
+            project.allowedPermissions.includes('CREATE_LEAD')
+            || project.allowedPermissions.includes('UPDATE_LEAD')
+        );
+    },
+});
+
+const createNewAssessmentEditRoute = wrap({
+    parent: { path: projectRoute.path },
+    path: '/assessments/new/',
+    title: 'Create Assessment',
+    navbarVisibility: false,
+    component: lazy(() => import('#views/EditAry')),
     componentProps: {
     },
     visibility: 'is-authenticated',
@@ -533,7 +545,7 @@ const assessmentEditRoute = wrap({
             return false;
         }
         // NOTE: using permission for LEAD as we don't have one for assessment
-        return project.hasAssessmentTemplate && (
+        return project.isAssessmentEnabled && (
             project.allowedPermissions.includes('CREATE_LEAD')
             || project.allowedPermissions.includes('UPDATE_LEAD')
         );
@@ -557,7 +569,7 @@ const groupAssessmentEditRoute = wrap({
             return false;
         }
         // NOTE: using permission for LEAD as we don't have one for assessment
-        return project.hasAssessmentTemplate && (
+        return project.isAssessmentEnabled && (
             project.allowedPermissions.includes('CREATE_LEAD')
             || project.allowedPermissions.includes('UPDATE_LEAD')
         );
@@ -675,8 +687,9 @@ const routes = {
     newReport: newReportRoute,
     assessmentExportCreate: newAssessmentExportCreateRoute,
     entryEdit: entryEditRoute,
-    assessmentEdit: assessmentEditRoute,
     groupAssessmentEdit: groupAssessmentEditRoute,
+    newAssessmentEdit: newAssessmentEditRoute,
+    createNewAssessmentEdit: createNewAssessmentEditRoute,
     entryEditRedirect,
     documentViewerRedirect,
     projectRedirect,

app/views/ExploreDeepContent/BrushLineChart.tsx → app/components/BrushLineChart/index.tsx

@@ -1,11 +1,12 @@
+import { PendingMessage } from '@the-deep/deep-ui';
+import React, { useMemo, useCallback } from 'react';
 import {
     VictoryChart,
     VictoryBrushContainer,
     VictoryLine,
     VictoryAxis,
     VictoryArea,
 } from 'victory';
-import React, { useMemo, useCallback } from 'react';
 
 const today = new Date().getTime();
 
@@ -17,6 +18,7 @@ interface Props {
     onChange: (startDate: number | undefined, endDate: number | undefined) => void;
     data: { total: number, date: number }[];
     readOnly?: boolean;
+    loading?: boolean;
 }
 
 function BrushLineChart(props: Props) {
@@ -28,6 +30,7 @@ function BrushLineChart(props: Props) {
         endDate,
         onChange,
         readOnly = false,
+        loading,
     } = props;
 
     const maxCount = useMemo(() => Math.max(...data.map((datum) => datum.total)), [data]);
@@ -62,6 +65,7 @@ function BrushLineChart(props: Props) {
 
     return (
         <div>
+            {loading && <PendingMessage />}
             <svg style={{ height: 0 }}>
                 <defs>
                     <linearGradient

app/components/EntityCreationLineChart/index.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useCallback, ReactNode } from 'react';
+import {
+    _cs,
+    formatDateToString,
+} from '@togglecorp/fujs';
+import {
+    ContainerCard,
+    Message,
+    Kraken,
+    PendingMessage,
+} from '@the-deep/deep-ui';
+import {
+    AreaChart,
+    ResponsiveContainer,
+    XAxis,
+    YAxis,
+    Area,
+    Tooltip,
+} from 'recharts';
+
+import {
+    formatDate,
+    formatMonth,
+    formatYear,
+    getTimeseriesWithoutGaps,
+} from '#utils/temporal';
+
+import ResolutionSelectInput from './ResolutionSelectInput';
+import ChartTypeSelectInput from './ChartTypeSelectInput';
+
+import styles from './styles.css';
+
+type Timeseries = {
+    date: string;
+    count: number;
+}
+
+interface Props {
+    className?: string;
+    heading: ReactNode;
+    timeseries: Timeseries[] | undefined;
+    startDate: number;
+    endDate: number;
+    loading?: boolean;
+}
+
+function EntityCreationLineChart(props: Props) {
+    const {
+        className,
+        heading,
+        timeseries,
+        startDate,
+        endDate,
+        loading,
+    } = props;
+
+    const startDateString = formatDateToString(new Date(startDate), 'yyyy-MM-dd');
+    const endDateString = formatDateToString(new Date(endDate), 'yyyy-MM-dd');
+
+    const [resolution, setResolution] = React.useState<'year' | 'month' | 'day'>('month');
+    const [chartType, setChartType] = React.useState<'step' | 'spark'>('spark');
+
+    const timeFormatter = useMemo(() => {
+        if (resolution === 'day') {
+            return formatDate;
+        }
+        return resolution === 'month' ? formatMonth : formatYear;
+    }, [resolution]);
+
+    const timeseriesWithoutGaps = useMemo(
+        () => getTimeseriesWithoutGaps(
+            timeseries,
+            resolution,
+            startDateString,
+            endDateString,
+        ),
+        [
+            timeseries,
+            resolution,
+            startDateString,
+            endDateString,
+        ],
+    );
+
+    const timeSpentLabelFormatter = useCallback((value: number): [number, string] => (
+        [value, `Total ${heading}`]
+    ), [heading]);
+
+    return (
+        <ContainerCard
+            className={_cs(styles.entityCreationLineChart, className)}
+            heading={heading}
+            headingSize="extraSmall"
+            spacing="loose"
+            contentClassName={styles.content}
+            headerActions={(
+                <>
+                    <ResolutionSelectInput
+                        value={resolution}
+                        onChange={setResolution}
+                    />
+                    <ChartTypeSelectInput
+                        value={chartType}
+                        onChange={setChartType}
+                    />
+                </>
+            )}
+            borderBelowHeaderWidth="thin"
+            borderBelowHeader
+        >
+            {loading && <PendingMessage />}
+            {(timeseries?.length ?? 0) > 0 ? (
+                <ResponsiveContainer debounce={300} className={styles.responsiveContainer}>
+                    <AreaChart
+                        data={timeseriesWithoutGaps}
+                    >
+                        <defs>
+                            <linearGradient
+                                id="stat"
+                                x1="0"
+                                y1="0"
+                                x2="0"
+                                y2="1"
+                            >
+                                <stop
+                                    offset="5%"
+                                    stopColor="var(--dui-color-accent)"
+                                    stopOpacity={0.6}
+                                />
+                                <stop
+                                    offset="95%"
+                                    stopColor="var(--dui-color-accent)"
+                                    stopOpacity={0}
+                                />
+                            </linearGradient>
+                        </defs>
+                        <XAxis
+                            dataKey="date"
+                            type="number"
+                            scale="time"
+                            domain={['dataMin', 'dataMax']}
+                            allowDuplicatedCategory={false}
+                            tick={{ strokeWidth: 1 }}
+                            tickFormatter={timeFormatter}
+                            minTickGap={20}
+                            interval="preserveStartEnd"
+                            padding={{ left: 10, right: 30 }}
+                            hide
+                        />
+                        <YAxis
+                            axisLine={false}
+                            tickLine={false}
+                            type="number"
+                            dataKey="total"
+                            padding={{ top: 0, bottom: 0 }}
+                            hide
+                        />
+                        <Tooltip
+                            labelFormatter={timeFormatter}
+                            formatter={timeSpentLabelFormatter}
+                        />
+                        <Area
+                            type={chartType === 'step' ? 'step' : 'linear'}
+                            dataKey="total"
+                            stroke="var(--dui-color-accent)"
+                            fillOpacity={1}
+                            fill="url(#stat)"
+                            strokeWidth={2}
+                            connectNulls
+                            activeDot
+                        />
+                    </AreaChart>
+                </ResponsiveContainer>
+            ) : (
+                <Message
+                    message="Data not found"
+                    icon={<Kraken variant="whip" />}
+                />
+            )}
+        </ContainerCard>
+    );
+}
+
+export default EntityCreationLineChart;

app/views/ExploreDeepContent/EntityCreationLineChart/styles.css → app/components/EntityCreationLineChart/styles.css

@@ -3,7 +3,10 @@
     border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
 
     .content {
+        display: flex;
+        flex-direction: column;
         flex-shrink: 0;
+        justify-content: center;
         padding: var(--dui-spacing-large);
         height: 20rem;
         overflow: unset;

app/views/EntryEdit/LeftPane/AssistItem/index.tsx → app/components/LeftPaneEntries/AssistItem/index.tsx

@@ -50,7 +50,6 @@ import {
 } from '#components/entry/schema';
 import { Framework } from '#components/entry/types';
 
-import { createDefaultAttributes } from '../../utils';
 import AssistPopup from './AssistPopup';
 import {
     createOrganigramAttr,
@@ -61,6 +60,9 @@ import {
     createMultiSelectAttr,
     createGeoAttr,
 } from './utils';
+import {
+    createDefaultAttributes,
+} from '../utils';
 
 import styles from './styles.css';
 

app/views/EntryEdit/LeftPane/AssistItem/utils.ts → app/components/LeftPaneEntries/AssistItem/utils.ts

@@ -30,7 +30,6 @@ import {
 } from '#utils/types';
 
 import { GeoArea } from '#components/GeoMultiSelectInput';
-
 import {
     PartialAttributeType,
 } from '#components/entry/schema';

app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx → app/components/LeftPaneEntries/AutoEntriesModal/index.tsx

@@ -63,7 +63,7 @@ import {
     UpdateDraftEntryMutationVariables,
 } from '#generated/types';
 import AssistPopup from '../AssistItem/AssistPopup';
-import { createDefaultAttributes } from '../../utils';
+import { createDefaultAttributes } from '../utils';
 import {
     createOrganigramAttr,
     createMatrix1dAttr,