psp-7924 property operation sub-table. (#3888)

* psp-7924 property operation sub-table.

* test updates.

source/frontend/src/components/Table/Table.scss

@@ -35,8 +35,10 @@
  background-color: $selected-color;
  }
  }
- .tbody {
+ .collapse {
  padding-left: 5rem;
+ }
+ .tbody {
  .tr-wrapper {
  border-bottom: none;
  }

source/frontend/src/components/Table/Table.tsx

@@ -557,6 +557,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = obje
  open?: boolean,
  className?: string,
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
+ id?: string | number,
  ) => {
  const detailsClosedIcon =
  props.detailsPanel && props.detailsPanel.icons?.closed ? (
@@ -576,7 +577,11 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = obje
  tooltipId="expand-all-rows"
  tooltip={open ? 'Collapse Row' : 'Expand Row'}
  >
- <div className={className + ' svg-btn'} onClick={onClick}>
+ <div
+ className={className + ' svg-btn'}
+ data-testid={`table-row-expander-${id}`}
+ onClick={onClick}
+ >
  {open ? detailsOpenedIcon : detailsClosedIcon}
  </div>
  </TooltipWrapper>
@@ -660,6 +665,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = obje
  props.detailsPanel && props.detailsPanel.checkExpanded(row.original, expandedRows),
  'td expander',
  e => handleExpandClick(e, row.original),
+ row.original.id ?? '',
  )}
  {props.canRowExpand && !props.canRowExpand(row) ? (
  <div className="td">
@@ -677,6 +683,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = obje
  props.detailsPanel && props.detailsPanel.checkExpanded(row.original, expandedRows),
  'td expander',
  e => handleExpandClick(e, row.original),
+ row.original.id ?? '',
  )}
  {row.cells.map((cell: CellWithProps<T>) => {
  return (
@@ -699,8 +706,11 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = obje
  })}
  </div>
  {props.detailsPanel && (
- <Collapse in={props.detailsPanel.checkExpanded(row.original, expandedRows)}>
- <div style={{ padding: 10 }}>{props.detailsPanel.render(row.original)}</div>
+ <Collapse
+ in={props.detailsPanel.checkExpanded(row.original, expandedRows)}
+ mountOnEnter
+ >
+ <div>{props.detailsPanel.render(row.original)}</div>
  </Collapse>
  )}
  </div>

source/frontend/src/components/common/Section/Section.tsx

@@ -74,7 +74,7 @@ export const Section: React.FC<
  );
 };
 
-const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
+export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
  font-size: ${props => (props.isStyledHeader === true ? '1.0em' : '')};
  font-weight: ${props => (props.isStyledHeader === true ? '' : 'bold')};
  color: ${props => props.theme.css.primaryColor};

source/frontend/src/constants/fileTypes.ts

@@ -2,4 +2,5 @@ export enum FileTypes {
  Acquisition = 'acquisition',
  Research = 'research',
  Disposition = 'disposition',
+ Lease = 'lease',
 }

source/frontend/src/features/leases/detail/LeasePages/payment/TermsPaymentsContainer.test.tsx

@@ -24,6 +24,7 @@ import {
  waitFor,
  prettyDOM,
  waitForElementToBeRemoved,
+ getByTestId,
 } from '@/utils/test-utils';
 
 import { defaultFormLeaseTerm, FormLeaseTerm } from './models';
@@ -293,13 +294,15 @@ describe('TermsPaymentsContainer component', () => {
  )),
  );
  const {
- component: { findByText, getByText },
+ component: { findByText, getByText, findByTestId },
  } = await setup({
  claims: [Claims.LEASE_EDIT, Claims.LEASE_ADD],
  initialValues: defaultLeaseWithTermsPayments,
  });
  mockAxios.onPost().reply(200, { id: 1 });
 
