chore(NonIdealState): refactored non ideal state component to a functional component

[ahmadJT]

Fixes #6289

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

• refactor non ideal state component to a functional component

Reviewers should focus on:

• NonIdealState component

Screenshot

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

chore(NonIdealState): refactored non ideal state component to a functional component

Check the box to generate changelog(s)

• Generate changelog entry

[ggdouglas]

This is almost ready; requesting a few minor stylistic and one functional change.

[ggdouglas]

Can we destructure these inside of the function body rather than in the arguments? I think this is more in line with the structure we use for other functional components that have multiline props in Blueprint.

export const NonIdealState: React.FC<NonIdealStateProps> = props => {
    const {
        action,
        children,
        className,
        description,
        icon,
        iconMuted = true,
        iconSize = NonIdealStateIconSize.STANDARD,
        layout = "vertical",
        title,
    } = props;
    // ...
}

[ggdouglas]

Instead of keeping these as inline functions, can we encapsulate the conditional in a couple variables, say:

const shouldRenderVisual = icon != null;
const shouldRenderText = title != null || description != null;

and then inline them below:

<div className={classNames(Classes.NON_IDEAL_STATE, `${Classes.NON_IDEAL_STATE}-${layout}`, className)}>
    {shouldRenderVisual && (
        <div
            className={Classes.NON_IDEAL_STATE_VISUAL}
            style={{ fontSize: `${iconSize}px`, lineHeight: `${iconSize}px` }}
        >
            <Icon
                className={classNames({ [Classes.ICON_MUTED]: iconMuted })}
                icon={icon}
                size={iconSize}
                aria-hidden={true}
                tabIndex={-1}
            />
        </div>
    )}
    {shouldRenderText && (
        <div className={Classes.NON_IDEAL_STATE_TEXT}>
            {title && <H4>{title}</H4>}
            {description && ensureElement(description, "div")}
        </div>
    )}
    {action}
    {children}
</div>

I think this would improve the code clarity a bit, and it precludes having to make additional unnecessary function calls.

[ggdouglas]

I believe the logic here should be:

!!title || !!description

Otherwise, the text will only render only if both title and description are set. Having just a title and no description (or vice versa) is a valid configuration for this component.

Better yet, can we be a bit more explicit with our operators here? (since this is TypeScript)

title != null || description != null