Create a new partial

⚠️ Warning: This is WIP - See this PR for details.

What are partials?

In the Scout Suite Web Report, a "Partial" refers to the displayed information for a particular resource. For example, a AWS s3 Bucket is considered to be a resource and the partial would define the information to display for this resource.

Create a new partial

Creating a new partial is pretty straightforward but it's very important to understand how to name the partial and how to read to access the informations.

To make it as easy as possible, all the logic to access the information and highlight the errors is handled outside of the partial. You can read more about the web report architecture to learn how it works.

1. How to name the partial?

This is the most important step. Partials are dynamically loaded (loaded at runtime) based on information given by the server. If the information doesn't match, the partial won't be loaded.

2. Creating a partial

We suggest you start by using of the examples below depending on your needs. These basic examples should cover most of the use-cases.

Information only partial

import React from 'react';

import { PartialValue } from '../../../components/Partial';

const PartialName = () => {
  return (
    <>
        <PartialValue
          label="Name"
          valuePath="name" />
        <PartialValue
          label="Name"
          valuePath="name" />
    </>
  );
};

export default PartialName;

Partial with tabs

import React from 'react';

import { PartialValue } from '../../../components/Partial';
import { TabsMenu, TabPane } from '../../../components/Tabs';
import { renderList } from '../../../utils/Partials/index';
import InformationsWrapper from '../../../components/InformationsWrapper';

const PartialName = () => {
  return (
    <>
      <InformationsWrapper>
        <PartialValue
          label="Name"
          valuePath="name" />
      </InformationsWrapper>

      <TabsMenu>
        <TabPane title="Tabe Name #1">
          <PartialValue
            label="Roles"
            valuePath="roles"
            renderValue={renderList} />
        </TabPane>
        <TabPane title="Tabe Name #2">
          <PartialValue
            label="User"
            valuePath="user" />
        </TabPane>
      </TabsMenu>
    </>
  );
};

export default PartialName;

Add a single value

<PartialValue
  label="Name" # Required
  valuePath="name" # Required
  errorPath="name" # Optional
  renderValue={convertBoolToEnable} # Optional
/>

Add a list

Simple list

Converting objects to lists

Complex lists

Add a section