Add remove app button (#989)

* Allow for body to be passed in HTTP delete method for RemoveApplication * Add Remove App button * Update README with command npm run test -- -u to update css snapshots * reverted Spacer and Makefile, and changed Remove App confirm text * Reorganize remove app modal display to improve ux and actually revert Makefile * removed inline style on Application TitleBar * update snapshots * small cleanup - text changes, nav bar width, and rremoving extra button variable * added orange600 as the value for secondary in the mui theme, chard coded modal and circular progress height to avoid jittering when removing app * update snapshots * adjusted modal size to account for error alert in GithubAuthModal, and added option to position alerts icenter rather than flex-start Co-authored-by: Jordan Pellizzari <jordan@weave.works> Co-authored-by: Joshua Israel <joshua.israel@weave.works>
weaveworks · Nov 4, 2021 · a7a1fa4 · a7a1fa4
1 parent 99539b8
commit a7a1fa4
Show file tree

Hide file tree

Showing 20 changed files with 283 additions and 76 deletions.
diff --git a/Makefile b/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
diff --git a/README.md b/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`
 

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

diff --git a/api/applications/applications.swagger.json b/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": [

diff --git a/buf.gen.yaml b/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
diff --git a/pkg/api/applications/applications.pb.gw.go b/pkg/api/applications/applications.pb.gw.go
diff --git a/ui/components/Alert.tsx b/ui/components/Alert.tsx
@@ -10,14 +10,15 @@ import Flex from "./Flex";
 
 type Props = {
   className?: string;
+  center?: boolean;
   title?: string;
   message?: string | JSX.Element;
   severity?: AlertProps["severity"];
 };
 
-function Alert({ className, title, message, severity }: Props) {
+function Alert({ className, center, title, message, severity }: Props) {
   return (
-    <Flex wide className={className}>
+    <Flex wide center={center} className={className}>
       <MaterialAlert severity={severity}>
         <AlertTitle>{title}</AlertTitle>
         {message}

diff --git a/ui/components/Flex.tsx b/ui/components/Flex.tsx
@@ -5,6 +5,7 @@ type Props = {
   className?: string;
   column?: boolean;
   align?: boolean;
+  height?: string;
   between?: boolean;
   center?: boolean;
   wide?: boolean;
@@ -15,6 +16,7 @@ const Styled = (component) => styled(component)`
   display: flex;
   flex-direction: ${(props) => (props.column ? "column" : "row")};
   align-items: ${(props) => (props.align ? "center" : "start")};
+  ${(props) => props.height && `height: ${props.height};`}
   ${({ between }) => between && "justify-content: space-between"};
   ${({ center }) => center && "justify-content: center"};
   ${({ wide }) => wide && "width: 100%"};

diff --git a/ui/components/GithubDeviceAuthModal.tsx b/ui/components/GithubDeviceAuthModal.tsx
@@ -13,6 +13,7 @@ import Text from "./Text";
 
 type Props = {
   className?: string;
+  bodyClassName?: string;
   open: boolean;
   onSuccess: (token: string) => void;
   onClose: () => void;
@@ -75,6 +76,7 @@ const ModalContent = styled(({ codeRes, onSuccess, onError, className }) => {
 
 function GithubDeviceAuthModal({
   className,
+  bodyClassName,
   open,
   onClose,
   repoName,
@@ -102,6 +104,7 @@ function GithubDeviceAuthModal({
   return (
     <Modal
       className={className}
+      bodyClassName={bodyClassName}
       title="Authenticate with Github"
       open={open}
       onClose={onClose}
@@ -112,10 +115,9 @@ function GithubDeviceAuthModal({
         GitOps temporary access:
       </p>
       {error && (
-        <Alert severity="error" title="Error" message={error.message} />
+        <Alert severity="error" title="Error" message={error.message} center />
       )}
-
-      <Flex wide center>
+      <Flex wide center height="150px">
         {codeLoading || !codeRes ? (
           <CircularProgress />
         ) : (

diff --git a/ui/components/Layout.tsx b/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};
 `;
 

diff --git a/ui/components/Link.tsx b/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;
+  }
 `;
diff --git a/ui/components/Modal.tsx b/ui/components/Modal.tsx
@@ -6,14 +6,18 @@ import Flex from "./Flex";
 
 type Props = {
   className?: string;
+  bodyClassName?: string;
   open: boolean;
   onClose: () => void;
   title: string;
   description: string;
   children: any;
 };
 
-const Body = styled.div`
+export const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
   background-color: ${(props) => props.theme.colors.white};
   margin: 0 auto;
   max-width: 540px;
@@ -23,6 +27,7 @@ const Body = styled.div`
 
 function Modal({
   className,
+  bodyClassName,
   open,
   onClose,
   title,
@@ -37,9 +42,11 @@ function Modal({
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
       >
-        <Body>
-          <h2 id="simple-modal-title">{title}</h2>
-          <p id="simple-modal-description">{description}</p>
+        <Body className={bodyClassName}>
+          <Flex column>
+            <h2 id="simple-modal-title">{title}</h2>
+            <p id="simple-modal-description">{description}</p>
+          </Flex>
           <div>{children}</div>
           <Flex wide end>
             <Button variant="contained" onClick={onClose}>

diff --git a/ui/components/Page.tsx b/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>

diff --git a/ui/components/__tests__/__snapshots__/CommitsTable.test.tsx.snap b/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=""
 >