How to use the @patternfly/react-core.EmptyStateVariant.full function in @patternfly/react-core

);
      }
      if (this.state.istioObjectDetails.destinationRule) {
        return (
          
        );
      }
    } else {
      // In theory it shouldn't enter here, but we show a nice error page anyway.

      return (
        
          
          <title size="{TitleSize.lg}">
            Error loading object {this.props.match.params.object}
          </title>
          
            This might mean the resource is not ready yet or has been deleted and the cluster has not finished
            propagating the changes.
          
        
      );
    }
  };

render() {
    return (
      
        
          Skip to content
          
          
            
              
                <img alt="" src="{congratulationsImage}">
                <title id="main-content" size="lg">
                  Congratulations, you completed the Solution Pattern!
                </title>
                
                  Return to your homepage to explore more Solution Patterns or go to your OpenShift console to utilize
                  what you just built!
                
                <button id="congratulations-button"> this.exitTutorial(e)}&gt;
                  Return to home
                </button>{' '}

const ReceiversEmptyState: React.FC = () => (
  
    <title size="lg">No Receivers Found</title>
    
      Create a receiver to get OpenShift alerts through other services such as email or a chat
      platform. The first receiver you create will become the default receiver and will
      automatically receive all alerts from this cluster. Subsequent receivers can have specific
      sets of alerts routed to them.
    
  
);

}) => {
  if (isLoading && !hasLoadError) {
    return ;
  }
  if (!capacityUsed || !top5MetricsStats.length || hasLoadError) {
    return (
      
        <title size="sm">
          Not available.
        </title>
      
    );
  }
  if (capacityUsed === '0') {
    return (
      
        <title size="sm">
          Not enough usage data
        </title>
      
    );
  }

  const available = getCapacityValue(capacityUsed, capacityTotal, humanize);
  const usedCapacity = `${humanize(capacityUsed, null, 'GiB').string} used${
    capacityTotal ? ` of ${humanize(capacityTotal).string}` : ''
  }`;
  const availableCapacity = `${available.string} available`;

  const chartData = addAvailable(
    top5MetricsStats,
    capacityTotal,

noDestinationRules(): IRow[] {
    return [
      {
        cells: [
          {
            title: (
              
                
                <title size="lg">
                  No Destination Rules {!this.props.service.istioSidecar &amp;&amp; ' and Istio Sidecar '} found
                </title>
                
                  No Destination Rules {!this.props.service.istioSidecar &amp;&amp; ' and istioSidecar '} found for service{' '}
                  {this.props.service.service.name}
                
              
            ),
            props: { colSpan: 8 }
          }
        ]
      }
    ];
  }

render() {
    const baseDate = moment('2018-01-01T00:00').startOf('week').toDate();
    const { t } = this.props;
    if (this.props.rosterState === null || this.props.isLoading || this.props.spotList.length <= 0
      || this.state.shownSpot === null || !this.props.tReady) {
      return (
        
          
          ,
              ,
              <button aria-label="Spots Page"> this.props.history.push('/spots')}
              /&gt;
            ]}
          /&gt;
        </button>

{props.hasListData ? (
        <>
          
            {props.i18nLinkCreateConnection}
          
          <div>
            {props.children}
          </div>
        
      ) : (
        
          <title size="lg">
            {props.i18nEmptyStateTitle}
          </title>
          {props.i18nEmptyStateInfo}
          
            {props.i18nLinkCreateConnection}
          
        
      )}

private renderNotFound(collectionName) {
        return (
            
                
                <title size="lg">
                    Not found
                </title>
                
                    The file you're looking for doesn't seem to be available in
                    this version of {collectionName}.
                
            
        );
    }

export const BootOrderEmpty: React.FC = ({
  title,
  message,
  addItemMessage,
  addItemIsDisabled,
  addItemDisabledMessage,
  onClick,
}) => (
  
    <title size="lg">
      {title}
    </title>
    {message}
    {!addItemIsDisabled ? (
      <button>
        {addItemMessage}
      </button>
    ) : (
      
    )}

/>
          
          {isBootDiskRequired && (
            <footer>
              
            </footer>
          )}
        
      )}
      {!showStorages &amp;&amp; (
        
          
            <title size="lg">
              No disks attached
            </title>
            <button>} variant={ButtonVariant.link}&gt;
              {ADD_DISK}
            </button>
          
        
      )}
    
  );
};