From 0114d5ea3b4b72e76854be1b0d0c7f9e061dfaf6 Mon Sep 17 00:00:00 2001
From: Gilad Lekner <gilad215@gmail.com>
Date: Tue, 5 Jul 2022 15:02:25 +0300
Subject: [PATCH] add initial dataimportcron details page

---
 console-extensions.json                       |  11 ++
 locales/en/plugin__kubevirt-plugin.json       |   5 +-
 package.json                                  |   1 +
 .../details/DataImportCronDetailsGrid.tsx     | 145 ++++++++++++++++++
 .../details/DataImportCronDetailsPage.tsx     |  45 ++++++
 .../details/DataImportCronPage.tsx            |  57 +++++++
 .../details/DataImportCronPageTitle.tsx       |  51 ++++++
 .../details/DataImportCronYamlPage.tsx        |  31 ++++
 .../DataSourceDetailsGrid.tsx                 |   4 +-
 .../DataSourceImportCronDescription.tsx}      |   8 +-
 .../datasources/list/DataSourcesList.tsx      |   8 +-
 11 files changed, 358 insertions(+), 8 deletions(-)
 create mode 100644 src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.tsx
 create mode 100644 src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.tsx
 create mode 100644 src/views/datasources/dataimportcron/details/DataImportCronPage.tsx
 create mode 100644 src/views/datasources/dataimportcron/details/DataImportCronPageTitle.tsx
 create mode 100644 src/views/datasources/dataimportcron/details/DataImportCronYamlPage.tsx
 rename src/views/datasources/details/components/{DataSourceManagedByDescription/DataSourceManagedByDescription.tsx => DataSourceImportCronDescription/DataSourceImportCronDescription.tsx} (83%)

diff --git a/console-extensions.json b/console-extensions.json
index d0f18b5407..6234deffef 100644
--- a/console-extensions.json
+++ b/console-extensions.json
@@ -307,5 +307,16 @@
       },
       "component": { "$codeRef": "DataSourcesList" }
     }
+  },
+  {
+    "type": "console.page/resource/details",
+    "properties": {
+      "model": {
+        "group": "cdi.kubevirt.io",
+        "kind": "DataImportCron",
+        "version": "v1beta1"
+      },
+      "component": { "$codeRef": "DataImportCronPage" }
+    }
   }
 ]
diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json
index 99b7adf5fb..b89756ce4d 100644
--- a/locales/en/plugin__kubevirt-plugin.json
+++ b/locales/en/plugin__kubevirt-plugin.json
@@ -202,6 +202,7 @@
   "Create a new blank PVC": "Create a new blank PVC",
   "Create a new custom Template": "Create a new custom Template",
   "Create an empty disk.": "Create an empty disk.",
+  "Create DataSource": "Create DataSource",
   "Create new secret": "Create new secret",
   "Create new sysprep": "Create new sysprep",
   "Create new VirtualMachine from catalog": "Create new VirtualMachine from catalog",
@@ -221,7 +222,10 @@
   "Customize": "Customize",
   "Customize VirtualMachine": "Customize VirtualMachine",
   "Data Volume failed to initiate upload.": "Data Volume failed to initiate upload.",
+  "DataImportCron": "DataImportCron",
   "DataImportCron available": "DataImportCron available",
+  "DataImportCron Details": "DataImportCron Details",
+  "DataImportCrons": "DataImportCrons",
   "DataSource details": "DataSource details",
   "DataSource Details": "DataSource Details",
   "DataSources": "DataSources",
@@ -415,7 +419,6 @@
   "MAC Address": "MAC Address",
   "Machine type": "Machine type",
   "Make sure to have clone permissions in the destination namespace. <2>Learn more <1></1></2>": "Make sure to have clone permissions in the destination namespace. <2>Learn more <1></1></2>",
-  "Managed by": "Managed by",
   "Manual Connection": "Manual Connection",
   "Map of string keys and values that can be used to organize and categorize (scope and select) objects": "Map of string keys and values that can be used to organize and categorize (scope and select) objects",
   "Map of string keys and values that can be used to organize and categorize (scope and select) objects. May match selectors of replication controllers and services. ": "Map of string keys and values that can be used to organize and categorize (scope and select) objects. May match selectors of replication controllers and services. ",
