adds a collapsible "create new app" section (#171)

* adds a collapsible "create new app" section * fix prettier format of changes made in previous commit * adds a collapsible "create new app" section * fix prettier format of changes made in previous commit * feat: adds a collapsible create * fix: change create app label * fix: update label for hiding create app form * fix: remove storage * fix: format code --------- Co-authored-by: Lars <[email protected]>
caprover · Nov 17, 2024 · 9821280 · 9821280
1 parent df22c8f
commit 9821280
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -77,5 +77,6 @@
         "tslint": "^6.1.3",
         "tslint-config-prettier": "^1.18.0",
         "typescript": "^4.1.5"
-    }
+    },
+    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/containers/apps/Apps.tsx b/src/containers/apps/Apps.tsx
@@ -23,13 +23,15 @@ export default class Apps extends ApiComponent<
                   projects: ProjectDefinition[]
               }
             | undefined
+        showCreateAppForm: boolean
     }
 > {
     constructor(props: any) {
         super(props)
         this.state = {
             isLoading: true,
             apiData: undefined,
+            showCreateAppForm: false,
         }
     }
 
@@ -72,49 +74,59 @@ export default class Apps extends ApiComponent<
             return <ErrorRetry />
         }
 
+        const showAppsTable: boolean =
+            apiData.apps.appDefinitions.length > 0 ||
+            apiData.projects.length > 0
+
+        const showCreateAppForm: boolean =
+            self.state.showCreateAppForm || !showAppsTable
+
         return (
             <div className="slow-fadein-fast">
-                <div
-                    style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 25,
-                        padding: '0 20px',
-                        margin: '0 auto 50px',
-                        maxWidth: 1000,
-                    }}
-                >
-                    <Row justify="center">
-                        <Col
-                            xs={{
-                                span: 24,
-                            }}
-                            lg={{
-                                span: 13,
-                            }}
-                        >
-                            <CreateNewApp
-                                projects={apiData.projects}
-                                onCreateNewAppClicked={(
-                                    appName: string,
-                                    projectId: string,
-                                    hasPersistency: boolean
-                                ) => {
-                                    self.onCreateNewAppClicked(
-                                        appName,
-                                        projectId,
-                                        hasPersistency
-                                    )
+                {showCreateAppForm && (
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 25,
+                            padding: '0 20px',
+                            margin: '0 auto 50px',
+                            maxWidth: 1000,
+                        }}
+                    >
+                        <Row justify="center">
+                            <Col
+                                xs={{
+                                    span: 24,
                                 }}
-                                onOneClickAppClicked={() => {
-                                    self.props.history.push('/apps/oneclick')
+                                lg={{
+                                    span: 13,
                                 }}
-                            />
-                        </Col>
-                    </Row>
-                </div>
-                {(apiData.apps.appDefinitions.length > 0 ||
-                    apiData.projects.length > 0) && (
+                            >
+                                <CreateNewApp
+                                    projects={apiData.projects}
+                                    onCreateNewAppClicked={(
+                                        appName: string,
+                                        projectId: string,
+                                        hasPersistency: boolean
+                                    ) => {
+                                        self.onCreateNewAppClicked(
+                                            appName,
+                                            projectId,
+                                            hasPersistency
+                                        )
+                                    }}
+                                    onOneClickAppClicked={() => {
+                                        self.props.history.push(
+                                            '/apps/oneclick'
+                                        )
+                                    }}
+                                />
+                            </Col>
+                        </Row>
+                    </div>
+                )}
+                {showAppsTable && (
                     <div
                         style={{
                             padding: '0 20px',
@@ -136,6 +148,13 @@ export default class Apps extends ApiComponent<
                                     apps={apiData.apps.appDefinitions}
                                     projects={apiData.projects}
                                     rootDomain={apiData.apps.rootDomain}
+                                    showCreateAppForm={showCreateAppForm}
+                                    onToggleCreateAppVisibility={() => {
+                                        self.setState({
+                                            showCreateAppForm:
+                                                !self.state.showCreateAppForm,
+                                        })
+                                    }}
                                 />
                             </Col>
                         </Row>

diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -63,6 +63,8 @@ class AppsTable extends Component<
         defaultNginxConfig: string
         isMobile: boolean
         search: string | undefined
+        showCreateAppForm: boolean
+        onToggleCreateAppVisibility: () => void
     },
     {
         searchTerm: string
@@ -328,7 +330,29 @@ class AppsTable extends Component<
         return (
             <Card
                 extra={
-                    <div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5em',
+                        }}
+                    >
+                        <Button
+                            onClick={() =>
+                                self.props.onToggleCreateAppVisibility()
+                            }
+                            type="primary"
+                        >
+                            {self.props.showCreateAppForm
+                                ? localize(
+                                      'apps_table.hide_create_app',
+                                      'Hide Create App'
+                                  )
+                                : localize(
+                                      'create_new_app.title',
+                                      'Create A New App'
+                                  )}
+                        </Button>
                         {self.state.isBulkEditMode && (
                             <Tooltip
                                 title={localize(