+ const expander = await findByTestId('table-row-expander-');
+ await act(async () => userEvent.click(expander));
  const addButton = await findByText('Record a Payment');
  await act(async () => {
  userEvent.click(addButton);
@@ -318,13 +321,15 @@ describe('TermsPaymentsContainer component', () => {
  )),
  );
  const {
- component: { findAllByTitle, getByText, findByText },
+ component: { findAllByTitle, findByTestId, getByText, findByText },
  } = await setup({
  initialValues: defaultLeaseWithTermsPayments,
  claims: [Claims.LEASE_EDIT, Claims.LEASE_ADD],
  });
  mockAxios.onPut().reply(200, { id: 1 });
 
+ const expander = await findByTestId('table-row-expander-');
+ await act(async () => userEvent.click(expander));
  const editButton = await findAllByTitle('edit actual');
  await act(async () => {
  userEvent.click(editButton[0]);
@@ -342,13 +347,15 @@ describe('TermsPaymentsContainer component', () => {
  )),
  );
  const {
- component: { findAllByTitle, getByText, findByText },
+ component: { findAllByTitle, getByText, findByText, getByTestId },
  } = await setup({
  initialValues: defaultLeaseWithTermsPayments,
  claims: [Claims.LEASE_EDIT],
  });
 
- await findByText('Jan 1, 2020');
+ await findByText('- Jan 1, 2020', { exact: false });
+ const expander = getByTestId('table-row-expander-');
+ await act(async () => userEvent.click(expander));
 
  const deleteButton = (await findAllByTitle('delete actual'))[0];
  await act(async () => userEvent.click(deleteButton));
@@ -363,13 +370,15 @@ describe('TermsPaymentsContainer component', () => {
  )),
  );
  const {
- component: { findAllByTitle, getByText, findByText },
+ component: { findAllByTitle, getByText, findByText, getByTestId },
  } = await setup({
  initialValues: defaultLeaseWithTermsPayments,
  claims: [Claims.LEASE_EDIT],
  });
  mockAxios.onDelete().reply(200, { id: 1 });
- await findByText('Jan 1, 2020');
+ await findByText('- Jan 1, 2020', { exact: false });
+ const expander = getByTestId('table-row-expander-');
+ await act(async () => userEvent.click(expander));
 
  const deleteButton = (await findAllByTitle('delete actual'))[0];
  await act(async () => userEvent.click(deleteButton));

source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/TermsPaymentsContainer.test.tsx.snap

@@ -332,34 +332,6 @@ exports[`TermsPaymentsContainer component renders as expected 1`] = `
  flex-wrap: nowrap;
 }
 
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- gap: 2rem;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- gap: 1rem;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.c7 {
- gap: 3rem;
- background-color: white;
- min-height: 6rem;
-}
-
 .c1 {
  font-weight: bold;
  border-bottom: 0.2rem solid;
@@ -680,6 +652,7 @@ exports[`TermsPaymentsContainer component renders as expected 1`] = `
  >
  <div
  class="td expander svg-btn"
+ data-testid="table-row-expander-"
  >
  <svg
  fill="currentColor"
@@ -853,58 +826,6 @@ exports[`TermsPaymentsContainer component renders as expected 1`] = `
  </div>
  </div>
  </div>
- <div
- class="collapse"
- style="padding: 10px;"
- >
- <div
- class="row"
- >
- <div
- class="c5 col-md-2"
- >
- <svg
- class="receipt"
- fill="currentColor"
- height="24"
- stroke="currentColor"
- stroke-width="0"
- viewBox="0 0 24 24"
- width="24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M0 0h24v24H0z"
- fill="none"
- />
- <path
- d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"
- />
- </svg>
- <div
- class="c6"
- >
- <b>
- Payments Sent
- </b>
- </div>
- </div>
- <div
- class="col-md-10"
- >
- <div
- class="c2 c7"
- >
- <p>
- There are no recorded payments for this term.
- </p>
- <p>
- Term must be exercised to add payments.
- </p>
- </div>
- </div>
- </div>
- </div>
  </div>
  </div>
  </div>
@@ -1066,34 +987,6 @@ exports[`TermsPaymentsContainer component renders with data as expected 1`] = `
  flex-wrap: nowrap;
 }
 
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- gap: 2rem;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- gap: 1rem;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.c7 {
- gap: 3rem;
- background-color: white;
- min-height: 6rem;
-}
-
 .c1 {
  font-weight: bold;
  border-bottom: 0.2rem solid;
@@ -1414,6 +1307,7 @@ exports[`TermsPaymentsContainer component renders with data as expected 1`] = `
  >
  <div
  class="td expander svg-btn"
+ data-testid="table-row-expander-"
  >
  <svg
  fill="currentColor"
@@ -1587,58 +1481,6 @@ exports[`TermsPaymentsContainer component renders with data as expected 1`] = `
  </div>
  </div>
  </div>
- <div
- class="collapse"
- style="padding: 10px;"
- >
- <div
- class="row"
- >
- <div
- class="c5 col-md-2"
- >
- <svg
- class="receipt"
- fill="currentColor"
- height="24"
- stroke="currentColor"
- stroke-width="0"
- viewBox="0 0 24 24"
- width="24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M0 0h24v24H0z"
- fill="none"
- />
- <path
- d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"
- />
- </svg>
- <div
- class="c6"
- >
- <b>
- Payments Sent
- </b>
- </div>
- </div>
- <div
- class="col-md-10"
- >
- <div
- class="c2 c7"
- >
- <p>
- There are no recorded payments for this term.
- </p>
- <p>
- Term must be exercised to add payments.
- </p>
- </div>
- </div>
- </div>
- </div>
  </div>
  </div>
  </div>

source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx

@@ -84,9 +84,6 @@ export const StyledTable = styled(Table)`
 export const StyledPaymentTable = styled(Table)`
  &&.table {
  width: 100%;
- .tbody {
- padding-left: 0;
- }
  .thead {
  .tr {
  .th {