some updates to fix up saving perspectives w/ burnettk

2022-12-05 14:07:26 -05:00 · 2022-12-05 14:07:26 -05:00 · 3aae7a4018
parent ebcc523871
commit 3aae7a4018
5 changed files with 165 additions and 115 deletions
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListSaveAsReport.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListSaveAsReport.tsx
@ -2,8 +2,8 @@ import { useState } from 'react';
 import {
  Button,
  TextInput,
-  Form,
  Stack,
+  Modal,
  // @ts-ignore
 } from '@carbon/react';
 import {
@ -42,26 +42,31 @@ export default function ProcessInstanceListSaveAsReport({
  startToSeconds,
  endFromSeconds,
  endToSeconds,
-  buttonText = 'Save as Perspective',
  buttonClassName,
+  buttonText = 'Save as Perspective',
  reportMetadata,
 }: OwnProps) {
  const [identifier, setIdentifier] = useState<string>(
    processInstanceReportSelection?.identifier || ''
  );
+  const [showSaveForm, setShowSaveForm] = useState<boolean>(false);

-  const hasIdentifier = () => {
-    return identifier?.length > 0;
+  const isEditMode = () => {
+    return (
+      processInstanceReportSelection &&
+      processInstanceReportSelection.identifier === identifier
+    );
  };

  const responseHandler = (result: any) => {
    if (result) {
-      onSuccess(result);
+      onSuccess(result, isEditMode() ? 'edit' : 'new');
    }
  };

-  const isEditMode = () => {
-    return !!processInstanceReportSelection;
+  const handleSaveFormClose = () => {
+    setIdentifier(processInstanceReportSelection?.identifier || '');
+    setShowSaveForm(false);
  };

  const addProcessInstanceReport = (event: any) => {
@ -148,36 +153,53 @@ export default function ProcessInstanceListSaveAsReport({
        },
      },
    });
+    handleSaveFormClose();
  };

  let textInputComponent = null;
-  if (!isEditMode()) {
-    textInputComponent = (
-      <TextInput
-        id="identifier"
-        name="identifier"
-        labelText="Identifier"
-        className="no-wrap"
-        inline
-        value={identifier}
-        onChange={(e: any) => setIdentifier(e.target.value)}
-      />
-    );
+  textInputComponent = (
+    <TextInput
+      id="identifier"
+      name="identifier"
+      labelText="Identifier"
+      className="no-wrap"
+      inline
+      value={identifier}
+      onChange={(e: any) => setIdentifier(e.target.value)}
+    />
+  );
+
+  let descriptionText =
+    'Save the current columns and filters as a perspective so you can come back to this view in the future.';
+  if (processInstanceReportSelection) {
+    descriptionText =
+      'Keep the identifier the same and click Save to update the current perspective. Change the identifier if you want to save the current view with a new name.';
  }

  return (
-    <Form onSubmit={addProcessInstanceReport}>
-      <Stack gap={5} orientation="horizontal">
+    <Stack gap={5} orientation="horizontal">
+      <Modal
+        open={showSaveForm}
+        modalHeading="Save Perspective"
+        primaryButtonText="Save"
+        primaryButtonDisabled={!identifier}
+        onRequestSubmit={addProcessInstanceReport}
+        onRequestClose={handleSaveFormClose}
+        hasScrollingContent
+      >
+        <p className="data-table-description">{descriptionText}</p>
        {textInputComponent}
-        <Button
-          disabled={!hasIdentifier()}
-          size="sm"
-          type="submit"
-          className={buttonClassName}
-        >
-          {buttonText}
-        </Button>
-      </Stack>
-    </Form>
+      </Modal>
+      <Button
+        kind=""
+        className={buttonClassName}
+        onClick={() => {
+          setIdentifier(processInstanceReportSelection?.identifier || '');
+          setShowSaveForm(true);
+        }}
+      >
+        {buttonText}
+      </Button>
+    </Stack>
  );
 }
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@ -639,13 +639,14 @@ export default function ProcessInstanceListTable({
    }
    return (
      <ProcessInstanceListSaveAsReport
-        onSuccess={(result: any) => onSaveReportSuccess(result, 'new')}
-        buttonClassName="narrow-button"
+        onSuccess={onSaveReportSuccess}
+        buttonClassName="button-white-background narrow-button"
        columnArray={reportColumns()}
        orderBy=""
-        buttonText="Save New Perspective"
+        buttonText="Save"
        processModelSelection={processModelSelection}
        processStatusSelection={processStatusSelection}
+        processInstanceReportSelection={processInstanceReportSelection}
        reportMetadata={reportMetadata}
        startFromSeconds={startFromSeconds}
        startToSeconds={startToSeconds}
@ -871,8 +872,10 @@ export default function ProcessInstanceListTable({
          reportColumnToReportColumnForEditing(reportColumn);

        let tagType = 'cool-gray';
+        let tagTypeClass = '';
        if (reportColumnForEditing.filterable) {
          tagType = 'green';
+          tagTypeClass = 'tag-type-green';
        }
        let reportColumnLabel = reportColumnForEditing.Header;
        if (reportColumnForEditing.filter_field_value) {
@ -883,7 +886,7 @@ export default function ProcessInstanceListTable({
            <Button
              kind="ghost"
              size="sm"
-              className="button-tag-icon"
+              className={`button-tag-icon ${tagTypeClass}`}
              title={`Edit ${reportColumnForEditing.accessor}`}
              onClick={() => {
                setReportColumnToOperateOn(reportColumnForEditing);
@ -897,7 +900,7 @@ export default function ProcessInstanceListTable({
              data-qa="remove-report-column"
              renderIcon={Close}
              iconDescription="Remove Column"
-              className="button-tag-icon"
+              className={`button-tag-icon ${tagTypeClass}`}
              hasIconOnly
              size="sm"
              kind="ghost"
@ -1004,9 +1007,6 @@ export default function ProcessInstanceListTable({
          </Column>
        </Grid>
        <Grid fullWidth className="with-bottom-margin">
-          <Column sm={4} md={4} lg={8}>
-            {saveAsReportComponent()}
-          </Column>
          <Column sm={4} md={4} lg={8}>
            <ButtonSet>
              <Button
@ -1026,6 +1026,9 @@ export default function ProcessInstanceListTable({
              </Button>
            </ButtonSet>
          </Column>
+          <Column sm={4} md={4} lg={8}>
+           {saveAsReportComponent()}
+          </Column>
        </Grid>
      </>
    );
@ -1139,8 +1142,6 @@ export default function ProcessInstanceListTable({

  const reportSearchComponent = () => {
    if (showReports) {
-      const { startFromSeconds, startToSeconds, endFromSeconds, endToSeconds } =
-        calculateStartAndEndSeconds();
      const columns = [
        <Column sm={2} md={4} lg={7}>
          <ProcessInstanceReportSearch
@ -1149,31 +1150,6 @@ export default function ProcessInstanceListTable({
          />
        </Column>,
      ];
-      if (
-        processInstanceReportSelection &&
-        showFilterOptions &&
-        reportMetadata
-      ) {
-        columns.push(
-          <Column sm={2} md={4} lg={2}>
-            <ProcessInstanceListSaveAsReport
-              buttonClassName="with-tiny-top-margin"
-              onSuccess={(result: any) => onSaveReportSuccess(result, 'edit')}
-              columnArray={reportColumns()}
-              orderBy=""
-              buttonText="Save"
-              processModelSelection={processModelSelection}
-              processStatusSelection={processStatusSelection}
-              reportMetadata={reportMetadata}
-              startFromSeconds={startFromSeconds}
-              startToSeconds={startToSeconds}
-              endFromSeconds={endFromSeconds}
-              endToSeconds={endToSeconds}
-              processInstanceReportSelection={processInstanceReportSelection}
-            />
-          </Column>
-        );
-      }
      return (
        <Grid className="with-tiny-bottom-margin" fullWidth>
          {columns}
--- a/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
@ -5,6 +5,7 @@ import {
  FormLabel,
  // @ts-ignore
 } from '@carbon/react';
+import { useSearchParams } from 'react-router-dom';
 import { truncateString } from '../helpers';
 import { ProcessInstanceReport } from '../interfaces';
 import HttpService from '../services/HttpService';
@ -24,6 +25,9 @@ export default function ProcessInstanceReportSearch({
    ProcessInstanceReport[] | null
  >(null);

+  const [searchParams] = useSearchParams();
+  const reportId = searchParams.get('report_id');
+
  useEffect(() => {
    function setProcessInstanceReportsFromResult(
      result: ProcessInstanceReport[]
@ -31,12 +35,11 @@ export default function ProcessInstanceReportSearch({
      setProcessInstanceReports(result);
    }

-    setProcessInstanceReports([]);
    HttpService.makeCallToBackend({
      path: `/process-instances/reports`,
      successCallback: setProcessInstanceReportsFromResult,
    });
-  }, []);
+  }, [reportId]);

  const reportSelectionString = (
    processInstanceReport: ProcessInstanceReport
--- a/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
@ -1,9 +1,17 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  ButtonSet,
+  Form,
+  Stack,
+  TextInput,
+  Grid,
+  Column,
+  // @ts-ignore
+} from '@carbon/react';
 // @ts-ignore
-import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
-// @ts-ignore
-import { AddAlt } from '@carbon/icons-react';
+import { AddAlt, TrashCan } from '@carbon/icons-react';
 import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
 import { MetadataExtractionPath, ProcessModel } from '../interfaces';
@ -96,43 +104,59 @@ export default function ProcessModelForm({
    metadataExtractionPath: MetadataExtractionPath
  ) => {
    return (
-      <>
-        <TextInput
-          id="process-model-metadata-extraction-path-key"
-          labelText="Extraction Key"
-          value={metadataExtractionPath.key}
-          onChange={(event: any) => {
-            const cep: MetadataExtractionPath[] =
-              processModel.metadata_extraction_paths || [];
-            const newMeta = { ...metadataExtractionPath };
-            newMeta.key = event.target.value;
-            cep[index] = newMeta;
-            updateProcessModel({ metadata_extraction_paths: cep });
-          }}
-        />
-        <TextInput
-          id="process-model-metadata-extraction-path"
-          labelText="Extraction Path"
-          value={metadataExtractionPath.path}
-          onChange={(event: any) => {
-            const cep: MetadataExtractionPath[] =
-              processModel.metadata_extraction_paths || [];
-            const newMeta = { ...metadataExtractionPath };
-            newMeta.path = event.target.value;
-            cep[index] = newMeta;
-            updateProcessModel({ metadata_extraction_paths: cep });
-          }}
-        />
-      </>
+      <Grid>
+        <Column md={3} lg={7} sm={1}>
+          <TextInput
+            id={`process-model-metadata-extraction-path-key-${index}`}
+            labelText="Extraction Key"
+            value={metadataExtractionPath.key}
+            onChange={(event: any) => {
+              const cep: MetadataExtractionPath[] =
+                processModel.metadata_extraction_paths || [];
+              const newMeta = { ...metadataExtractionPath };
+              newMeta.key = event.target.value;
+              cep[index] = newMeta;
+              updateProcessModel({ metadata_extraction_paths: cep });
+            }}
+          />
+        </Column>
+        <Column md={4} lg={8} sm={2}>
+          <TextInput
+            id={`process-model-metadata-extraction-path-${index}`}
+            labelText="Extraction Path"
+            value={metadataExtractionPath.path}
+            onChange={(event: any) => {
+              const cep: MetadataExtractionPath[] =
+                processModel.metadata_extraction_paths || [];
+              const newMeta = { ...metadataExtractionPath };
+              newMeta.path = event.target.value;
+              cep[index] = newMeta;
+              updateProcessModel({ metadata_extraction_paths: cep });
+            }}
+          />
+        </Column>
+        <Column md={1} lg={1} sm={1}>
+          <Button
+            kind="ghost"
+            renderIcon={TrashCan}
+            iconDescription="Remove Key"
+            hasIconOnly
+            size="lg"
+            className="with-extra-top-margin"
+            onClick={() => {
+              const cep: MetadataExtractionPath[] =
+                processModel.metadata_extraction_paths || [];
+              cep.splice(index, 1);
+              updateProcessModel({ metadata_extraction_paths: cep });
+            }}
+          />
+        </Column>
+      </Grid>
    );
  };

  const metadataExtractionPathFormArea = () => {
    if (processModel.metadata_extraction_paths) {
-      console.log(
-        'processModel.metadata_extraction_paths',
-        processModel.metadata_extraction_paths
-      );
      return processModel.metadata_extraction_paths.map(
        (metadataExtractionPath: MetadataExtractionPath, index: number) => {
          return metadataExtractionPathForm(index, metadataExtractionPath);
@ -207,20 +231,36 @@ export default function ProcessModelForm({
      />
    );

+    textInputs.push(<h2>Metadata Extractions</h2>);
+    textInputs.push(
+      <Grid>
+        <Column md={8} lg={16} sm={4}>
+          <p className="data-table-description">
+            You can provide one or more metadata extractions to pull data from
+            your process instances to provide quick access in searches and
+            perspectives.
+          </p>
+        </Column>
+      </Grid>
+    );
    textInputs.push(<>{metadataExtractionPathFormArea()}</>);
    textInputs.push(
-      <Button
-        data-qa="add-metadata-extraction-path-button"
-        renderIcon={AddAlt}
-        className="button-white-background"
-        kind=""
-        size="sm"
-        onClick={() => {
-          addBlankMetadataExtractionPath();
-        }}
-      >
-        Add Metadata Extraction Path
-      </Button>
+      <Grid>
+        <Column md={4} lg={8} sm={2}>
+          <Button
+            data-qa="add-metadata-extraction-path-button"
+            renderIcon={AddAlt}
+            className="button-white-background"
+            kind=""
+            size="sm"
+            onClick={() => {
+              addBlankMetadataExtractionPath();
+            }}
+          >
+            Add Metadata Extraction Path
+          </Button>
+        </Column>
+      </Grid>
    );

    return textInputs;
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@ -169,6 +169,10 @@ h1.with-icons {
  margin-top: 1em;
 }

+.with-extra-top-margin {
+  margin-top: 1.3em;
+}
+
 .with-tiny-top-margin {
  margin-top: 4px;
 }
@ -353,3 +357,8 @@ td.actions-cell {
  word-break: normal;

 }
+
+.tag-type-green:hover {
+  background-color:	#00FF00;
+}
+