PR #3: Frontend Teams subfolder feature dropdown when creating a new draft

Dockerfile.indexer

@@ -0,0 +1,19 @@
+# Stage 1: Build the application for backend go
+FROM golang:1.18-alpine
+
+# Set the work dir
+WORKDIR /app
+
+# Copy all project files
+COPY .. /app
+
+# Build the backend application
+# Change directory to 'web' and run commands sequentially
+RUN rm -f /app/hermes \
+    && CGO_ENABLED=0 go build -o /app/hermes ./cmd/hermes
+
+# # Expose the necessary port for the application
+# EXPOSE 8000 9999
+
+## Run the script to start both server and indexer
+CMD ["./hermes","indexer","-config=config_indexer.hcl"]

Dockerfile.server

@@ -0,0 +1,43 @@
+# Stage 1: Fetching Frontend base utilities
+FROM node:16.3.0-alpine AS frontend
+
+# Set the work dir
+WORKDIR /app
+
+# Copy all project files
+COPY .. /app
+
+
+# Install corepack for Yarn~3.3.0
+RUN npm install -g -f yarn \
+    && npm install -g ember-cli \
+    && yarn set version "3.3.0" \
+    && cd /app/web \
+    && yarn install \
+    && rm -rf dist/ \
+    && yarn build 
+
+
+# Stage 2: Build the application for backend go
+FROM golang:1.18-alpine 
+
+# Copy the built frontend from the previous stage
+COPY --from=frontend /app /app
+
+# Set the work dir
+WORKDIR /app
+
+# Build the backend application
+# Change directory to 'web' and run commands sequentially
+RUN rm -f /app/hermes \
+    && CGO_ENABLED=0 go build -o /app/hermes ./cmd/hermes
+
+# # Expose the necessary port for the application
+# EXPOSE 8000 9999
+
+
+## Grant execute permissions to the script
+#RUN chmod +x /app/run.sh
+
+# Run the script to start both server and indexer
+CMD ["./hermes","server","-config=config.hcl"]

web/app/components/header/nav.hbs

@@ -43,6 +43,14 @@
         @icon="file-plus"
         class="create-draft-button"
       />
