feat: add description to output

Author: Anton Lilleby

README.md

@@ -41,14 +41,14 @@ You can use the `vue3-app-configuration` plugin in your Vue components in two wa
 
   const { getFeatureFlag } = useFeatureFlags();
 
-  const isFeatureEnabled = getFeatureFlag(
+  const { isFeatureEnabled, featureDescription } = getFeatureFlag(
     "your-feature-flag-name",
     "your-label"
   );
 </script>
 
 <template>
-  <p v-if="isFeatureEnabled">This feature is enabled</p>
+  <p v-if="isFeatureEnabled">{{ featureDescription }}</p>
   <p v-else>This feature is disabled</p>
 </template>
 ```
@@ -63,7 +63,7 @@ You can use the `vue3-app-configuration` plugin in your Vue components in two wa
   const { getFeatureFlagAsync } = useFeatureFlags();
 
   onMounted(async () => {
-    const isFeatureEnabled = await getFeatureFlagAsync(
+    const { isFeatureEnabled, featureDescription } = await getFeatureFlagAsync(
       "your-feature-flag-name",
       "your-label"
     );

dist/index.d.mts

@@ -2,8 +2,14 @@ import { AppConfigurationClient } from '@azure/app-configuration';
 import { App, Ref } from 'vue';
 
 type TypeAppConfigurationClient = AppConfigurationClient | null;
-type TypeGetFeatureFlag = (name: string, label?: string) => Ref<boolean>;
-type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<boolean>;
+type TypeGetFeatureFlag = (name: string, label?: string) => {
+    isFeatureEnabled: Ref<boolean>;
+    featureDescription: Ref<string>;
+};
+type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<{
+    isFeatureEnabled: boolean;
+    featureDescription: string;
+}>;
 interface IFeatureFlagsManager {
     appConfigurationClient: TypeAppConfigurationClient;
     getFeatureFlag: TypeGetFeatureFlag;

dist/index.d.ts

@@ -2,8 +2,14 @@ import { AppConfigurationClient } from '@azure/app-configuration';
 import { App, Ref } from 'vue';
 
 type TypeAppConfigurationClient = AppConfigurationClient | null;
-type TypeGetFeatureFlag = (name: string, label?: string) => Ref<boolean>;
-type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<boolean>;
+type TypeGetFeatureFlag = (name: string, label?: string) => {
+    isFeatureEnabled: Ref<boolean>;
+    featureDescription: Ref<string>;
+};
+type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<{
+    isFeatureEnabled: boolean;
+    featureDescription: string;
+}>;
 interface IFeatureFlagsManager {
     appConfigurationClient: TypeAppConfigurationClient;
     getFeatureFlag: TypeGetFeatureFlag;

dist/index.js

@@ -36,44 +36,60 @@ var featureFlagsManager = (connectionString) => {
     appConfigurationClient = new AppConfigurationClient(connectionString);
   }
   const getFeatureFlag = (name, label) => {
-    const isEnabled = ref(false);
-    if (!appConfigurationClient)
-      return isEnabled;
+    const isFeatureEnabled = ref(false);
+    const featureDescription = ref("");
+    if (!appConfigurationClient) {
+      return { isFeatureEnabled, featureDescription };
+    }
     try {
       appConfigurationClient.getConfigurationSetting({
         key: `${featureFlagPrefix}${name}`,
         label
       }).then((response) => {
-        if (!isFeatureFlag(response))
-          return isEnabled;
-        isEnabled.value = parseFeatureFlag(response).value.enabled;
-        return isEnabled;
+        if (!isFeatureFlag(response)) {
+          return { isFeatureEnabled, featureDescription };
+        }
+        const {
+          value: { enabled, description = "" }
+        } = parseFeatureFlag(response);
+        isFeatureEnabled.value = enabled;
+        featureDescription.value = description;
+        return { isFeatureEnabled, featureDescription };
       });
     } catch (error) {
       console.error(
         "[App Configuration Plugin] Error retrieving feature flag.",
         error
       );
     }
-    return isEnabled;
+    return { isFeatureEnabled, featureDescription };
   };
   const getFeatureFlagAsync = (name, label) => __async(void 0, null, function* () {
-    if (!appConfigurationClient)
-      return false;
+    let isFeatureEnabled = false;
+    let featureDescription = "";
+    if (!appConfigurationClient) {
+      return { isFeatureEnabled, featureDescription };
+    }
     try {
       const response = yield appConfigurationClient.getConfigurationSetting({
         key: `${featureFlagPrefix}${name}`,
         label
       });
-      if (!isFeatureFlag(response))
-        return false;
-      return parseFeatureFlag(response).value.enabled;
+      if (!isFeatureFlag(response)) {
+        return { isFeatureEnabled, featureDescription };
+      }
+      const {
+        value: { enabled, description = "" }
+      } = parseFeatureFlag(response);
+      isFeatureEnabled = enabled;
+      featureDescription = description;
+      return { isFeatureEnabled, featureDescription };
     } catch (error) {
       console.error(
         "[App Configuration Plugin] Error retrieving feature flag.",
         error
       );
-      return false;
+      return { isFeatureEnabled, featureDescription };
     }
   });
   return { appConfigurationClient, getFeatureFlag, getFeatureFlagAsync };