Merge pull request #2315 from posit-dev/sagerb-add-alert-indicators-t…

…o-tree-views

Add contextual notification alert icons to section headers

extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue

@@ -28,22 +28,22 @@
         />
       </div>
 
-      <p v-if="isConfigEntryMissing">
+      <p v-if="home.config.active.isEntryMissing">
         No Config Entry in Deployment record -
         {{ home.selectedContentRecord?.saveName }}.
         <a class="webview-link" role="button" @click="selectConfiguration">{{
           promptForConfigSelection
         }}</a
         >.
       </p>
-      <p v-if="isConfigMissing">
+      <p v-if="home.config.active.isMissing">
         The last Configuration used for this Deployment was not found.
         <a class="webview-link" role="button" @click="selectConfiguration">{{
           promptForConfigSelection
         }}</a
         >.
       </p>
-      <p v-if="isConfigInError">
+      <p v-if="home.config.active.isError">
         The selected Configuration has an error.
         <a
           class="webview-link"
@@ -55,7 +55,7 @@
         >.
       </p>
 
-      <p v-if="isCredentialMissing">
+      <p v-if="home.config.active.isCredentialMissing">
         A Credential for the Deployment's server URL was not found.
         <a class="webview-link" role="button" @click="newCredential"
           >Create a new Credential</a
@@ -246,19 +246,6 @@ const onViewPublishingLog = () => {
   });
 };
 
