feat: app uninstall dialog (#370)

Co-authored-by: Klink <85062+dogmar@users.noreply.github.com>

assets/src/components/apps/app/App.tsx

@@ -77,6 +77,14 @@ export function getDocsData(docs: Repository['docs']) {
   })
 }
 
+const SYSTEM_APPS = [
+  'bootstrap',
+  'ingress-nginx',
+  'monitoring',
+  'postgres',
+  'mysql',
+]
+
 export const getDirectory = ({
   app = null,
   docs = null,
@@ -115,6 +123,11 @@ export const getDirectory = ({
       label: 'Configuration',
       enabled: config?.gitStatus?.cloned,
     },
+    {
+      path: 'uninstall',
+      label: 'Uninstall',
+      enabled: !SYSTEM_APPS.includes(app.name),
+    },
     {
       path: 'docs',
       label: `${capitalize(app?.name)} docs`,

assets/src/components/apps/app/uninstall/Uninstall.tsx

@@ -0,0 +1,82 @@
+import { Button, Card, Input } from '@pluralsh/design-system'
+import { GqlError } from 'components/utils/Alert'
+import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
+import { BuildType, useCreateBuildMutation } from 'generated/graphql'
+import { Flex, P } from 'honorable'
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+export default function Uninstall() {
+  const navigate = useNavigate()
+  const { appName } = useParams()
+  const [confirm, setConfirm] = useState('')
+  const [mutation, { error }] = useCreateBuildMutation({
+    variables: {
+      attributes: {
+        repository: appName!,
+        type: BuildType.Destroy,
+      },
+    },
+    onCompleted: ({ createBuild }) =>
+      createBuild && navigate(`/builds/${createBuild.id}`),
+  })
+
+  return (
+    <ScrollablePage
+      scrollable={false}
+      heading="Uninstall"
+    >
+      <Card
+        padding="large"
+        overflowY="auto"
+        maxHeight="100%"
+      >
+        <Flex
+          direction="column"
+          gap="small"
+        >
+          {error && (
+            <GqlError
+              header="Failed to create build"
+              error={error}
+            />
+          )}
+          <P
+            body1
+            fontWeight={600}
+          >
+            Uninstall {appName}
+          </P>
+          <P
+            body2
+            color="text-light"
+          >
+            To uninstall the application, type the application’s name {appName}{' '}
+            to confirm. This is action is <b>destructive</b> and can result in
+            underlying data from the application being deleted.
+          </P>
+          <Flex
+            direction="row"
+            alignItems="center"
+            gap="small"
+          >
+            <Input
+              value={confirm}
+              onChange={({ target: { value } }) => setConfirm(value)}
+              width="100%"
+              placeholder={appName}
+              maxWidth={400}
+            />
+            <Button
+              destructive
+              disabled={confirm !== appName}
+              onClick={() => mutation()}
+            >
+              Uninstall
+            </Button>
+          </Flex>
+        </Flex>
+      </Card>
+    </ScrollablePage>
+  )
+}

assets/src/generated/graphql.ts

@@ -2238,6 +2238,13 @@ export type PluralContextQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type PluralContextQuery = { __typename?: 'RootQueryType', pluralContext?: { __typename?: 'PluralContext', buckets?: Array<string | null> | null, configuration: Map<string, unknown>, domains?: Array<string | null> | null } | null };
 
+export type CreateBuildMutationVariables = Exact<{
+  attributes: BuildAttributes;
+}>;
+
+
+export type CreateBuildMutation = { __typename?: 'RootMutationType', createBuild?: { __typename?: 'Build', id: string } | null };
+
 export type GroupMemberFragment = { __typename?: 'GroupMember', user?: { __typename?: 'User', id: string, pluralId?: string | null, name: string, email: string, profile?: string | null, backgroundColor?: string | null, readTimestamp?: Date | null, roles?: { __typename?: 'UserRoles', admin?: boolean | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, description?: string | null, insertedAt?: Date | null, updatedAt?: Date | null } | null };
 
 export type GroupFragment = { __typename?: 'Group', id: string, name: string, description?: string | null, insertedAt?: Date | null, updatedAt?: Date | null };
@@ -2668,6 +2675,39 @@ export function usePluralContextLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
 export type PluralContextQueryHookResult = ReturnType<typeof usePluralContextQuery>;
 export type PluralContextLazyQueryHookResult = ReturnType<typeof usePluralContextLazyQuery>;
 export type PluralContextQueryResult = Apollo.QueryResult<PluralContextQuery, PluralContextQueryVariables>;
+export const CreateBuildDocument = gql`
+    mutation CreateBuild($attributes: BuildAttributes!) {
+  createBuild(attributes: $attributes) {
+    id
+  }
+}
+    `;
+export type CreateBuildMutationFn = Apollo.MutationFunction<CreateBuildMutation, CreateBuildMutationVariables>;
+
+/**
+ * __useCreateBuildMutation__
+ *
+ * To run a mutation, you first call `useCreateBuildMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateBuildMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createBuildMutation, { data, loading, error }] = useCreateBuildMutation({
+ *   variables: {
+ *      attributes: // value for 'attributes'
+ *   },
+ * });
+ */
+export function useCreateBuildMutation(baseOptions?: Apollo.MutationHookOptions<CreateBuildMutation, CreateBuildMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateBuildMutation, CreateBuildMutationVariables>(CreateBuildDocument, options);
+      }
+export type CreateBuildMutationHookResult = ReturnType<typeof useCreateBuildMutation>;
+export type CreateBuildMutationResult = Apollo.MutationResult<CreateBuildMutation>;
+export type CreateBuildMutationOptions = Apollo.BaseMutationOptions<CreateBuildMutation, CreateBuildMutationVariables>;
 export const GroupsDocument = gql`
     query Groups($q: String, $cursor: String) {
   groups(q: $q, first: 20, after: $cursor) {

assets/src/graph/builds.graphql

@@ -0,0 +1,5 @@
+mutation CreateBuild($attributes: BuildAttributes!) {
+  createBuild(attributes: $attributes) {
+    id
+  }
+}

assets/src/routes/appsRoutes.tsx

@@ -6,6 +6,8 @@ import AppDocs from 'components/apps/app/docs/AppDocs'
 
 import Credentials from 'components/apps/app/credentials/Credentials'
 
+import Uninstall from 'components/apps/app/uninstall/Uninstall'
+
 import Apps from '../components/apps/Apps'
 import App from '../components/apps/app/App'
 import Dashboards from '../components/apps/app/dashboards/Dashboards'
@@ -76,6 +78,10 @@ export const appsRoutes = [
       path="oidc"
       element={<UserManagement />}
     />
+    <Route
+      path="uninstall"
+      element={<Uninstall />}
+    />
     <Route
       path="config"
       element={<Configuration />}

plural/helm/console/Chart.lock

@@ -1,6 +1,6 @@
 dependencies:
 - name: test-base
   repository: https://pluralsh.github.io/module-library
-  version: 0.1.5
-digest: sha256:3f26cde94279968f94b0650b52785e5c9a257298d1e96f110f735bb0b41d89f8
-generated: "2022-08-10T16:36:19.429156439+02:00"
+  version: 0.1.10
+digest: sha256:c06b16641a45c3fb3c429b1d8cb5e61a860a58976b87b02b6e01c1826b10f13c
+generated: "2023-06-14T16:25:44.06288-04:00"

plural/helm/console/Chart.yaml

@@ -2,9 +2,9 @@ apiVersion: v2
 appVersion: 0.4.15
 description: A chart for plural console
 name: console
-version: 0.7.61
+version: 0.7.62
 dependencies:
 - name: test-base
   repository: https://pluralsh.github.io/module-library
-  version: 0.1.5
+  version: 0.1.10
   condition: test-base.enabled

plural/helm/console/values.yaml

@@ -130,27 +130,8 @@ test-base:
   enabled: false
   application: console
   testName: console-integration
-  promoteTag: warm
+  promoteTag: stable
   secret:
     CYPRESS_EMAIL: ""
     CYPRESS_PASSWORD: ""
     CYPRESS_BASE_URL: ""
-  steps:
-  - name: watch
-    description: it wait until the console app crd is ready
-    template:
-      container:
-        image: gcr.io/pluralsh/test-base:0.1.6
-        args: ["console"]
-  - name: cypress
-    description: runs cypress E2E tests for the console
-    template:
-      container:
-        args: ["--browser=chromium"]
-        image: dkr.plural.sh/console/console-cypress:v0.2.5-5-g5d88b72
-        envFrom:
-        - secretRef:
-            name: console-test-base-env
-          requests:
-            cpu: 1.8
-            memory: 7.9Gi