credential id string

dashboard/src/components/ProvisionerFlow.tsx

@@ -17,7 +17,7 @@ const ProvisionerFlow: React.FC<Props> = ({
 }) => {
   const { usage, hasBillingEnabled } = useContext(Context);
   const [currentStep, setCurrentStep] = useState("cloud");
-  const [credentialId, setCredentialId] = useState(null);
+  const [credentialId, setCredentialId] = useState("");
 
   const isUsageExceeded = useMemo(() => {
     if (!hasBillingEnabled) {

dashboard/src/components/ProvisionerForm.tsx

@@ -9,7 +9,7 @@ import ProvisionerSettings from "./ProvisionerSettings";
 
 type Props = {
   goBack: () => void;
-  credentialId: any;
+  credentialId: string;
 };
 
 const ProvisionerForm: React.FC<Props> = ({

dashboard/src/components/ProvisionerSettings.tsx

@@ -41,7 +41,7 @@ const machineTypeOptions = [
 ];
 
 type Props = {
-  credentialId: any;
+  credentialId: string;
   clusterId?: number;
 };
 

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -186,6 +186,15 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       ["get", "create"]
     );
 
+    if (currentCluster.status === "UPDATING_UNAVAILABLE") {
+      return (
+        <Placeholder>
+          Your cluster is still being created
+
+        </Placeholder>
+      )
+    }
+
     return (
       <>
         <ControlRow>
@@ -368,6 +377,10 @@ ClusterDashboard.contextType = Context;
 
 export default withRouter(withAuth(ClusterDashboard));
 
+const Placeholder = styled.div`
+  
+`;
+
 const ToggleOption = styled.div<{ selected: boolean; nudgeLeft?: boolean }>`
   padding: 0 10px;
   color: ${(props) => (props.selected ? "" : "#494b4f")};

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -148,7 +148,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
         );
       });
     }
-    return <Placeholder>No integrations set up yet.</Placeholder>;
+    return <Placeholder>No Docker integrations set up yet.</Placeholder>;
   };
 
   collapseAllButton = () => (
@@ -259,10 +259,11 @@ const Placeholder = styled.div`
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
   justify-content: center;
-  margin-top: 30px;
-  background: #ffffff11;
-  color: #ffffff44;
+  margin-top: 40px;
+  color: #aaaabb;
   border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const StyledIntegrationList = styled.div`

dashboard/src/main/home/integrations/SlackIntegrationList.tsx

@@ -105,10 +105,11 @@ const Placeholder = styled.div`
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
   justify-content: center;
-  margin-top: 30px;
-  background: #ffffff11;
-  color: #ffffff44;
+  margin-top: 40px;
+  color: #aaaabb;
   border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const Label = styled.div`

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -509,10 +509,11 @@ const Placeholder = styled.div`
   align-items: center;
   margin-top: 23px;
   justify-content: center;
-  background: #ffffff11;
-  border-radius: 5px;
-  color: #ffffff44;
   font-size: 13px;
+  color: #aaaabb;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const ButtonWrapper = styled.div`

dashboard/src/shared/common.tsx

@@ -29,7 +29,7 @@ export const integrationList: any = {
     icon:
       "https://user-images.githubusercontent.com/5147537/54070671-0a173780-4263-11e9-8946-09ac0e37d8c6.png",
     label: "Slack",
-    buttonText: "Install Application",
+    buttonText: "Install application",
   },
   registry: {
     icon:

docs/guides/linking-slack-integration.md

@@ -4,7 +4,7 @@ Porter has a Slack application that you can install into a channel of any worksp
 
 ## Installing Application
 
-To install the Slack application, navigate to the **Integrations** section on the left and click **Slack**. Then, click **Install Application** in the top right:
+To install the Slack application, navigate to the **Integrations** section on the left and click **Slack**. Then, click **Install application** in the top right:
 
 ![image](https://user-images.githubusercontent.com/25856165/128559944-d14cb6f9-8bfd-4294-8ed1-5455f3c3304d.png)