-const isConfigInErrorList = (configName?: string): boolean => {
-  if (!configName) {
-    return false;
-  }
-  return Boolean(
-    home.configurationsInError.find(
-      (config) =>
-        config.configurationName ===
-        home.selectedContentRecord?.configurationName,
-    ),
-  );
-};
-
 const filteredConfigs = computed((): Configuration[] => {
   return filterConfigurationsToValidAndType(
     home.configurations,
@@ -285,28 +272,6 @@ const contextMenuVSCodeContext = computed((): string => {
     : "homeview-last-contentRecord-more-menu";
 });
 
-const isConfigEntryMissing = computed((): boolean => {
-  return Boolean(
-    home.selectedContentRecord && !home.selectedContentRecord.configurationName,
-  );
-});
-
-const isConfigMissing = computed((): boolean => {
-  return Boolean(
-    home.selectedContentRecord &&
-      !home.selectedConfiguration &&
-      !isConfigInErrorList(home.selectedContentRecord?.configurationName) &&
-      !isConfigEntryMissing.value,
-  );
-});
-
-const isConfigInError = computed((): boolean => {
-  return Boolean(
-    home.selectedConfiguration &&
-      isConfigurationError(home.selectedConfiguration),
-  );
-});
-
 const deploymentTitle = computed(() => {
   if (!home.selectedContentRecord) {
     // no title if there is no selected contentRecord
@@ -348,7 +313,7 @@ const entrypointSubTitle = computed(() => {
       if (contentRecord.projectDir !== ".") {
         subTitle = `${contentRecord.projectDir}${home.platformFileSeparator}`;
       }
-      if (!isConfigInError.value) {
+      if (!home.config.active.isError) {
         subTitle += config.configuration.entrypoint;
       }
       return subTitle;
@@ -357,10 +322,6 @@ const entrypointSubTitle = computed(() => {
   return "ProjectDir and Entrypoint not determined";
 });
 
-const isCredentialMissing = computed((): boolean => {
-  return Boolean(home.selectedContentRecord && !home.serverCredential);
-});
-
 const selectConfiguration = () => {
   hostConduit.sendMsg({
     kind: WebviewToHostMessageType.SHOW_SELECT_CONFIGURATION,

extensions/vscode/webviews/homeView/src/components/tree/TreeSection.vue

@@ -11,18 +11,18 @@
           class="twisty-container codicon"
           :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
         />
-        <span
-          v-if="codicon"
-          class="tree-section-icon codicon"
-          :class="codicon"
-        />
         <h3 class="title">{{ title }}</h3>
         <span v-if="$slots.description" class="description">
           <slot name="description" />
         </span>
         <span v-else-if="description" class="description">
           {{ description }}
         </span>
+        <div
+          v-if="codicon && !expanded"
+          class="tree-section-icon codicon"
+          :class="codicon"
+        />
       </div>
       <div v-if="actions" class="actions">
         <ActionToolbar :title="title" :actions="actions" />
@@ -63,6 +63,12 @@ const toggleExpanded = () => {
     margin-left: auto;
   }
 
+  .tree-section-icon {
+    font-size: 13px;
+    margin-right: 4px;
+    margin-left: auto;
+  }
+
   &.expanded:hover .actions,
   &.expanded:focus-within .actions {
     display: initial;
@@ -112,11 +118,6 @@ const toggleExpanded = () => {
       color: var(--vscode-icon-foreground);
     }
 
-    .tree-section-icon {
-      font-size: 13px;
-      margin-right: 4px;
-    }
-
     .title {
       font-size: 11px;
       min-width: 3ch;

extensions/vscode/webviews/homeView/src/components/views/Credentials.vue

@@ -3,8 +3,9 @@
     title="Credentials"
     data-automation="credentials"
     :actions="sectionActions"
+    :codicon="home.credential.active.isAlertActive ? `codicon-alert` : ``"
   >
-    <WelcomeView v-if="home.sortedCredentials.length === 0">
+    <WelcomeView v-if="!home.credential.isAvailable">
       <p>No credentials have been added yet.</p>
     </WelcomeView>
     <TreeItem
@@ -38,6 +39,7 @@ import { CredentialGUIs } from "../../../../../src/constants";
 import { WebviewToHostMessageType } from "../../../../../src/types/messages/webviewToHostMessages";
 
 const home = useHomeStore();
+
 const { sendMsg } = useHostConduitService();
 
 const sectionActions = computed(() => {

extensions/vscode/webviews/homeView/src/components/views/PythonPackages.vue

@@ -3,9 +3,10 @@
     title="Python Packages"
     data-automation="python-packages"
     :actions="pythonPackageActions"
+    :codicon="home.python.active.isAlertActive ? `codicon-alert` : ``"
   >
     <WelcomeView v-if="showWelcomeView">
-      <template v-if="showScanWelcomeView">
+      <template v-if="home.python.active.isMissingRequirements">
         <p>
           To deploy Python content, you need a package file listing any package
           dependencies, but the file does not exist. Click Scan to create one
@@ -15,13 +16,13 @@
           Scan
         </vscode-button>
       </template>
-      <template v-if="isNotPythonProject">
+      <template v-if="!home.python.active.isInProject">
         <p>
           This project is not configured to use Python. To configure Python, add
           a [python] section to your configuration file.
         </p>
       </template>
-      <template v-if="emptyRequirements">
+      <template v-if="home.python.active.isEmptyRequirements">
         <p>
           This project currently has no Python package requirements. If this is
           not accurate, click Scan to update based on the files in your project
@@ -57,7 +58,6 @@ import { WebviewToHostMessageType } from "../../../../../src/types/messages/webv
 import { ActionButton } from "../ActionToolbar.vue";
 
 const home = useHomeStore();
-
 const hostConduit = useHostConduitService();
 
 const onRefresh = () => {
@@ -111,26 +111,9 @@ const pythonPackageActions = computed((): ActionButton[] => {
 
 const showWelcomeView = computed(() => {
   return (
-    isNotPythonProject.value ||
-    emptyRequirements.value ||
-    showScanWelcomeView.value
+    !home.python.active.isInProject ||
+    home.python.active.isEmptyRequirements ||
+    home.python.active.isMissingRequirements
   );
 });
-
-const isNotPythonProject = computed(() => {
-  return !home.pythonProject;
-});
-
-const emptyRequirements = computed(() => {
-  return (
-    home.pythonProject &&
-    home.pythonPackageFile &&
-    home.pythonPackages &&
-    home.pythonPackages.length === 0
-  );
-});
-
-const showScanWelcomeView = computed(() => {
-  return home.pythonProject && !home.pythonPackageFile;
-});
 </script>

extensions/vscode/webviews/homeView/src/components/views/RPackages.vue

@@ -3,9 +3,10 @@
     title="R Packages"
     data-automation="r-packages"
     :actions="rPackageActions"
+    :codicon="home.r.active.isAlertActive ? `codicon-alert` : ``"
   >
     <WelcomeView v-if="showWelcomeView">
-      <template v-if="showScanWelcomeView">
+      <template v-if="home.r.active.isMissingPackageFile">
         <p>
           To deploy R content, you need a package file listing any package
           dependencies, but the file does not exist or is invalid. Use
@@ -18,13 +19,13 @@
           Scan
         </vscode-button>
       </template>
-      <template v-if="isNotRProject">
+      <template v-if="!home.r.active.isInProject">
         <p data-automation="r-not-configured">
           This project is not configured to use R. To configure R, add an [r]
           section to your configuration file.
         </p>
       </template>
-      <template v-if="emptyRequirements">
+      <template v-if="home.r.active.isEmptyRequirements">
         <p>
           This project currently has no R package requirements (file ({{
             home.rPackageFile
@@ -116,24 +117,9 @@ const rPackageActions = computed((): ActionButton[] => {
 
 const showWelcomeView = computed(() => {
   return (
-    isNotRProject.value || emptyRequirements.value || showScanWelcomeView.value
+    !home.r.active.isInProject ||
+    home.r.active.isEmptyRequirements ||
+    home.r.active.isMissingPackageFile
   );
 });
-
-const isNotRProject = computed(() => {
-  return !home.rProject;
-});
-
-const emptyRequirements = computed(() => {
-  return (
-    home.rProject &&
-    home.rPackageFile &&
-    home.rPackages &&
-    home.rPackages.length === 0
-  );
-});
-
-const showScanWelcomeView = computed(() => {
-  return home.rProject && !home.rPackageFile;
-});
 </script>