+      <Hds::Button
+        @route="authenticated.new"
+        @isIconOnly={{true}}
+        @text="Create draft"
+        @icon="file-plus"
+        class="create-draft-button"
+      />
+
       <div class="relative">
         {{#if this.userMenuHighlightIsShown}}
           <Header::UserMenuHighlight />

web/app/components/inputs/product-select/index.hbs

@@ -9,6 +9,7 @@
         @onItemClick={{this.onChange}}
         @selected={{@selected}}
         @placement={{@placement}}
+        @selectedBU={{@selectedBU}}
         @isSaving={{@isSaving}}
         @renderOut={{@renderOut}}
         @icon={{this.icon}}
@@ -33,6 +34,7 @@
         @placement={{@placement}}
         @isSaving={{@isSaving}}
         @renderOut={{@renderOut}}
+        @selectedBU={{@selectedBU}}
         class="w-[300px] product-select-dropdown-list"
         ...attributes
       >
@@ -64,6 +66,7 @@
               @product={{dd.value}}
               @selected={{dd.selected}}
               @abbreviation={{dd.attrs.abbreviation}}
+              @selectedBU={{@selectedBU}}
             />
           </dd.Action>
         </:item>

web/app/components/inputs/product-select/index.ts

@@ -17,6 +17,7 @@ interface InputsProductSelectSignature {
     placement?: Placement;
     isSaving?: boolean;
     renderOut?: boolean;
+    onSelectBU: (selectedBU: string) => void;
   };
 }
 
@@ -36,6 +37,11 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
 
   @tracked products: ProductAreas | undefined = undefined;
 
+  @action
+  selectBU(selectedBU: string) {
+    this.args.onSelectBU(selectedBU) // Pass the selected BU to the parent component
+  }
+
   get icon(): string {
     let icon = "folder";
     if (this.selected && getProductId(this.selected)) {
@@ -55,6 +61,7 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
 
   @action onChange(newValue: any, attributes?: ProductArea) {
     this.selected = newValue;
+    this.selectBU(newValue);
     this.args.onChange(newValue, attributes);
   }
 
@@ -64,6 +71,7 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
         .fetch("/api/v1/products")
         .then((resp) => resp?.json());
       this.products = products;
+      console.log(this.products);
     } catch (err) {
       console.error(err);
       throw err;

web/app/components/inputs/team-select/index.hbs

@@ -0,0 +1,81 @@
+{{! @glint-nocheck - not typesafe yet }}
+{{! https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ }}
+
+<div data-test-product-select>
+  {{#if this.teams}}
+    {{#if @formatIsBadge}}
+      <Inputs::BadgeDropdownList
+        @items={{this.teams}}
+        @listIsOrdered={{true}}
+        @onItemClick={{this.onChange}}
+        @selected={{@selected}}
+        @placement={{@placement}}
+        @isSaving={{@isSaving}}
+        @renderOut={{@renderOut}}
+        @icon={{this.icon}}
+        class="w-80 product-select-dropdown-list"
+        ...attributes
+      >
+        <:item as |dd|>
+          <dd.Action data-test-product-select-badge-dropdown-item>
+            <Inputs::TeamSelect::Item
+              @product={{dd.value}}
+              @selected={{dd.selected}}
+            />
+          </dd.Action>
+        </:item>
+      </Inputs::BadgeDropdownList>
+    {{else}}
+      <X::DropdownList
+        @items={{this.teams}}
+        @listIsOrdered={{true}}
+        @onItemClick={{this.onChange}}
+        @selected={{@selected}}
+        @placement={{@placement}}
+        @isSaving={{@isSaving}}
+        @renderOut={{@renderOut}}
+        class="w-[300px] product-select-dropdown-list"
+        ...attributes
+      >
+        <:anchor as |dd|>
+          <dd.ToggleAction
+            class="x-dropdown-list-toggle-select product-select-default-toggle hds-button hds-button--color-secondary hds-button--size-medium"
+          >
+            <FlightIcon @name={{or (get-product-id @selected) "folder"}} />
+
+            <span
+              class="product-select-selected-value
+                {{unless @selected 'text-color-foreground-faint'}}"
+            >
+              {{or @selected "Select your team/pod"}}
+            </span>
+
+            {{#if this.selectedProductAbbreviation}}
+              <span class="product-select-toggle-abbreviation">
+                {{this.selectedProductAbbreviation}}
+              </span>
+            {{/if}}
+
+            <FlightIcon @name="caret" class="product-select-toggle-caret" />
+          </dd.ToggleAction>
+        </:anchor>
+        <:item as |dd|>
+          <dd.Action class="pr-5">
+            <Inputs::TeamSelect::Item
+              @product={{dd.value}}
+              @selected={{dd.selected}}
+              @abbreviation={{dd.attrs.abbreviation}}
+            />
+          </dd.Action>
+        </:item>
+      </X::DropdownList>
+    {{/if}}
+  {{else if this.fetchteams.isRunning}}
+    <FlightIcon data-test-product-select-spinner @name="loading" />
+  {{else}}
+    <div
+      class="absolute top-0 left-0"
+      {{did-insert (perform this.fetchteams)}}
+    ></div>
+  {{/if}}
+</div>

web/app/components/inputs/team-select/index.ts

@@ -0,0 +1,154 @@
+import { assert } from "@ember/debug";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { Placement } from "@floating-ui/dom";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { task } from "ember-concurrency";
+import FetchService from "hermes/services/fetch";
+import getProductId from "hermes/utils/get-product-id";
+
+interface InputsTeamSelectSignature {
+  Element: HTMLDivElement;
+  Args: {
+    selectedBU: string | null;
+    selected?: string;
+    onChange: (value: string, attributes?: TeamArea) => void;
+    formatIsBadge?: boolean;
+    placement?: Placement;
+    isSaving?: boolean;
+    renderOut?: boolean;
+  };
+}
+
+type TeamAreas = {
+  [key: string]: TeamArea;
+};
+
+export type TeamArea = {
+  abbreviation: string;
+  perDocDataType: unknown;
+  BU: string
+};
+
+export default class InputsTeamSelectComponent extends Component<InputsTeamSelectSignature> {
+  @service("fetch") declare fetchSvc: FetchService;
+
+  @tracked selected = this.args.selected;
+
+  @tracked teams: TeamAreas | undefined = undefined;
+  @tracked selectedBU: string | null = null;
+
+  get icon(): string {
+    let icon = "folder";
+    if (this.selected && getProductId(this.selected)) {
+      icon = getProductId(this.selected) as string;
+    }
+    return icon;
+  }
+
+  get selectedProductAbbreviation(): string | null {
+    if (!this.selected) {
+      return null;
+    }
+    const selectedProduct = this.teams?.[this.selected];
+    assert("selected Team must exist", selectedProduct);
+    return selectedProduct.abbreviation;
+  }
+
+  @action onChange(newValue: any, attributes?: TeamArea) {
+    this.selected = newValue;
+    this.args.onChange(newValue, attributes);
+  }
+
+  // @action onBUChange(){
+  //   this.selectedBU = this.args.selectedBU;
+  //   this.fetchteams.perform();
+  // }
+
+  // protected fetchProducts = task(async () => {
+  //   try {
+  //     let products = await this.fetchSvc
+  //       .fetch("/api/v1/products")
+  //       .then((resp) => resp?.json());
+  //     this.products = products;
+  //   } catch (err) {
+  //     console.error(err);
+  //     throw err;
+  //   }
+  // });
+    protected fetchteams = task(async () => {
+      try {
+        // this.selectedBU = this.args.selectedBU;
+        // Filter the teams based on the selected business unit
+        // console.log("parent injected value is: ",this.selectedBU)
+        // let teams: TeamAreas = {
+        this.teams = {
+          "Spinage": {
+            "abbreviation": "SPI",
+            "perDocDataType": null,
+            "BU": "Platform"
+          },
+          "RECON": {
+            "abbreviation": "RCN",
+            "perDocDataType": null,
+            "BU": "Platform"
+          },
+          "Dev-Prod": {
+            "abbreviation": "DP",
+            "perDocDataType": null,
+            "BU": "Platform"
+          },
+          "Team A-cap": {
+            "abbreviation": "A-Cap",
+            "perDocDataType": null,
+            "BU": "Capital"
+          },
+          "Team B-cap": {
+            "abbreviation": "B-cap",
+            "perDocDataType": null,
+            "BU": "Capital"
+          },
+          "Team A-X": {
+            "abbreviation": "A-x",
+            "perDocDataType": null,
+            "BU": "X"
+          },
+          "Team B-x": {
+            "abbreviation": "bx",
+            "perDocDataType": null,
+            "BU": "X"
+          },
+          "Team d-paymnt": {
+            "abbreviation": "d-pay",
+            "perDocDataType": null,
+            "BU": "Payments"
+          },
+        };
+      // // Filter the teams based on the selected business unit
+      // const filteredTeams: TeamAreas = {};
+      //
+      // for (const team in teams) {
+      //   if (Object.prototype.hasOwnProperty.call(teams, team)) {
+      //     const teamData: TeamArea | undefined = teams[team];
+      //     if (teamData && teamData.BU  === this.selectedBU) {
+      //       filteredTeams[team] = teamData;
+      //     }
+      //   }
+      // }
+      // console.log("Here i am");
+      // console.log(filteredTeams)
+      // this.teams = filteredTeams;
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
+    });
+
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Inputs::TeamSelect": typeof InputsTeamSelectComponent;
+  }
+}