fix(ui/datatables): make empty table label consistent [EE-6499] (#11612)

2025-07-22 06:49:40 +02:00 · 2024-06-02 12:29:20 +03:00 · 2024-06-02 12:29:20 +03:00 · b7cde35c3d
commit b7cde35c3d
parent 02fbdfec36
56 changed files with 45 additions and 93 deletions
--- a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx
@ -55,7 +55,6 @@ export function ApplicationContainersDatatable() {
        podsQuery.isLoading ||
        useServerMetricsQuery.isLoading
      }
-      emptyContentLabel="No containers found"
      title="Application containers"
      titleIcon={Server}
      getRowId={(row) => row.podName} // use pod name because it's unique (name is not unique)
--- a/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx
@ -64,7 +64,6 @@ export function PlacementsDatatable({
          />
        </TableSettingsMenu>
      )}
-      emptyContentLabel="No node available."
      renderSubRow={(row) => (
        <SubRow node={row.original} cellCount={row.getVisibleCells().length} />
      )}
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
@ -70,7 +70,6 @@ export function ApplicationsStacksDatatable({
        <SubRows stack={row.original} span={row.getVisibleCells().length} />
      )}
      noWidget
-      emptyContentLabel="No stack available."
      description={
        <div className="w-full">
          <div className="float-right mr-2 min-w-[140px]">
--- a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/ConfigureForm.tsx
+++ b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/ConfigureForm.tsx
@ -180,8 +180,8 @@ function InnerForm({
            values={values.ingressClasses}
            initialValues={initialValues.ingressClasses}
            isLoading={isIngressClassesLoading}
-            noIngressControllerLabel="No supported ingress controllers found."
            view="cluster"
+            noIngressControllerLabel="No supported ingress controllers found."
          />
          <div className="form-group">
            <div className="col-sm-12">
--- a/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx
+++ b/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx
@ -53,7 +53,6 @@ export function NodesDatatable() {
        kubernetesEndpointsQuery.isLoading ||
        environmentQuery.isLoading
      }
-      emptyContentLabel="No Nodes found"
      title="Nodes"
      titleIcon={HardDrive}
      getRowId={(row) => row.metadata?.uid ?? ''}
--- a/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
+++ b/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
@ -35,7 +35,6 @@ export function AccessTable({
      titleIcon={UserX}
      dataset={dataset}
      columns={columns}
-      emptyContentLabel="No namespace has been authorized yet."
      settingsManager={tableState}
      renderTableActions={(selectedItems) => (
        <DeleteButton
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
@ -23,7 +23,7 @@ interface Props {
  initialValues: IngressControllerClassMap[] | undefined;
  isLoading: boolean;
  noIngressControllerLabel: string;
-  view: string;
+  view: 'namespace' | 'cluster';
 }

 export function IngressClassDatatable({
@ -44,7 +44,6 @@ export function IngressClassDatatable({
        dataset={values || []}
        columns={columns}
        isLoading={isLoading}
-        emptyContentLabel={noIngressControllerLabel}
        title="Ingress Controllers"
        titleIcon={Route}
        getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
@ -94,11 +93,18 @@ export function IngressClassDatatable({

  function renderIngressClassDescription() {
    return (
-      <div className="text-muted flex w-full flex-col !text-xs">
-        <div className="mt-1">{description}</div>
-        {initialValues && values && isUnsavedChanges(initialValues, values) && (
-          <TextTip>Unsaved changes.</TextTip>
+      <div className="flex flex-col gap-3">
+        {!isLoading && values && values.length === 0 && (
+          <TextTip>{noIngressControllerLabel}</TextTip>
        )}
+        <div className="text-muted flex w-full flex-col !text-xs">
+          <div className="mt-1">{description}</div>
+          {initialValues &&
+            values &&
+            isUnsavedChanges(initialValues, values) && (
+              <TextTip>Unsaved changes.</TextTip>
+            )}
+        </div>
      </div>
    );
  }
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx
@ -27,7 +27,6 @@ interface Props {
  initialIngressControllers: IngressControllerClassMap[] | undefined;
  allowNoneIngressClass: boolean;
  isLoading: boolean;
-  noIngressControllerLabel: string;
  view: string;
 }

@ -40,7 +39,6 @@ export function IngressClassDatatableAngular({
  ingressControllers,
  allowNoneIngressClass,
  isLoading,
-  noIngressControllerLabel,
  view,
 }: Props) {
  const tableState = useTableState(settingsStore, storageKey);
@ -99,7 +97,6 @@ export function IngressClassDatatableAngular({
        dataset={ingControllerFormValues || []}
        columns={columns}
        isLoading={isLoading}
-        emptyContentLabel={noIngressControllerLabel}
        title="Ingress Controllers"
        titleIcon={Route}
        getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
--- a/app/react/kubernetes/components/EventsDatatable/EventsDatatable.tsx
+++ b/app/react/kubernetes/components/EventsDatatable/EventsDatatable.tsx
@ -31,7 +31,6 @@ export function EventsDatatable({
      columns={columns}
      settingsManager={tableState}
      isLoading={isLoading}
-      emptyContentLabel="No event available."
      title="Events"
      titleIcon={History}
      getRowId={(row) => row.metadata?.uid || ''}
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
@ -104,7 +104,6 @@ export function ConfigMapsDatatable() {
      columns={columns}
      settingsManager={tableState}
      isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
-      emptyContentLabel="No ConfigMaps found"
      title="ConfigMaps"
      titleIcon={FileCode}
      getRowId={(row) => row.metadata?.uid ?? ''}
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
@ -104,7 +104,6 @@ export function SecretsDatatable() {
      columns={columns}
      settingsManager={tableState}
      isLoading={secretsQuery.isLoading || namespacesQuery.isLoading}
-      emptyContentLabel="No secrets found"
      title="Secrets"
      titleIcon={Lock}
      getRowId={(row) => row.metadata?.uid ?? ''}
--- a/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
@ -89,7 +89,6 @@ export function IngressDatatable() {
      dataset={ingressesWithIsSystem}
      columns={columns}
      isLoading={ingressesQuery.isLoading || namespacesQuery.isLoading}
-      emptyContentLabel="No supported ingresses found"
      title="Ingresses"
      titleIcon={Route}
      getRowId={(row) => row.Name + row.Type + row.Namespace}
--- a/app/react/kubernetes/namespaces/components/NamespaceInnerForm.tsx
+++ b/app/react/kubernetes/namespaces/components/NamespaceInnerForm.tsx
@ -83,10 +83,10 @@ export function NamespaceInnerForm({
            onChange={(classes) => setFieldValue('ingressClasses', classes)}
            values={values.ingressClasses}
            description="Enable the ingress controllers that users can select when publishing applications in this namespace."
-            noIngressControllerLabel="No ingress controllers available in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster."
            view="namespace"
            isLoading={ingressClassesQuery.isLoading}
            initialValues={initialValues.ingressClasses}
+            noIngressControllerLabel="No ingress controllers available in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster."
          />
        </FormSection>
      )}
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx
@ -84,7 +84,6 @@ export function ServicesDatatable() {
      columns={columns}
      settingsManager={tableState}
      isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
-      emptyContentLabel="No services found"
      title="Services"
      titleIcon={Shuffle}
      getRowId={(row) => row.UID}