ui/solutions: Disable the cursor when the env is under terminating

Refs: #2949

ui/src/containers/SolutionList.js

@@ -29,6 +29,7 @@ import {
   prepareEnvironmentAction,
   deleteEnvironmentAction,
 } from '../ducks/app/solutions';
+import { STATUS_TERMINATING } from '../constants';
 
 const PageSubtitle = styled.h3`
   color: ${(props) => props.theme.brand.textPrimary};
@@ -73,16 +74,26 @@ const LoaderContainer = styled.div`
   flex-wrap: nowrap;
   padding: 0 0 0 ${padding.smaller};
 `;
+
 const TrashButtonContainer = styled(Button)`
+  .sc-button-text {
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    // To make the graphic element become the target of the pointer events.
+    pointer-events: all;
+  }
   ${(props) => {
-    if (props.disabled) return { opacity: 0.2 };
+    if (props.disabled) {
+      return { opacity: 0.2 };
+    }
   }};
+  }
 `;
 
 const SolutionsList = (props) => {
   const theme = useSelector((state) => state.config.theme);
   const solutions = useSelector((state) => state.app.solutions.solutions);
   const environments = useSelector((state) => state.app.solutions.environments);
+  console.log('environments', environments);
   const history = useHistory();
   const dispatch = useDispatch();
   useRefreshEffect(refreshSolutionsAction, stopRefreshSolutionsAction);
@@ -193,6 +204,9 @@ const SolutionsList = (props) => {
                 dispatch(deleteEnvironmentAction(environment.name));
               }}
               inverted={true}
+              disabled={
+                environment.namespaces[0].status.phase === STATUS_TERMINATING
+              }
               icon={<i className="fas fa-lg fa-trash" />}
               data-cy={`delete_${environment.name}_button`}
             ></TrashButtonContainer>