Add remove app button

Makefile

@@ -46,7 +46,7 @@ install: bin ## Install binaries to GOPATH
 	cp bin/$(BINARY_NAME) ${GOPATH}/bin/
 
 api-dev: ## Server and watch gitops-server, will reload automatically on change
-	reflex -r '.go' -s -- sh -c 'go run -ldflags $(LDFLAGS) cmd/gitops-server/main.go'
+	reflex -r '.go' -R 'node_modules' -s -- sh -c 'go run -ldflags $(LDFLAGS) cmd/gitops-server/main.go'
 
 debug: ## Compile binary with optimisations and inlining disabled
 	go build -ldflags $(LDFLAGS) -o bin/$(BINARY_NAME) -gcflags='all=-N -l' cmd/gitops/*.go
@@ -186,7 +186,7 @@ merged.lcov:
 # Thanks to https://www.thapaliya.com/en/writings/well-documented-makefiles/
 help:  ## Display this help.
 ifeq ($(OS),Windows_NT)
-				@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make <target>\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  %-40s %s\n", $$1, $$2 } /^##@/ { printf "\n%s\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+				@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n   <target>\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  %-40s %s\n", $$1, $$2 } /^##@/ { printf "\n%s\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 else
-				@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  \033[36m%-40s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+				@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n   \033[36m<target>\033[0m\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  \033[36m%-40s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 endif

README.md

@@ -115,7 +115,7 @@ To set up a development environment for the UI
 
 Lint frontend code with `make ui-lint` - using Prettier (https://prettier.io/) will get you on the right track!
 
-Run frontend tests with `make ui-test`
+Run frontend tests with `make ui-test` - update CSS snapshots with `npm run test -- -u`
 
 Check dependency vulnerabilities with `make ui-audit`
 

api/applications/applications.proto

@@ -116,6 +116,7 @@ service Applications {
     rpc RemoveApplication(RemoveApplicationRequest) returns (RemoveApplicationResponse) {
         option (google.api.http) = {
             delete : "/v1/applications/{name}"
+            body: "*"
         };
     }
 

api/applications/applications.swagger.json

@@ -282,16 +282,20 @@
             "type": "string"
           },
           {
-            "name": "namespace",
-            "in": "query",
-            "required": false,
-            "type": "string"
-          },
-          {
-            "name": "autoMerge",
-            "in": "query",
-            "required": false,
-            "type": "boolean"
+            "name": "body",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "type": "object",
+              "properties": {
+                "namespace": {
+                  "type": "string"
+                },
+                "autoMerge": {
+                  "type": "boolean"
+                }
+              }
+            }
           }
         ],
         "tags": [

buf.gen.yaml

@@ -8,9 +8,13 @@ plugins:
     opt: paths=source_relative
   - name: grpc-gateway
     out: pkg
-    opt: paths=source_relative
+    opt:
+      - paths=source_relative
+      - allow_delete_body=true
   - name: openapiv2
     out: ./
+    opt:
+      - allow_delete_body=true
   - name: grpc-gateway-ts
     out: ./ui/lib
     opt: fetch_module_directory=./api/applications

ui/components/Layout.tsx

@@ -37,6 +37,7 @@ const negativeSpaceColor = "#E6E6E6";
 
 const AppContainer = styled.div`
   width: 100%;
+  overflow-x: hidden;
   height: 100%;
   margin: 0 auto;
   padding: 0;
@@ -47,7 +48,7 @@ const NavContainer = styled.div`
   width: 240px;
   background-color: ${(props) => props.theme.colors.white};
   padding-top: ${(props) => props.theme.spacing.medium};
-  padding-right: ${(props) => props.theme.spacing.medium};
+  padding-right: ${(props) => props.theme.spacing.small};
   background-color: ${negativeSpaceColor};
 `;
 

ui/components/Link.tsx

@@ -31,4 +31,7 @@ function Link({ children, href, className, to = "", ...props }: Props) {
 
 export default styled(Link)`
   text-decoration: none;
+  &.title-bar-button {
+    width: 250px;
+  }
 `;

ui/components/Page.tsx

@@ -16,13 +16,13 @@ export type PageProps = {
   children?: any;
   title?: string;
   breadcrumbs?: { page: PageRoute; query?: any }[];
+  topRight?: JSX.Element;
   loading?: boolean;
 };
 
 const Content = styled.div`
   max-width: 1400px;
   margin: 0 auto;
-  width: 100%;
   background-color: ${(props) => props.theme.colors.white};
   padding-left: ${(props) => props.theme.spacing.large};
   padding-right: ${(props) => props.theme.spacing.large};
@@ -32,6 +32,8 @@ const Content = styled.div`
 
 export const TitleBar = styled.div`
   display: flex;
+  width: 100%;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: ${(props) => props.theme.spacing.small};
 
@@ -50,7 +52,14 @@ function pageLookup(p: PageRoute) {
   }
 }
 
-function Page({ className, children, title, breadcrumbs, loading }: PageProps) {
+function Page({
+  className,
+  children,
+  title,
+  breadcrumbs,
+  topRight,
+  loading,
+}: PageProps) {
   const { appState, settings } = useCommon();
 
   if (loading) {
@@ -74,6 +83,7 @@ function Page({ className, children, title, breadcrumbs, loading }: PageProps) {
               ))}
             <h2>{title}</h2>
           </Breadcrumbs>
+          {topRight}
         </TitleBar>
         {appState.error && (
           <Flex center wide>

ui/components/__tests__/__snapshots__/CommitsTable.test.tsx.snap

@@ -27,6 +27,10 @@ exports[`CommitsTable snapshots renders 1`] = `
   text-decoration: none;
 }
 
+.c2.title-bar-button {
+  width: 250px;
+}
+
 <div
   class=""
 >

ui/components/__tests__/__snapshots__/Page.test.tsx.snap

@@ -47,7 +47,6 @@ exports[`Page snapshots default 1`] = `
 .c1 {
   max-width: 1400px;
   margin: 0 auto;
-  width: 100%;
   background-color: #fff;
   padding-left: 32px;
   padding-right: 32px;
@@ -60,6 +59,11 @@ exports[`Page snapshots default 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;

ui/lib/api/applications/applications.pb.ts

@@ -251,7 +251,7 @@ export class Applications {
     return fm.fetchReq<AddApplicationRequest, AddApplicationResponse>(`/v1/applications`, {...initReq, method: "POST", body: JSON.stringify(req)})
   }
   static RemoveApplication(req: RemoveApplicationRequest, initReq?: fm.InitReq): Promise<RemoveApplicationResponse> {
-    return fm.fetchReq<RemoveApplicationRequest, RemoveApplicationResponse>(`/v1/applications/${req["name"]}`, {...initReq, method: "DELETE"})
+    return fm.fetchReq<RemoveApplicationRequest, RemoveApplicationResponse>(`/v1/applications/${req["name"]}`, {...initReq, method: "DELETE", body: JSON.stringify(req)})
   }
   static SyncApplication(req: SyncApplicationRequest, initReq?: fm.InitReq): Promise<SyncApplicationResponse> {
     return fm.fetchReq<SyncApplicationRequest, SyncApplicationResponse>(`/v1/applications/${req["name"]}/sync`, {...initReq, method: "POST", body: JSON.stringify(req)})