function TableDetailsComponent()

in src/Components/TableDetailsComponent.js [29:97]
66 lines of code
7 McCabe index (conditional complexity)

function TableDetailsComponent(props) {
    const {dbname, tablename} = useParams();
    const [table, setTable] = useState();
    const [tableNotFound, setTableNotFound] = useState(false);
    const [requestSuccessful, setRequestSuccessful] = useState(false);
    const [executionArn, setExecutionArn] = useState();

    const requestAccessSuccessHandler = async(executionArn) => {
        setExecutionArn(executionArn);
        setRequestSuccessful(true);
    }

    useEffect(async() => {
        const credentials = await Auth.currentCredentials();
        const glueClient = new GlueClient({region: config.aws_project_region, credentials: Auth.essentialCredentials(credentials)});
        try {
            const response = await glueClient.send(new GetTableCommand({DatabaseName: dbname, Name: tablename}));
            const table = response.Table;
            setTable(table);
        } catch (e) {
            setTableNotFound(true);
        }
    }, []);

    if (tableNotFound) {
        return <Flashbar items={[{header: "Invalid Request", type: "error", content: "There's no table found for the given parameter."}]} />;
    } else if (table) {
        return (
            <div>
                <BreadcrumbGroup items={[
                            { text: "Databases", href: "/"},
                            { text: dbname, href: "/tables/"+dbname },
                            { text: "Request Access ("+tablename+")", href: "/request-access/"+dbname+"/"+tablename }
                        ]} />
                <Box margin={{top: "s", bottom: "s"}} display={requestSuccessful ? "block" : "none"}>
                    <Flashbar items={[{type: "success", header: "Request Submitted ("+executionArn+")", content: "Successfully submitted request, once approved please accept RAM request."}]}></Flashbar>
                </Box>
                <DatabaseDetailsComponent dbName={dbname} />
                <Box margin={{top: "l"}}>
                    <Container header={<Header variant="h2">Table Details</Header>}>
                        <ColumnLayout columns={2} variant="text-grid">
                            <SpaceBetween size="m">
                                <ValueWithLabel label="Table">
                                    {tablename}
                                </ValueWithLabel>
                            </SpaceBetween>
                            <SpaceBetween size="m">
                                <ValueWithLabel label="Location">
                                    {table.StorageDescriptor.Location}
                                </ValueWithLabel>
                            </SpaceBetween>
                        </ColumnLayout>
                    </Container>
                </Box>
                <Box margin={{top: "m"}}>
                    <Table header={<Header variant="h3">Columns</Header>} items={table.StorageDescriptor.Columns} columnDefinitions={[
                        {
                            header: "Name",
                            cell: item => item.Name
                        },
                        {
                            header: "Type",
                            cell: item => item.Type
                        },
                        {
                            header: "Is PII",
                            cell: item => (item.Parameters && "pii_flag" in item.Parameters && item.Parameters.pii_flag === "true") ? <Badge color="red">Yes</Badge> : <Badge color="green">No</Badge>
                        }
                    ]} />