Fix/custom report improvements

.eslintrc.js

@@ -78,8 +78,6 @@ module.exports = {
         '@typescript-eslint/no-warning-comments': 'off',
         '@typescript-eslint/no-empty-function': 'off',
         '@typescript-eslint/no-var-requires': 'error',
-        '@typescript-eslint/explicit-function-return-type': 'warn',
-        '@typescript-eslint/explicit-module-boundary-types': 'warn',
         '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/camelcase': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Frontend**: Custom reporst can now be confihured using an interactive form. #1131
 - **Frontend**: New feature: Run custom reports from the reports page. #1050
 
 ### Fixed

packages/api-types/out/schema.ts

@@ -1050,7 +1050,15 @@ export interface components {
        */
       praiseIds: string[];
     };
-    SettingDto: {
+    ConfigurationValueItemsDto: {
+      /**
+       * @description Allowed array types
+       * @example string
+       * @enum {string}
+       */
+      type: 'string' | 'number';
+    };
+    ConfigurationValueDto: {
       /**
        * @description Type of the setting
        * @example string
@@ -1059,9 +1067,9 @@ export interface components {
       type: 'string' | 'number' | 'boolean' | 'array';
       /**
        * @description Default value for the setting
-       * @example Some string
+       * @example 666
        */
-      default: Record<string, never>;
+      default: number | string | boolean | number[] | string[];
       /**
        * @description Description of the setting
        * @example Description of the string setting
@@ -1071,7 +1079,7 @@ export interface components {
        * @description Markdown description of the setting
        * @example Description of the string setting
        */
-      markdownDescription: string;
+      markdownDescription?: string;
       /**
        * @description Edit presentation style
        * @example multiline
@@ -1082,7 +1090,7 @@ export interface components {
        * @description Order of the setting
        * @example 1
        */
-      order: number;
+      order?: number;
       /**
        * @description Enum values for string type settings
        * @example [
@@ -1091,9 +1099,8 @@ export interface components {
        * ]
        */
       enum?: string[];
-      items: {
-        type?: Record<string, never>;
-      };
+      /** @description Defines the type of items for array settings */
+      items?: components['schemas']['ConfigurationValueItemsDto'];
     };
     ReportManifestDto: {
       /** @example https://raw.githubusercontent.com/givepraise/reports/main/reports/disperse-dist-straight-curve-with-ceiling/manifest.json */
@@ -1131,7 +1138,9 @@ export interface components {
       keywords: string[];
       /** @description Configuration settings for the report */
       configuration: {
-        [key: string]: components['schemas']['SettingDto'] | undefined;
+        [key: string]:
+          | components['schemas']['ConfigurationValueDto']
+          | undefined;
       };
     };
   };

packages/api/src/reports/dto/setting.dto.ts → packages/api/src/reports/dto/configuration-value.dto.ts

@@ -1,22 +1,47 @@
 import { ApiProperty } from '@nestjs/swagger';
 
-export type SettingTypeDto = 'string' | 'number' | 'boolean' | 'array';
+export type ConfigurationValueVariant =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'array';
 
-export class SettingDto {
+export type ConfigurationValueItemsTypeVariant = 'string' | 'number';
+
+export class ConfigurationValueItemsDto {
+  @ApiProperty({
+    description: 'Allowed array types',
+    enum: ['string', 'number'],
+    required: true,
+    example: 'string',
+  })
+  type: ConfigurationValueItemsTypeVariant;
+}
+
+export class ConfigurationValueDto {
   @ApiProperty({
     description: 'Type of the setting',
     enum: ['string', 'number', 'boolean', 'array'],
     required: true,
     example: 'string',
   })
-  type: SettingTypeDto;
+  type: ConfigurationValueVariant;
 
   @ApiProperty({
     description: 'Default value for the setting',
     required: true,
-    example: 'Some string',
+    example: 666,
+    oneOf: [
+      { type: 'number' },
+      {
+        type: 'string',
+      },
+      { type: 'boolean' },
+      { type: 'array', items: { type: 'number' } },
+      { type: 'array', items: { type: 'string' } },
+    ],
   })
-  default: any;
+  default: number | string | boolean | number[] | string[];
 
   @ApiProperty({
     description: 'Description of the setting',
@@ -27,10 +52,10 @@ export class SettingDto {
 
   @ApiProperty({
     description: 'Markdown description of the setting',
-    required: true,
+    required: false,
     example: 'Description of the string setting',
   })
-  markdownDescription: string;
+  markdownDescription?: string;
 
   @ApiProperty({
     description: 'Edit presentation style',
@@ -42,10 +67,10 @@ export class SettingDto {
 
   @ApiProperty({
     description: 'Order of the setting',
-    required: true,
+    required: false,
     example: 1,
   })
-  order: number;
+  order?: number;
 
   @ApiProperty({
     description: 'Enum values for string type settings',
@@ -55,13 +80,8 @@ export class SettingDto {
   enum?: string[];
 
   @ApiProperty({
-    description: 'Type of items for array settings',
+    description: 'Defines the type of items for array settings',
     required: false,
-    example: {
-      type: 'string',
-    },
   })
-  items?: {
-    type: SettingTypeDto;
-  };
+  items?: ConfigurationValueItemsDto;
 }

packages/api/src/reports/dto/report-manifest.dto.ts

@@ -1,7 +1,7 @@
 import { ApiExtraModels, ApiProperty } from '@nestjs/swagger';
-import { SettingDto } from './setting.dto';
+import { ConfigurationValueDto } from './configuration-value.dto';
 
-@ApiExtraModels(SettingDto)
+@ApiExtraModels(ConfigurationValueDto)
 export class ReportManifestDto {
   @ApiProperty({
     example:
@@ -93,8 +93,8 @@ export class ReportManifestDto {
     required: true,
     type: 'object',
     additionalProperties: {
-      oneOf: [{ $ref: '#/components/schemas/SettingDto' }],
+      oneOf: [{ $ref: '#/components/schemas/ConfigurationValueDto' }],
     },
   })
-  configuration?: Record<string, SettingDto>;
+  configuration?: Record<string, ConfigurationValueDto>;
 }

packages/frontend/src/model/report/dto/configuration-value.dto.ts

@@ -0,0 +1,4 @@
+import { components } from 'api-types';
+
+export type ConfigurationValueDto =
+  components['schemas']['ConfigurationValueDto'];

packages/frontend/src/pages/Reports/components/CustomReportDialog.tsx

@@ -10,19 +10,32 @@ import { Button } from '@/components/ui/Button';
 import { makeClient } from '../../../utils/axios';
 import { ReportManifestDto } from '../../../model/report/dto/report-manifest.dto';
 import { isResponseAxiosError } from '../../../model/api';
+import { recoilPersist } from 'recoil-persist';
+import { atom, useRecoilState } from 'recoil';
 
-interface ReportConfigDialogProps {
+const { persistAtom } = recoilPersist();
+
+export const CustomReportUrl = atom<string>({
+  key: 'CustomReportUrl',
+  default: undefined,
+  effects: [persistAtom],
+});
+
+interface CustomReportDialogProps {
   onClose(): void;
   onRun(url: string, manifest: ReportManifestDto): void;
 }
 
 export const CustomReportDialog = ({
   onClose,
   onRun,
-}: ReportConfigDialogProps): JSX.Element => {
-  const [url, setUrl] = React.useState('');
+}: CustomReportDialogProps): JSX.Element => {
+  // Local state
   const [error, setError] = React.useState('');
 
+  // Global state
+  const [url, setUrl] = useRecoilState(CustomReportUrl);
+
   const handleUrlChange = (event): void => {
     setUrl(event.target.value);
   };
@@ -100,7 +113,7 @@ export const CustomReportDialog = ({
                 icon={faFileDownload}
                 size="1x"
               />
-              Run report
+              Load report
             </Button>
           </div>
         </div>