Merge branch 'main' into icon_update

uselagoon · Sep 11, 2023 · e422930 · e422930
2 parents 72ba7f4 + 362beb8
commit e422930
Show file tree

Hide file tree

Showing 34 changed files with 518 additions and 224 deletions.
diff --git a/src/components/AddVariable/StyledAddVariable.tsx b/src/components/AddVariable/StyledAddVariable.tsx
@@ -17,6 +17,9 @@ export const NewVariable = styled.div`
   .add-var-btn {
     margin-top: 16px;
   }
+  button.icon {
+    padding: 0 10px;
+  }
 `;
 
 export const NewVariableModal = styled.div`

diff --git a/src/components/Button/StyledButton.tsx b/src/components/Button/StyledButton.tsx
@@ -8,7 +8,10 @@ const sharedStyles = css`
   border-radius: 3px;
   color: ${color.white};
   cursor: pointer;
-  &:not(:has(span[role="img"])){
+  &:not(:has(span[role='img'])) {
+    padding: 10px 30px;
+  }
+  &:has(span[aria-label='loading']) {
     padding: 10px 30px;
   }
   @media ${bp.tinyUp} {
@@ -42,7 +45,7 @@ const sharedStyles = css`
   &.btn-white {
     // background-color: ${color.white};
     background: transparent;
-    color:  ${color.blue};
+    color: ${color.blue};
     border: 1px solid ${color.blue};
     &.btn--disabled {
       background-color: ${color.lightestGrey};
@@ -103,7 +106,7 @@ const sharedStyles = css`
     width: 48px;
     height: 36px;
   }
-  
+
   i.edit {
     background-image: url('/static/images/edit.svg');
     width: 48px;

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,17 +1,28 @@
 import React, { FC, MouseEvent, ReactNode } from 'react';
 
+import { LoadingOutlined } from '@ant-design/icons';
+
 import { ButtonElem, LinkElement } from './StyledButton';
 
 interface ButtonProps {
   action: (e: MouseEvent<HTMLButtonElement>) => void;
   href?: string;
   disabled?: boolean;
+  loading?: boolean;
   children?: ReactNode;
   variant?: string;
   icon?: string;
 }
 
-const Button: FC<ButtonProps> = ({ action = undefined, href = undefined, disabled, children, variant, icon }) => {
+const Button: FC<ButtonProps> = ({
+  action = undefined,
+  href = undefined,
+  disabled,
+  loading,
+  children,
+  variant,
+  icon,
+}) => {
   const createClassName = () => {
     let className = `${variant ? `btn-${variant}` : 'btn'} ${disabled ? 'btn--disabled' : ''}`;
     if (icon) {
@@ -34,10 +45,17 @@ const Button: FC<ButtonProps> = ({ action = undefined, href = undefined, disable
       {icon && <i className={icon} />} {children}
     </LinkElement>
   ) : (
-    <ButtonElem className={createClassName()} onClick={onClick} disabled={disabled}>
+    <ButtonElem
+      style={{ display: 'inline-block' }}
+      className={createClassName()}
+      onClick={onClick}
+      disabled={loading || disabled}
+    >
       {icon && (typeof icon === 'string' ? <i className={`icon ${icon}`} /> : icon)}
 
       {!icon && children}
+
+      {loading && <LoadingOutlined style={{ marginLeft: '0.5rem' }} />}
     </ButtonElem>
   );
 

diff --git a/src/components/DeleteVariable/StyledDeleteVariable.tsx b/src/components/DeleteVariable/StyledDeleteVariable.tsx
@@ -21,5 +21,11 @@ export const DeleteVariableModal = styled.div`
   }
   .deleteConfirmImg span {
     cursor: pointer;
-}
+  }
+`;
+
+export const DeleteVariableButton = styled.div`
+  button.icon {
+    padding: 0 10px;
+  }
 `;
diff --git a/src/components/DeleteVariable/index.js b/src/components/DeleteVariable/index.js
@@ -4,7 +4,7 @@ import ButtonBootstrap from "react-bootstrap/Button";
 import Button from 'components/Button'
 import { Mutation } from "react-apollo";
 import withLogic from "components/AddVariable/logic";
-import {DeleteVariableModal} from "./StyledDeleteVariable";
+import {DeleteVariableModal, DeleteVariableButton} from "./StyledDeleteVariable";
 import DeleteEnvVariableMutation from "../../lib/mutation/deleteEnvVariableByName";
 
 /**
@@ -27,16 +27,18 @@ export const DeleteVariable = ({
 }) => {
   return (
       <React.Fragment>
-      {
-        icon ?
-          <Button variant='red' icon={icon} action={openModal}>
-            Delete
-          </Button>
-          :
-          <Button variant='red' action={openModal}>
-            Delete
-          </Button>
-      }
+        <DeleteVariableButton>
+          {
+            icon ?
+              <Button variant='red' icon={icon} action={openModal}>
+                Delete
+              </Button>
+              :
+              <Button variant='red' action={openModal}>
+                Delete
+              </Button>
+          }
+        </DeleteVariableButton>
       <Modal
         isOpen={open}
         onRequestClose={closeModal}

diff --git a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
@@ -1,6 +1,17 @@
 import styled from "styled-components";
 import { bp, color } from "lib/variables";
 
+export const VariableActions = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: space-evenly;
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
 export const StyledEnvironmentVariableDetails = styled.div`
   padding: 32px calc((100vw / 16) * 1);
   width: 100%;
@@ -267,10 +278,20 @@ export const StyledVariableTable = styled.div`
     & .varUpdate {
         display: flex;
         padding: 0;
-        width: 10%;
+
+        button {
+          background-color: #fff;
+        }
     }
-    & .varDelete {
-      width: 10%;
+    & .varActions {
+      width: 20%;
+      display: flex;
+      align-items: center;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
     }
   }
 
@@ -308,8 +329,17 @@ export const StyledVariableTable = styled.div`
     & .varScope {
       width: 30%;
     }
-    & .varDelete {
+    & .varActions {
       width: 10%;
+      display: flex;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
+    }
+    & .varDelete {
+      padding-right: 10px;
     }
 
     &.skeleton {
@@ -500,8 +530,14 @@ export const StyledProjectVariableTable = styled.div`
     & .varName {
       padding-left: 20px;
     }
-    & .varDelete {
-      width: 5%;
+    & .varActions {
+      width: 10%;
+      display: flex;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
     }
 
     &.skeleton {
@@ -526,4 +562,4 @@ export const StyledProjectVariableTable = styled.div`
     display: none;
     transition: unset;
   }
-`;
+`;
diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
@@ -13,6 +13,7 @@ import {
   StyledEnvironmentVariableDetails,
   StyledProjectVariableTable,
   StyledVariableTable,
+  VariableActions,
 } from "./StyledEnvironmentVariables";
 import Image from "next/image";
 import show from "../../static/images/show.svg";
@@ -267,35 +268,39 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         )}
-                        <Collapse in={openEnvVars}>
-                        <div className="varUpdate">
-                          <Button
-                            onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
-                            style={{ all: 'unset'}}
-                          >
-                            <AddVariable
-                                varProject={environment.project.name}
-                                varEnvironment={environment.name}
-                                varValues={displayVars}
-                                varTarget="Environment"
-                                varName={updateVarName}
-                                varValue={updateVarValue}
-                                varScope={updateVarScope}
-                                refresh={onVariableAdded}
-                                icon="edit"
-                            />
-                          </Button>
-                        </div>
-                        </Collapse>
-                        <div className="varDelete">
-                          <DeleteVariable
-                              deleteType="Environment variable"
-                              deleteName={envVar.name}
-                              varProject={environment.project.name}
-                              varEnvironment={environment.name}
-                              icon="bin"
-                              refresh={onVariableAdded}
-                          />
+                        <div className="varActions">
+                          <VariableActions>
+                            <Collapse in={openEnvVars}>
+                              <div className="varUpdate">
+                                <Button
+                                  onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
+                                  style={{ all: 'unset'}}
+                                >
+                                  <AddVariable
+                                      varProject={environment.project.name}
+                                      varEnvironment={environment.name}
+                                      varValues={displayVars}
+                                      varTarget="Environment"
+                                      varName={updateVarName}
+                                      varValue={updateVarValue}
+                                      varScope={updateVarScope}
+                                      refresh={onVariableAdded}
+                                      icon="edit"
+                                  />
+                                </Button>
+                              </div>
+                            </Collapse>
+                            <div className="varDelete">
+                              <DeleteVariable
+                                  deleteType="Environment variable"
+                                  deleteName={envVar.name}
+                                  varProject={environment.project.name}
+                                  varEnvironment={environment.name}
+                                  icon="bin"
+                                  refresh={onVariableAdded}
+                              />
+                            </div>
+                          </VariableActions>
                         </div>
                       </div>
                     </Fragment>

diff --git a/src/components/Organizations/AddGroupToProject/index.js b/src/components/Organizations/AddGroupToProject/index.js
@@ -51,7 +51,7 @@ export const AddGroupToProject = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_GROUP_PROJECT_MUTATION} onError={e => console.error(e)}>
-            {(addGroupProject, { error, data }) => {
+            {(addGroupProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -86,7 +86,7 @@ export const AddGroupToProject = ({
                   </label>
                   <Footer>
                     <Button
-                      disabled={selectedProject === null}
+                      disabled={called || selectedProject === null}
                       action={() => {
                         addGroupProject({
                           variables: {
@@ -96,6 +96,7 @@ export const AddGroupToProject = ({
                         });
                       }}
                       variant="primary"
+                      loading={called}
                     >
                       Add
                     </Button>

diff --git a/src/components/Organizations/AddNotificationToProject/index.js b/src/components/Organizations/AddNotificationToProject/index.js
@@ -57,7 +57,7 @@ export const AddNotificationToProject = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_PROJECT_NOTIFICATION_MUTATION} onError={e => console.error(e)}>
-            {(addNotificationToProject, {  error, data }) => {
+            {(addNotificationToProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -84,7 +84,7 @@ export const AddNotificationToProject = ({
                     Notification
                     <RoleSelect>
                       <ReactSelect
-                        className='select'
+                        className="select"
                         menuPortalTarget={document.body}
                         styles={{
                           menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
@@ -105,7 +105,7 @@ export const AddNotificationToProject = ({
                   </label>
                   <Footer>
                     <Button
-                      disabled={selectedProject === null}
+                      disabled={called || selectedProject === null}
                       action={() => {
                         addNotificationToProject({
                           variables: {
@@ -116,6 +116,7 @@ export const AddNotificationToProject = ({
                         });
                       }}
                       variant="primary"
+                      loading={called}
                     >
                       Add
                     </Button>