renderRelationships()

in src/plugins/saved_objects_management/public/management_section/objects_table/components/relationships.tsx [126:333]

• 202 lines of code
• 11 McCabe index (conditional complexity)

  renderRelationships() {
    const { goInspectObject, savedObject, basePath } = this.props;
    const { relationships, isLoading, error } = this.state;

    if (error) {
      return this.renderError();
    }

    if (isLoading) {
      return <EuiLoadingSpinner size="xl" />;
    }

    const columns = [
      {
        field: 'type',
        name: i18n.translate('savedObjectsManagement.objectsTable.relationships.columnTypeName', {
          defaultMessage: 'Type',
        }),
        width: '50px',
        align: 'center',
        description: i18n.translate(
          'savedObjectsManagement.objectsTable.relationships.columnTypeDescription',
          { defaultMessage: 'Type of the saved object' }
        ),
        sortable: false,
        render: (type: string, object: SavedObjectWithMetadata) => {
          return (
            <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
              <EuiIcon
                aria-label={getSavedObjectLabel(type)}
                type={object.meta.icon || 'apps'}
                size="s"
                data-test-subj="relationshipsObjectType"
              />
            </EuiToolTip>
          );
        },
      },
      {
        field: 'relationship',
        name: i18n.translate(
          'savedObjectsManagement.objectsTable.relationships.columnRelationshipName',
          { defaultMessage: 'Direct relationship' }
        ),
        dataType: 'string',
        sortable: false,
        width: '125px',
        'data-test-subj': 'directRelationship',
        render: (relationship: string) => {
          if (relationship === 'parent') {
            return (
              <EuiText size="s">
                <FormattedMessage
                  id="savedObjectsManagement.objectsTable.relationships.columnRelationship.parentAsValue"
                  defaultMessage="Parent"
                />
              </EuiText>
            );
          }
          if (relationship === 'child') {
            return (
              <EuiText size="s">
                <FormattedMessage
                  id="savedObjectsManagement.objectsTable.relationships.columnRelationship.childAsValue"
                  defaultMessage="Child"
                />
              </EuiText>
            );
          }
        },
      },
      {
        field: 'meta.title',
        name: i18n.translate('savedObjectsManagement.objectsTable.relationships.columnTitleName', {
          defaultMessage: 'Title',
        }),
        description: i18n.translate(
          'savedObjectsManagement.objectsTable.relationships.columnTitleDescription',
          { defaultMessage: 'Title of the saved object' }
        ),
        dataType: 'string',
        sortable: false,
        render: (title: string, object: SavedObjectWithMetadata) => {
          const { path = '' } = object.meta.inAppUrl || {};
          const canGoInApp = this.props.canGoInApp(object);
          if (!canGoInApp) {
            return (
              <EuiText size="s" data-test-subj="relationshipsTitle">
                {title || getDefaultTitle(object)}
              </EuiText>
            );
          }
          return (
            <EuiLink href={basePath.prepend(path)} data-test-subj="relationshipsTitle">
              {title || getDefaultTitle(object)}
            </EuiLink>
          );
        },
      },
      {
        name: i18n.translate(
          'savedObjectsManagement.objectsTable.relationships.columnActionsName',
          { defaultMessage: 'Actions' }
        ),
        actions: [
          {
            name: i18n.translate(
              'savedObjectsManagement.objectsTable.relationships.columnActions.inspectActionName',
              { defaultMessage: 'Inspect' }
            ),
            description: i18n.translate(
              'savedObjectsManagement.objectsTable.relationships.columnActions.inspectActionDescription',
              { defaultMessage: 'Inspect this saved object' }
            ),
            type: 'icon',
            icon: 'inspect',
            'data-test-subj': 'relationshipsTableAction-inspect',
            onClick: (object: SavedObjectWithMetadata) => goInspectObject(object),
            available: (object: SavedObjectWithMetadata) => !!object.meta.editUrl,
          },
        ],
      },
    ];

    const filterTypesMap = new Map(
      relationships.map((relationship) => [
        relationship.type,
        {
          value: relationship.type,
          name: relationship.type,
          view: relationship.type,
        },
      ])
    );

    const search = {
      filters: [
        {
          type: 'field_value_selection',
          field: 'relationship',
          name: i18n.translate(
            'savedObjectsManagement.objectsTable.relationships.search.filters.relationship.name',
            { defaultMessage: 'Direct relationship' }
          ),
          multiSelect: 'or',
          options: [
            {
              value: 'parent',
              name: 'parent',
              view: i18n.translate(
                'savedObjectsManagement.objectsTable.relationships.search.filters.relationship.parentAsValue.view',
                { defaultMessage: 'Parent' }
              ),
            },
            {
              value: 'child',
              name: 'child',
              view: i18n.translate(
                'savedObjectsManagement.objectsTable.relationships.search.filters.relationship.childAsValue.view',
                { defaultMessage: 'Child' }
              ),
            },
          ],
        },
        {
          type: 'field_value_selection',
          field: 'type',
          name: i18n.translate(
            'savedObjectsManagement.objectsTable.relationships.search.filters.type.name',
            { defaultMessage: 'Type' }
          ),
          multiSelect: 'or',
          options: [...filterTypesMap.values()],
        },
      ] as SearchFilterConfig[],
    };

    return (
      <div>
        <EuiCallOut>
          <p>
            {i18n.translate(
              'savedObjectsManagement.objectsTable.relationships.relationshipsTitle',
              {
                defaultMessage:
                  'Here are the saved objects related to {title}. ' +
                  'Deleting this {type} affects its parent objects, but not its children.',
                values: {
                  type: savedObject.type,
                  title: savedObject.meta.title || getDefaultTitle(savedObject),
                },
              }
            )}
          </p>
        </EuiCallOut>
        <EuiSpacer />
        <EuiInMemoryTable
          items={relationships}
          columns={columns as any}
          pagination={true}
          search={search}
          rowProps={() => ({
            'data-test-subj': `relationshipsTableRow`,
          })}
        />
      </div>
    );
  }