LicenseSubPanel.tsx

// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
//
// SPDX-License-Identifier: Apache-2.0
import MuiBox from '@mui/material/Box';
import { sortBy } from 'lodash';
import { useMemo } from 'react';

import { PackageInfo } from '../../../../shared/shared-types';
import { text } from '../../../../shared/text';
import { setTemporaryDisplayPackageInfo } from '../../../state/actions/resource-actions/all-views-simple-actions';
import { useAppDispatch, useAppSelector } from '../../../state/hooks';
import {
  getFrequentLicensesNameOrder,
  getFrequentLicensesTexts,
} from '../../../state/selectors/resource-selectors';
import { Confirm } from '../../ConfirmationDialog/ConfirmationDialog';
import { TextBox } from '../../TextBox/TextBox';
import { AttributionFormConfig } from '../AttributionForm';
import { PackageAutocomplete } from '../PackageAutocomplete/PackageAutocomplete';

const classes = {
  licenseText: {
    marginTop: '12px',
  },
  endAdornment: {
    paddingRight: '6px',
    paddingTop: '2px',
  },
};

interface LicenseSubPanelProps {
  packageInfo: PackageInfo;
  showHighlight?: boolean;
  onEdit?: Confirm;
  expanded?: boolean;
  hidden?: boolean;
  config?: AttributionFormConfig;
}

export function LicenseSubPanel({
  packageInfo,
  showHighlight,
  onEdit,
  expanded,
  hidden,
  config,
}: LicenseSubPanelProps) {
  const dispatch = useAppDispatch();
  const frequentLicenseTexts = useAppSelector(getFrequentLicensesTexts);
  const frequentLicensesNames = useAppSelector(getFrequentLicensesNameOrder);
  const defaultLicenses = useMemo(
    () =>
      sortBy(
        frequentLicensesNames.map<PackageInfo>(({ fullName, shortName }) => ({
          id: shortName,
          licenseName: fullName,
          source: {
            name: text.attributionColumn.commonLicenses,
          },
          suffix: `(${shortName})`,
        })),
        ({ licenseName }) => licenseName?.toLowerCase(),
      ),
    [frequentLicensesNames],
  );

  const defaultLicenseText = packageInfo.licenseText
    ? undefined
    : frequentLicenseTexts[packageInfo.licenseName || ''];

  return hidden ? null : (
    <MuiBox>
      <PackageAutocomplete
        attribute={'licenseName'}
        title={text.attributionColumn.licenseName}
        packageInfo={packageInfo}
        readOnly={!onEdit}
        showHighlight={showHighlight}
        onEdit={onEdit}
        endAdornment={config?.licenseName?.endIcon}
        defaults={defaultLicenses}
        color={config?.licenseName?.color}
        focused={config?.licenseName?.focused}
      />
      <TextBox
        readOnly={!onEdit}
        placeholder={defaultLicenseText}
        sx={classes.licenseText}
        maxRows={8}
        minRows={3}
        color={config?.licenseText?.color}
        focused={config?.licenseText?.focused}
        multiline
        expanded={expanded}
        title={
          defaultLicenseText
            ? text.attributionColumn.licenseTextDefault
            : text.attributionColumn.licenseText
        }
        text={packageInfo.licenseText}
        handleChange={({ target: { value } }) =>
          onEdit?.(() =>
            dispatch(
              setTemporaryDisplayPackageInfo({
                ...packageInfo,
                licenseText: value,
                wasPreferred: undefined,
              }),
            ),
          )
        }
        endIcon={config?.licenseText?.endIcon}
      />
    </MuiBox>
  );
}