function searchForm()

in src/components/search/Search.tsx [218:299]
82 lines of code
1 McCabe index (conditional complexity)

  function searchForm() {
    return (
      <Box margin={{ bottom: "l" }} padding="l">
        <CustomBreadCrumb items={[{ text: "Search", href: "/search" }]} />
        <Container
          header={
            <Header
              className="leftPadded"
              variant="h2"
              actions={
                <SpaceBetween direction="horizontal" size="xl">
                  <Button
                    loading={isSearching}
                    variant="primary"
                    disabled={!isResourceTypeValid}
                    onClick={async () => {
                      const result = await searchResource();
                      setApiResponse(result);
                    }}
                  >
                    Search
                  </Button>
                </SpaceBetween>
              }
            >
              Search FHIR Resource
            </Header>
          }
        >
          <FormField
            description=""
            label="Resource Type"
            className="inputObjectFormField"
          >
            <ResourceTypeAutosuggest
              setResourceType={setResourceType}
              resourceType={resourceType}
              isResourceTypeValid={isResourceTypeValid}
            />
          </FormField>
          {/*Could also choose to use Attribute Editor*/}
          <h3>Search Parameters</h3>
          <TagEditor
            i18nStrings={enUS}
            tags={searchParams}
            onChange={(event) => {
              setSearchParams(event.detail.tags);
            }}
            keysRequest={(key) => {
              return Promise.resolve(getSearchParamKeys()[resourceType]);
            }}
            className="searchParamsFormField"
            tagLimit={maxSearchParamLimit}
          />
          <h3>Includes</h3>
          <Multiselect
            selectedOptions={selectedIncludeOptions}
            onChange={(event) => {
              setSelectedIncludeOptions(event.detail.selectedOptions);
            }}
            options={allIncludeOptions}
            filteringType="auto"
            placeholder="Choose a include parameter"
            selectedAriaLabel="Selected"
            disabled={!isResourceTypeValid}
          />
          <h3>Reverse Includes</h3>
          <Multiselect
            selectedOptions={selectedRevIncludeOptions}
            onChange={(event) => {
              setSelectedRevIncludeOptions(event.detail.selectedOptions);
            }}
            options={allRevIncludeOptions}
            filteringType="auto"
            placeholder="Choose a reverse include parameter"
            selectedAriaLabel="Selected"
            disabled={!isResourceTypeValid}
          />
        </Container>
      </Box>
    );
  }