feat: create subscription forms, sources (#4076)

Author: helenosheaa

.gitignore

@@ -35,3 +35,4 @@ src/client/mapsdRoutes.ts
 src/client/managedFunctionsRoutes.ts
 src/client/pinnedItemRoutes.ts
 src/client/fluxdocsdRoutes.ts
+src/client/subscriptionsRoutes.ts

package.json

@@ -52,11 +52,11 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=1a9e6dd4a72fb8dd313134ec7107d0117b52cfd2 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=912fc1474b63f022231dbd068c935451ca0f677a && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
-    "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv && yarn fluxdocs",
-    "generate-meta-cloud": "yarn cloud-api && yarn notebooks && yarn unity && yarn annotations && yarn cloudPriv && yarn pinned && yarn mapsd && yarn fluxdocs",
+    "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv && yarn fluxdocs && yarn subscriptions-oss",
+    "generate-meta-cloud": "yarn cloud-api && yarn notebooks && yarn unity && yarn annotations && yarn cloudPriv && yarn pinned && yarn mapsd && yarn fluxdocs && yarn subscriptions",
     "oss": "oats ${REMOTE}contracts/oss-diff.yml > ./src/client/ossRoutes.ts",
     "cloud": "oats ${REMOTE}contracts/cloud-diff.yml > ./src/client/cloudRoutes.ts",
     "common": "oats ${REMOTE}contracts/common.yml > ./src/client/commonRoutes.ts",
@@ -69,6 +69,8 @@
     "annotations-oss": "oats ${REMOTE}contracts/priv/annotationd-oss.yml > ./src/client/annotationdRoutes.ts",
     "mapsd-oss": "touch ./src/client/mapsdRoutes.ts",
     "mapsd": "oats ${REMOTE}contracts/mapsd.yml > ./src/client/mapsdRoutes.ts",
+    "subscriptions": "oats ${REMOTE}contracts/priv/nifid.yml > ./src/client/subscriptionsRoutes.ts",
+    "subscriptions-oss": "touch ./src/client/subscriptionsRoutes.ts",
     "pinned": "oats ${REMOTE}contracts/priv/pinneditemsd.yml > ./src/client/pinnedItemRoutes.ts",
     "fluxdocs": "oats ${REMOTE}contracts/priv/fluxdocsd.yml > ./src/client/fluxdocsdRoutes.ts",
     "telegraf-plugins:update": "node src/writeData/utils/parsePluginsConfigurationText.mjs"

src/pageLayout/constants/navigationHierarchy.ts

@@ -72,6 +72,13 @@ export const generateNavItems = (): NavItem[] => {
           link: `${orgPrefix}/load-data/scrapers`,
           enabled: () => !CLOUD,
         },
+        {
+          id: 'subscriptions',
+          testID: 'nav-subitem-subscriptions',
+          label: 'Cloud Native Subscriptions',
+          link: `${orgPrefix}/load-data/subscriptions`,
+          enabled: () => CLOUD && isFlagEnabled('subscriptionsResourceType'),
+        },
         {
           id: 'tokens',
           testID: 'nav-subitem-tokens',

src/settings/components/LoadDataNavigation.tsx

@@ -9,6 +9,7 @@ import {FeatureFlag} from 'src/shared/utils/featureFlag'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import CloudExclude from 'src/shared/components/cloud/CloudExclude'
+import CloudOnly from 'src/shared/components/cloud/CloudOnly'
 
 interface OwnProps {
   activeTab: string
@@ -31,29 +32,41 @@ class LoadDataNavigation extends PureComponent<Props> {
         text: 'Sources',
         id: 'sources',
         cloudExclude: false,
+        cloudOnly: false,
         featureFlag: null,
       },
       {
         text: 'Buckets',
         id: 'buckets',
         cloudExclude: false,
+        cloudOnly: false,
         featureFlag: null,
       },
       {
         text: 'Telegraf',
         id: 'telegrafs',
         cloudExclude: false,
+        cloudOnly: false,
         featureFlag: null,
       },
       {
         text: 'Scrapers',
         id: 'scrapers',
         cloudExclude: true,
+        cloudOnly: false,
         featureFlag: null,
       },
+      {
+        text: 'Cloud Native Subscriptions',
+        id: 'subscriptions',
+        cloudExclude: false,
+        cloudOnly: true,
+        featureFlag: 'subscriptionsResourceType',
+      },
       {
         text: 'API Tokens',
         id: 'tokens',
+        cloudOnly: false,
         cloudExclude: false,
         featureFlag: null,
       },
@@ -84,6 +97,10 @@ class LoadDataNavigation extends PureComponent<Props> {
             tabElement = <CloudExclude key={t.id}>{tabElement}</CloudExclude>
           }
 
+          if (t.cloudOnly) {
+            tabElement = <CloudOnly key={t.id}>{tabElement}</CloudOnly>
+          }
+
           if (t.featureFlag) {
             tabElement = (
               <FeatureFlag key={t.id} name={t.featureFlag}>

src/shared/components/resource_sort_dropdown/generateSortItems.ts

@@ -12,6 +12,7 @@ import {
   Scraper,
   Authorization,
   Flow,
+  Subscription,
 } from 'src/types'
 
 export type DashboardSortKey = keyof Dashboard | 'meta.updatedAt'
@@ -25,6 +26,7 @@ export type TelegrafSortKey = keyof Telegraf
 export type ScraperSortKey = keyof Scraper
 export type AuthorizationSortKey = keyof Authorization
 export type FlowSortKey = keyof Flow
+export type SubscriptionKey = keyof Subscription
 
 export type SortKey =
   | DashboardSortKey
@@ -38,6 +40,7 @@ export type SortKey =
   | ScraperSortKey
   | AuthorizationSortKey
   | FlowSortKey
+  | SubscriptionKey
 
 export interface SortDropdownItem {
   label: string
@@ -383,5 +386,32 @@ export const generateSortItems = (
           sortDirection: Sort.Descending,
         },
       ]
+    case ResourceType.Subscriptions:
+      return [
+        {
+          label: 'Name (A → Z)',
+          sortKey: 'name',
+          sortType: SortTypes.String,
+          sortDirection: Sort.Ascending,
+        },
+        {
+          label: 'Name (Z → A)',
+          sortKey: 'name',
+          sortType: SortTypes.String,
+          sortDirection: Sort.Descending,
+        },
+        {
+          label: 'Description (Ascending)',
+          sortKey: 'description',
+          sortType: SortTypes.String,
+          sortDirection: Sort.Ascending,
+        },
+        {
+          label: 'Description (Descending)',
+          sortKey: 'description',
+          sortType: SortTypes.String,
+          sortDirection: Sort.Descending,
+        },
+      ]
   }
 }

src/shared/constants/routes.ts

@@ -40,3 +40,5 @@ export const DEVELOPER_TOOLS = 'developer-tools'
 export const INTEGRATIONS = 'integrations'
 
 export const DATA_EXPLORER = 'data-explorer'
+
+export const SUBSCRIPTIONS = 'subscriptions'

src/shared/containers/SetOrg.tsx

@@ -44,6 +44,8 @@ import {
   UsersPage,
   VariablesIndex,
   VersionPage,
+  SubscriptionsLanding,
+  CreateSubscriptionForm,
   WriteDataPage,
 } from 'src/shared/containers'
 
@@ -67,6 +69,7 @@ import {
   CLIENT_LIBS,
   TELEGRAF_PLUGINS,
   SECRETS,
+  SUBSCRIPTIONS,
 } from 'src/shared/constants/routes'
 
 // Actions
@@ -229,6 +232,20 @@ const SetOrg: FC = () => {
             />
           )}
 
+          {CLOUD && isFlagEnabled('subscriptionsResourceType') && (
+            <Route
+              path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/create`}
+              component={CreateSubscriptionForm}
+            />
+          )}
+
+          {CLOUD && isFlagEnabled('subscriptionsResourceType') && (
+            <Route
+              path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}`}
+              component={SubscriptionsLanding}
+            />
+          )}
+
           {/* Settings */}
           <Route
             path={`${orgPath}/${SETTINGS}/${VARIABLES}`}

src/shared/containers/index.tsx

@@ -99,6 +99,13 @@ export const OrgOverlay = lazy(() => import('src/operator/OrgOverlayWrapper'))
 
 export const CheckoutPage = lazy(() => import('src/checkout/CheckoutPage'))
 
+export const SubscriptionsLanding = lazy(() =>
+  import('src/writeData/subscriptions/components/SubscriptionsLanding')
+)
+export const CreateSubscriptionForm = lazy(() =>
+  import('src/writeData/subscriptions/components/CreateSubscriptionPage')
+)
+
 export const HomepageContainer = lazy(() =>
   import(
     'src/homepageExperience/containers/HomepageContainer'

src/shared/copy/notifications/categories/subscriptions.ts

@@ -0,0 +1,8 @@
+import {Notification} from 'src/types'
+import {defaultErrorNotification} from 'src/shared/copy/notifications'
+
+// Subscriptions
+export const subscriptionCreateFail = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to create Subscription, please try again.`,
+})

src/shared/copy/notifications/index.ts

@@ -14,6 +14,7 @@ export * from './categories/notebooks'
 export * from './categories/onboarding'
 export * from './categories/operator'
 export * from './categories/secrets'
+export * from './categories/subscriptions'
 export * from './categories/tasks'
 export * from './categories/template'
 export * from './categories/variables-urlQueries'