diff --git a/package.json b/package.json
index 2b4ffbab1e..0908ceb259 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
       "VirtualMachineNavPage": "./views/virtualmachines/details/VirtualMachineNavPage.tsx",
       "DataSourcesList": "./views/datasources/list/DataSourcesList.tsx",
       "DataSourcePage": "./views/datasources/details/DataSourcePage.tsx",
+      "DataImportCronPage": "./views/datasources/dataimportcron/details/DataImportCronPage.tsx",
       "VirtualMachinesInstancePage": "./views/virtualmachinesinstance/details/VirtualMachinesInstancePage.tsx",
       "useVirtualMachineActionsProvider": "./views/virtualmachines/actions/hooks/useVirtualMachineActionsProvider.ts",
       "VirtualMachinesInstancesList": "./views/virtualmachinesinstance/list/VirtualMachinesInstancesList.tsx",
diff --git a/src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.tsx b/src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.tsx
new file mode 100644
index 0000000000..81584258c4
--- /dev/null
+++ b/src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+
+import WizardMetadataLabels from '@catalog/wizard/tabs/metadata/components/WizardMetadataLabels';
+import DataImportCronModel from '@kubevirt-ui/kubevirt-api/console/models/DataImportCronModel';
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import { AnnotationsModal } from '@kubevirt-utils/components/AnnotationsModal/AnnotationsModal';
+import DescriptionItem from '@kubevirt-utils/components/DescriptionItem/DescriptionItem';
+import { LabelsModal } from '@kubevirt-utils/components/LabelsModal/LabelsModal';
+import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider';
+import OwnerDetailsItem from '@kubevirt-utils/components/OwnerDetailsItem/OwnerDetailsItem';
+import Timestamp from '@kubevirt-utils/components/Timestamp/Timestamp';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { k8sPatch, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
+import { DescriptionList, Grid, GridItem } from '@patternfly/react-core';
+
+import DataSourceAnnotations from '../../details/components/DataSourceAnnotations/DataSourceAnnotations';
+
+type DataImportCronDetailsGridProps = {
+  dataImportCron: V1beta1DataImportCron;
+};
+
+export const DataImportCronDetailsGrid: React.FC<DataImportCronDetailsGridProps> = ({
+  dataImportCron,
+}) => {
+  const { t } = useKubevirtTranslation();
+  const { createModal } = useModal();
+
+  return (
+    <Grid hasGutter>
+      <GridItem span={5}>
+        <DescriptionList>
+          <DescriptionItem
+            descriptionData={dataImportCron?.metadata?.name}
+            descriptionHeader={t('Name')}
+            isPopover
+            // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L96
+            bodyContent={t(
+              'Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. ',
+            )}
+            moreInfoURL="http://kubernetes.io/docs/user-guide/identifiers#names"
+            breadcrumb="DataImportCron.metadata.name"
+            data-test-id={`${dataImportCron?.metadata?.name}-name`}
+          />
+          <DescriptionItem
+            descriptionData={
+              <ResourceLink kind="Namespace" name={dataImportCron?.metadata?.namespace} />
+            }
+            descriptionHeader={t('Namespace')}
+            isPopover
+            // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L102-L104
+            bodyContent={t(
+              'Namespace defines the space within which each name must be unique. An empty namespace is equivalent to the "default" namespace, but "default" is the canonical representation. Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty. Must be a DNS_LABEL. Cannot be updated. ',
+            )}
+            moreInfoURL="http://kubernetes.io/docs/user-guide/namespaces"
+            breadcrumb="DataImportCron.metadata.namespace"
+          />
+
+          <DescriptionItem
+            descriptionData={<WizardMetadataLabels labels={dataImportCron?.metadata?.labels} />}
+            descriptionHeader={t('Labels')}
+            isPopover
+            // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L84
+            bodyContent={t(
+              'Map of string keys and values that can be used to organize and categorize (scope and select) objects. May match selectors of replication controllers and services. ',
+            )}
+            moreInfoURL="http://kubernetes.io/docs/user-guide/labels"
+            breadcrumb="DataImportCron.metadata.labels"
+            isEdit
+            showEditOnTitle
+            onEditClick={() =>
+              createModal(({ isOpen, onClose }) => (
+                <LabelsModal
+                  obj={dataImportCron}
+                  isOpen={isOpen}
+                  onClose={onClose}
+                  onLabelsSubmit={(labels) =>
+                    k8sPatch({
+                      model: DataImportCronModel,
+                      resource: dataImportCron,
+                      data: [
+                        {
+                          op: 'replace',
+                          path: '/metadata/labels',
+                          value: labels,
+                        },
+                      ],
+                    })
+                  }
+                />
+              ))
+            }
+            data-test-id={`${dataImportCron?.metadata?.name}-labels`}
+          />
+          <DescriptionItem
+            descriptionData={
+              <DataSourceAnnotations annotations={dataImportCron?.metadata?.annotations} />
+            }
+            descriptionHeader={t('Annotations')}
+            isPopover
+            // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L32
+            bodyContent={t(
+              'Annotations is an unstructured key value map stored with a resource that may be set by external tools to store and retrieve arbitrary metadata. They are not queryable and should be preserved when modifying objects. ',
+            )}
+            moreInfoURL="http://kubernetes.io/docs/user-guide/annotations"
+            breadcrumb="DataImportCron.metadata.annotations"
+            isEdit
+            onEditClick={() =>
+              createModal(({ isOpen, onClose }) => (
+                <AnnotationsModal
+                  obj={dataImportCron}
+                  isOpen={isOpen}
+                  onClose={onClose}
+                  onSubmit={(updatedAnnotations) =>
+                    k8sPatch({
+                      model: DataImportCronModel,
+                      resource: dataImportCron,
+                      data: [
+                        {
+                          op: 'replace',
+                          path: '/metadata/annotations',
+                          value: updatedAnnotations,
+                        },
+                      ],
+                    })
+                  }
+                />
+              ))
+            }
+          />
+          <DescriptionItem
+            descriptionData={<Timestamp timestamp={dataImportCron?.metadata?.creationTimestamp} />}
+            descriptionHeader={t('Created at')}
+            isPopover
+            // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L84
+            bodyContent={t(
+              'Time is a wrapper around time.Time which supports correct marshaling to YAML and JSON.  Wrappers are provided for many of the factory methods that the time package offers.',
+            )}
+            breadcrumb="DataImportCron.metadata.creationTimestamp"
+          />
+          <OwnerDetailsItem obj={dataImportCron} />
+        </DescriptionList>
+      </GridItem>
+    </Grid>
+  );
+};
diff --git a/src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.tsx b/src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.tsx
new file mode 100644
index 0000000000..e6c6a5b059
--- /dev/null
+++ b/src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';
+
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import { ConditionsTable } from '@kubevirt-utils/components/ConditionsTable/ConditionsTable';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { Divider, PageSection, Title } from '@patternfly/react-core';
+
+import { DataImportCronDetailsGrid } from './DataImportCronDetailsGrid';
+
+type DataImportCronDetailsPageProps = RouteComponentProps<{
+  ns: string;
+  name: string;
+}> & {
+  obj?: V1beta1DataImportCron;
+};
+
+const DataImportCronDetailsPage: React.FC<DataImportCronDetailsPageProps> = ({
+  obj: dataImportCron,
+}) => {
+  const { t } = useKubevirtTranslation();
+
+  return (
+    <div>
+      <PageSection>
+        <Title headingLevel="h2" className="co-section-heading">
+          {t('DataImportCron details')}
+        </Title>
+        <DataImportCronDetailsGrid dataImportCron={dataImportCron} />
+      </PageSection>
+      <Divider />
+      <PageSection>
+        <Title headingLevel="h2" className="co-section-heading">
+          {t('Conditions')}
+        </Title>
+        <ConditionsTable
+          conditions={dataImportCron?.status?.conditions as K8sResourceCondition[]}
+        />
+      </PageSection>
+    </div>
+  );
+};
+
+export default DataImportCronDetailsPage;
diff --git a/src/views/datasources/dataimportcron/details/DataImportCronPage.tsx b/src/views/datasources/dataimportcron/details/DataImportCronPage.tsx
new file mode 100644
index 0000000000..4f57c798e7
--- /dev/null
+++ b/src/views/datasources/dataimportcron/details/DataImportCronPage.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import Loading from '@kubevirt-utils/components/Loading/Loading';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { HorizontalNav, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { Bullseye } from '@patternfly/react-core';
+
+import DataImportCronDetailsPage from './DataImportCronDetailsPage';
+import DataImportCronPageTitle from './DataImportCronPageTitle';
+import DataImportCronYAMLPage from './DataImportCronYamlPage';
+
+type DataImportCronPageProps = {
+  name: string;
+  namespace: string;
+  kind: string;
+};
+
+const DataImportCronNavPage: React.FC<DataImportCronPageProps> = ({ name, namespace, kind }) => {
+  const { t } = useKubevirtTranslation();
+  const [dataImportCron, loaded] = useK8sWatchResource<V1beta1DataImportCron>({
+    kind,
+    name,
+    namespace,
+  });
+
+  const pages = React.useMemo(
+    () => [
+      {
+        href: '',
+        name: t('Details'),
+        component: DataImportCronDetailsPage,
+      },
+      {
+        href: 'yaml',
+        name: t('YAML'),
+        component: DataImportCronYAMLPage,
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <>
+      <DataImportCronPageTitle dataImportCron={dataImportCron} namespace={namespace} name={name} />
+      {loaded ? (
+        <HorizontalNav pages={pages} resource={dataImportCron} />
+      ) : (
+        <Bullseye>
+          <Loading />
+        </Bullseye>
+      )}
+    </>
+  );
+};
+
+export default DataImportCronNavPage;
diff --git a/src/views/datasources/dataimportcron/details/DataImportCronPageTitle.tsx b/src/views/datasources/dataimportcron/details/DataImportCronPageTitle.tsx
new file mode 100644
index 0000000000..a4ac3d1e32
--- /dev/null
+++ b/src/views/datasources/dataimportcron/details/DataImportCronPageTitle.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import { DataImportCronModelRef } from '@kubevirt-ui/kubevirt-api/console';
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+
+type DataImportCronPageTitleProps = {
+  dataImportCron: V1beta1DataImportCron;
+  name: string;
+  namespace: string;
+};
+
+const DataImportCronPageTitle: React.FC<DataImportCronPageTitleProps> = ({
+  dataImportCron,
+  name,
+  namespace,
+}) => {
+  const { t } = useKubevirtTranslation();
+
+  return (
+    <>
+      <div className="pf-c-page__main-breadcrumb">
+        <Breadcrumb className="pf-c-breadcrumb co-breadcrumb">
+          <BreadcrumbItem>
+            <Link to={`/k8s/ns/${namespace || 'default'}/${DataImportCronModelRef}`}>
+              {t('DataImportCrons')}
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>{t('DataImportCron Details')}</BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <div className="co-m-nav-title co-m-nav-title--detail co-m-nav-title--breadcrumbs">
+        <span className="co-m-pane__heading">
+          <h1 className="co-m-pane__name co-resource-item">
+            <span className="co-m-resource-icon co-m-resource-icon--lg">{t('DS')}</span>
+            <span data-test-id="resource-title" className="co-resource-item__resource-name">
+              {name ?? dataImportCron?.metadata?.name}{' '}
+            </span>
+          </h1>
+          <div className="co-actions">
+            {/* <DataImportCronActions DataImportCron={DataImportCron} /> */}
+          </div>
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default DataImportCronPageTitle;
diff --git a/src/views/datasources/dataimportcron/details/DataImportCronYamlPage.tsx b/src/views/datasources/dataimportcron/details/DataImportCronYamlPage.tsx
new file mode 100644
index 0000000000..3bc1d24f26
--- /dev/null
+++ b/src/views/datasources/dataimportcron/details/DataImportCronYamlPage.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import Loading from '@kubevirt-utils/components/Loading/Loading';
+import { ResourceYAMLEditor } from '@openshift-console/dynamic-plugin-sdk';
+import { Bullseye } from '@patternfly/react-core';
+
+type DataImportCronYAMLPageProps = RouteComponentProps<{
+  ns: string;
+  name: string;
+}> & {
+  obj?: V1beta1DataImportCron;
+};
+
+const DataImportCronYAMLPage: React.FC<DataImportCronYAMLPageProps> = ({ obj: dataImportCron }) => {
+  const loading = (
+    <Bullseye>
+      <Loading />
+    </Bullseye>
+  );
+  return !dataImportCron ? (
+    loading
+  ) : (
+    <React.Suspense fallback={loading}>
+      <ResourceYAMLEditor initialResource={dataImportCron} />
+    </React.Suspense>
+  );
+};
+
+export default DataImportCronYAMLPage;
diff --git a/src/views/datasources/details/components/DataSourceDetailsGrid.tsx/DataSourceDetailsGrid.tsx b/src/views/datasources/details/components/DataSourceDetailsGrid.tsx/DataSourceDetailsGrid.tsx
index d2fc6cfa37..79f1baef8f 100644
--- a/src/views/datasources/details/components/DataSourceDetailsGrid.tsx/DataSourceDetailsGrid.tsx
+++ b/src/views/datasources/details/components/DataSourceDetailsGrid.tsx/DataSourceDetailsGrid.tsx
@@ -15,7 +15,7 @@ import { k8sPatch, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { DescriptionList, Grid, GridItem } from '@patternfly/react-core';
 
 import DataSourceAnnotations from '../DataSourceAnnotations/DataSourceAnnotations';
-import DataSourceManagedByDescription from '../DataSourceManagedByDescription/DataSourceManagedByDescription';
+import DataSourceImportCronDescription from '../DataSourceImportCronDescription/DataSourceImportCronDescription';
 
 type DataSourceDetailsGridProps = {
   dataSource: V1beta1DataSource;
@@ -56,7 +56,7 @@ export const DataSourceDetailsGrid: React.FC<DataSourceDetailsGridProps> = ({ da
             breadcrumb="DataSource.metadata.namespace"
           />
           {dataImportCron && (
-            <DataSourceManagedByDescription
+            <DataSourceImportCronDescription
               dataImportCronName={dataImportCron}
               namespace={dataSource?.metadata?.namespace}
             />
diff --git a/src/views/datasources/details/components/DataSourceManagedByDescription/DataSourceManagedByDescription.tsx b/src/views/datasources/details/components/DataSourceImportCronDescription/DataSourceImportCronDescription.tsx
similarity index 83%
rename from src/views/datasources/details/components/DataSourceManagedByDescription/DataSourceManagedByDescription.tsx
rename to src/views/datasources/details/components/DataSourceImportCronDescription/DataSourceImportCronDescription.tsx
index 35efff7779..3983c837ce 100644
--- a/src/views/datasources/details/components/DataSourceManagedByDescription/DataSourceManagedByDescription.tsx
+++ b/src/views/datasources/details/components/DataSourceImportCronDescription/DataSourceImportCronDescription.tsx
@@ -6,12 +6,12 @@ import DescriptionItem from '@kubevirt-utils/components/DescriptionItem/Descript
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { ResourceLink, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 
-type DataSourceManagedByDescriptionProps = {
+type DataSourceImportCronDescriptionProps = {
   dataImportCronName: string;
   namespace: string;
 };
 
-const DataSourceManagedByDescription: React.FC<DataSourceManagedByDescriptionProps> = ({
+const DataSourceImportCronDescription: React.FC<DataSourceImportCronDescriptionProps> = ({
   dataImportCronName,
   namespace,
 }) => {
@@ -24,7 +24,7 @@ const DataSourceManagedByDescription: React.FC<DataSourceManagedByDescriptionPro
 
   return (
     <DescriptionItem
-      descriptionHeader={t('Managed by')}
+      descriptionHeader={t('DataImportCron')}
       descriptionData={
         dataImportCron && (
           <ResourceLink
@@ -38,4 +38,4 @@ const DataSourceManagedByDescription: React.FC<DataSourceManagedByDescriptionPro
   );
 };
 
-export default DataSourceManagedByDescription;
+export default DataSourceImportCronDescription;
diff --git a/src/views/datasources/list/DataSourcesList.tsx b/src/views/datasources/list/DataSourcesList.tsx
index c7f41d5515..a49195dac4 100644
--- a/src/views/datasources/list/DataSourcesList.tsx
+++ b/src/views/datasources/list/DataSourcesList.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
+import { DataSourceModelRef } from '@kubevirt-ui/kubevirt-api/console';
 import { V1beta1DataSource } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import {
   ListPageBody,
+  ListPageCreate,
   ListPageFilter,
   ListPageHeader,
   useK8sWatchResource,
@@ -35,7 +37,11 @@ const DataSourcesList: React.FC<DataSourcesListProps> = ({ kind, namespace }) =>
 
   return (
     <>
-      <ListPageHeader title={t('DataSources')} />
+      <ListPageHeader title={t('DataSources')}>
+        <ListPageCreate groupVersionKind={DataSourceModelRef}>
+          {t('Create DataSource')}
+        </ListPageCreate>
+      </ListPageHeader>
       <ListPageBody>
         <ListPageFilter
           data={unfilteredData}