feat(frontend): add reusable EmptyState component for empty pages (#6538)

Author: talissoncosta

frontend/web/components/EmptyState.tsx

@@ -0,0 +1,51 @@
+import React, { FC, ReactNode } from 'react'
+import Icon, { IconName } from './Icon'
+
+type EmptyStateProps = {
+  title: string
+  description?: string | ReactNode
+  icon?: IconName
+  iconColour?: string
+  docsUrl?: string
+  docsLabel?: string
+  action?: ReactNode
+  className?: string
+}
+
+const EmptyState: FC<EmptyStateProps> = ({
+  action,
+  className,
+  description,
+  docsLabel = 'View docs',
+  docsUrl,
+  icon,
+  iconColour = '#9DA4AE',
+  title,
+}) => {
+  return (
+    <div className={`empty-state ${className || ''}`}>
+      {icon && (
+        <div className='empty-state__icon'>
+          <Icon name={icon} width={40} fill={iconColour} />
+        </div>
+      )}
+      <h5 className='empty-state__title'>{title}</h5>
+      {description && (
+        <div className='empty-state__description text-muted'>{description}</div>
+      )}
+      {docsUrl && (
+        <a
+          href={docsUrl}
+          target='_blank'
+          rel='noreferrer'
+          className='btn btn-link'
+        >
+          {docsLabel}
+        </a>
+      )}
+      {action}
+    </div>
+  )
+}
+
+export default EmptyState

frontend/web/components/pages/ScheduledChangesPage.tsx

@@ -13,6 +13,7 @@ import PlanBasedBanner, {
   featureDescriptions,
 } from 'components/PlanBasedAccess'
 import PanelSearch from 'components/PanelSearch'
+import EmptyState from 'components/EmptyState'
 import JSONReference from 'components/JSONReference'
 import Icon from 'components/Icon'
 import getUserDisplayName from 'common/utils/getUserDisplayName'
@@ -83,6 +84,14 @@ const ScheduledChangesPage: FC<ScheduledChangesPageType> = ({ match }) => {
                 isLoading={isLoading || !dataScheduled || !organisation}
                 paging={dataScheduled}
                 items={dataScheduled?.results}
+                renderNoResults={
+                  <EmptyState
+                    icon='calendar'
+                    title='No scheduled changes'
+                    description='To schedule a change, edit a feature flag and use the "Schedule" option when saving your changes.'
+                    docsUrl={featureDescriptions.SCHEDULE_FLAGS.docs}
+                  />
+                }
                 renderFooter={() => (
                   <JSONReference
                     className='mt-4 ml-3'

frontend/web/styles/components/_empty-state.scss

@@ -0,0 +1,17 @@
+.empty-state {
+  text-align: center;
+  padding: 2rem 1rem;
+
+  &__icon {
+    margin-bottom: 1rem;
+  }
+
+  &__title {
+    margin-bottom: 0.5rem;
+  }
+
+  &__description {
+    max-width: 400px;
+    margin: 0 auto 1rem;
+  }
+}

frontend/web/styles/components/_index.scss

@@ -16,3 +16,4 @@
 @import 'feature-pipeline-status';
 @import 'button-dropdown';
 @import 'feature-row-skeleton';
+@import 'empty-state';