From 39b4c8cf350b78e9f3309d8898b617ecfe5c120e Mon Sep 17 00:00:00 2001
From: John Duprey <jwd@johnwduprey.com>
Date: Wed, 2 Aug 2023 23:54:34 -0400
Subject: [PATCH] Azure Cloud Shell

- Add new section to Backend URLs
- Add CippOffcanvas with preset commands
- Cleanup card layout
---
 src/views/cipp/CIPPSettings.js | 151 +++++++++++++++++++++++++++------
 1 file changed, 124 insertions(+), 27 deletions(-)

diff --git a/src/views/cipp/CIPPSettings.js b/src/views/cipp/CIPPSettings.js
index bb428a0fac45..08126ca42e76 100644
--- a/src/views/cipp/CIPPSettings.js
+++ b/src/views/cipp/CIPPSettings.js
@@ -69,6 +69,7 @@ import { Form } from 'react-final-form'
 import useConfirmModal from 'src/hooks/useConfirmModal'
 import { setCurrentTenant } from 'src/store/features/app'
 import {
+  CippOffcanvas,
   CippCodeBlock,
   ModalService,
   StatusIcon,
@@ -821,7 +822,7 @@ const ExcludedTenantsSettings = () => {
 }
 const SecuritySettings = () => {
   const [listBackend, listBackendResult] = useLazyGenericGetRequestQuery()
-
+  const [visible, setVisible] = useState(false)
   return (
     <div>
       {listBackendResult.isUninitialized && listBackend({ path: 'api/ExecBackendURLs' })}
@@ -833,16 +834,16 @@ const SecuritySettings = () => {
                 <CCardTitle>Resource Group</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
+                <p>
                   The Resource group contains all the CIPP resources in your tenant, except the SAM
                   Application
-                </CRow>
+                </p>
                 <a
                   target={'_blank'}
                   href={listBackendResult.data?.Results?.ResourceGroup}
                   rel="noreferrer"
                 >
-                  <CButton>Go to Resource Group</CButton>
+                  <CButton className="mb-3">Go to Resource Group</CButton>
                 </a>
               </CCardBody>
             </CCard>
@@ -853,16 +854,16 @@ const SecuritySettings = () => {
                 <CCardTitle>Key Vault</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
+                <p>
                   The keyvault allows you to check token information. By default you do not have
                   access.
-                </CRow>
+                </p>
                 <a
                   target={'_blank'}
                   href={listBackendResult.data?.Results?.KeyVault}
                   rel="noreferrer"
                 >
-                  <CButton>Go to Keyvault</CButton>
+                  <CButton className="mb-3">Go to Keyvault</CButton>
                 </a>
               </CCardBody>
             </CCard>
@@ -873,16 +874,16 @@ const SecuritySettings = () => {
                 <CCardTitle>Static Web App (Role Management)</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
+                <p>
                   The Static Web App role management allows you to invite other users to the
                   application.
-                </CRow>
+                </p>
                 <a
                   target={'_blank'}
                   href={listBackendResult.data?.Results?.SWARoles}
                   rel="noreferrer"
                 >
-                  <CButton>Go to Role Management</CButton>
+                  <CButton className="mb-3">Go to Role Management</CButton>
                 </a>
               </CCardBody>
             </CCard>
@@ -895,15 +896,13 @@ const SecuritySettings = () => {
                 <CCardTitle>Function App (Deployment Center)</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
-                  The Function App Deployment Center allows you to run updates on the API
-                </CRow>
+                <p>The Function App Deployment Center allows you to run updates on the API</p>
                 <a
                   target={'_blank'}
                   href={listBackendResult.data?.Results?.FunctionDeployment}
                   rel="noreferrer"
                 >
-                  <CButton>Go to Function App Deployment Center</CButton>
+                  <CButton className="mb-3">Go to Function App Deployment Center</CButton>
                 </a>
               </CCardBody>
             </CCard>
@@ -914,17 +913,17 @@ const SecuritySettings = () => {
                 <CCardTitle>Function App (Configuration)</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
+                <p>
                   At the Function App Configuration you can check the status of the API access to
                   your keyvault
-                  <a
-                    target={'_blank'}
-                    href={listBackendResult.data?.Results?.FunctionConfig}
-                    rel="noreferrer"
-                  >
-                    <CButton>Go to Function App Configuration</CButton>
-                  </a>
-                </CRow>
+                </p>
+                <a
+                  target={'_blank'}
+                  href={listBackendResult.data?.Results?.FunctionConfig}
+                  rel="noreferrer"
+                >
+                  <CButton className="mb-3">Go to Function App Configuration</CButton>
+                </a>
               </CCardBody>
             </CCard>
           </CCol>
@@ -934,20 +933,118 @@ const SecuritySettings = () => {
                 <CCardTitle>Function App (Overview)</CCardTitle>
               </CCardHeader>
               <CCardBody>
-                <CRow className="mb-3">
-                  At the function App Overview, you can stop and start the backend API
-                </CRow>
+                <p>At the function App Overview, you can stop and start the backend API</p>
                 <a
                   target={'_blank'}
                   href={listBackendResult.data?.Results?.FunctionApp}
                   rel="noreferrer"
                 >
-                  <CButton>Go to Function App Overview</CButton>
+                  <CButton className="mb-3">Go to Function App Overview</CButton>
                 </a>
               </CCardBody>
             </CCard>
           </CCol>
         </CRow>
+        <CRow className="mb-3">
+          <CCol md={4}>
+            <CCard className="h-100">
+              <CCardHeader>
+                <CCardTitle>Cloud Shell</CCardTitle>
+              </CCardHeader>
+              <CCardBody>
+                <p>Launch an Azure Cloud Shell Window</p>
+                <CLink
+                  onClick={() =>
+                    window.open(
+                      'https://shell.azure.com/powershell',
+                      '_blank',
+                      'toolbar=no,scrollbars=yes,resizable=yes,menubar=no,location=no,status=no',
+                    )
+                  }
+                  rel="noreferrer"
+                >
+                  <CButton className="mb-3 me-3">Cloud Shell</CButton>
+                </CLink>
+                <CButton onClick={() => setVisible(true)} className="mb-3">
+                  Command Reference
+                </CButton>
+              </CCardBody>
+            </CCard>
+          </CCol>
+        </CRow>
+        <CippOffcanvas
+          id="command-offcanvas"
+          visible={visible}
+          placement="end"
+          className="cipp-offcanvas"
+          hideFunction={() => setVisible(false)}
+          title="Command Reference"
+        >
+          <h5 className="my-3">Function App Config</h5>
+          <CippCodeBlock
+            language="powershell"
+            code={
+              '$Function = Get-AzFunctionApp -ResourceGroupName ' +
+              listBackendResult.data?.Results?.RGName +
+              ' -Name ' +
+              listBackendResult.data?.Results?.FunctionName +
+              '; $Function | select Name, Status, Location, Runtime, ApplicationSettings'
+            }
+            showLineNumbers={false}
+            wrapLongLines={true}
+          />
+          <h5 className="my-3">Function App Deployment</h5>
+          <CippCodeBlock
+            language="powershell"
+            code={
+              '$FunctionDeployment = az webapp deployment source show --resource-group ' +
+              listBackendResult.data?.Results?.RGName +
+              ' --name ' +
+              listBackendResult.data?.Results?.FunctionName +
+              ' | ConvertFrom-Json; $FunctionDeployment | Select-Object repoUrl, branch, isGitHubAction, isManualIntegration, githubActionConfiguration'
+            }
+            showLineNumbers={false}
+            wrapLongLines={true}
+          />
+          <h5 className="my-3">Watch Function Logs</h5>
+          <CippCodeBlock
+            language="powershell"
+            code={
+              'az webapp log tail --resource-group ' +
+              listBackendResult.data?.Results?.RGName +
+              ' --name ' +
+              listBackendResult.data?.Results?.FunctionName
+            }
+            showLineNumbers={false}
+            wrapLongLines={true}
+          />
+          <h5 className="my-3">Static Web App Config</h5>
+          <CippCodeBlock
+            language="powershell"
+            code={
+              '$StaticWebApp = Get-AzStaticWebApp -ResourceGroupName ' +
+              listBackendResult.data?.Results?.RGName +
+              ' -Name ' +
+              listBackendResult.data?.Results?.SWAName +
+              '; $StaticWebApp | Select-Object Name, CustomDomain, DefaultHostname, RepositoryUrl'
+            }
+            showLineNumbers={false}
+            wrapLongLines={true}
+          />
+          <h5 className="my-3">List CIPP Users</h5>
+          <CippCodeBlock
+            language="powershell"
+            code={
+              'Get-AzStaticWebAppUser -ResourceGroupName ' +
+              listBackendResult.data?.Results?.RGName +
+              ' -Name ' +
+              listBackendResult.data?.Results?.SWAName +
+              ' -AuthProvider all | Select-Object DisplayName, Role'
+            }
+            showLineNumbers={false}
+            wrapLongLines={true}
+          />
+        </CippOffcanvas>
       </>
     </div>
   )