fix(ui/labels): update empty state for no labels (#12521)

ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx

@@ -85,7 +85,8 @@ class InlineLabelsEditor extends Component<Props, State> {
     const {labels, selectedLabels} = this.props
     const {searchTerm, isPopoverVisible, selectedItemID} = this.state
 
-    const labelsUsed = labels.length === selectedLabels.length
+    const labelsUsed =
+      labels.length > 0 && labels.length === selectedLabels.length
 
     if (isPopoverVisible) {
       return (

ui/src/shared/components/inlineLabels/InlineLabelsList.tsx

@@ -46,6 +46,7 @@ class InlineLabelsList extends Component<Props> {
       onUpdateSelectedItem,
       selectedItemID,
       allLabelsUsed,
+      searchTerm,
     } = this.props
 
     if (filteredLabels.length) {
@@ -70,6 +71,14 @@ class InlineLabelsList extends Component<Props> {
         </EmptyState>
       )
     }
+
+    if (!searchTerm) {
+      return (
+        <EmptyState size={ComponentSize.Small}>
+          <EmptyState.Text text="Type to create your first label" />
+        </EmptyState>
+      )
+    }
   }
 
   private get createNewLabelButton(): JSX.Element {