How to access child component from parent component in Ember

The concept is fairly simple.

Assume I have a child component with its own separate js and hbs. Child-component.hbs =>

<Button options =  selected=
> Submit <Button

Child-component.js

listOptions =[{id: 124, name: 'Mywork'} selected => performing an action after getting the value from hbs selection.

Now I'm importing this into another component Main-component.hbs like this

<ChildComponent />

This is rendering as expected with options and all, but based on the selectedOption I want to do something in my main component. Handling the action in the Main-component is not an option for me as its not what I was told to do. Is it possible to access selectedOption from the main-component? Kindly help.

Please note that I want to achieve this in Octane version.

Does an ember package imported component use its parents library version?

• I tried to use a component from an imported package inside a class in ember.
• I expected the component to use it's own version of ember-intl.
• It resulted in the imported package using the parents version of ember-intl.

I have ember-intl 5.7.0 in parent and 4.3.0 used in an imported package.

There is a component called <Calendar> from the imported package used in a parent class which has a string that looks like: "{Date} was selected for <span class='exampleName'".

4.3.0 will handle this string fine but 5.7.0 will fail as the major version change was that apostrophes were made into escape characters :[

node_modules shows that the child package resolves to 4.3.0 but during runtime it fails due to the apostrophe.

The imported component uses a service by injecting it:

import { inject as service } from '@ember/service';

intl: service()

I've added logging to both versions to see which is used and it is the parent version. I would prefer not to downgrade the parent or alter the child library.

Can anyone explain why this is happening?

If any more info is needed, let me know, thanks.

How to create a dependency graph of components in Ember?

I'm trying to navigate through a large Ember project and would like to create a visual graph of the component tree.

Is there a way to parse a .hbs file and create a dependency graph of the components and sub-components in it?

Is there a way to do the same for an Ember route?

What I've found

• I've found dependency-cruiser but not sure how it could work to parse through .hbs files https://github.com/sverweij/dependency-cruiser

asynchronous/non-blocking Javascript

I am trying to make the existing code to async/non-blocking code. Can anyone help me with this? This is in route.js

async model(params) {
    let userCertificate = await Certificate.findByPublicId(this, params.certificate_public_id, { competencies: true }),
      product,
      competency,
      user = await User.find(this, userCertificate.user_id);

    if (userCertificate.granted_by_product_id) {
      product = await Product.find(this, userCertificate.granted_by_product_id);
    } else if (userCertificate.granted_by_competency_id) {
      competency = await Competency.find(this, userCertificate.granted_by_competency_id);
    }

    await userCertificate.fetchFileData(this);

    return { userCertificate, product, competency, user};
  }

Ember invoke a component function from another component in same engine parent

my requirement is to use component actions from another component.Need to know whether it is possible to use data-down for this case.

Say,

I'm trying to invoke first-component from here engine/addon/templates/application.hbs like below

engine/addon/templates/application.hbs

    
    <FirstComponent action=actionFromSecondCompo/>
    

From this FirstComponent i want to invoke, second-component function handled in

engine/addon/components/SecondComponent.js

actionFromSecondCompo(){
 console.log("Print Invoked secondcomponent");
}

Note: Both components are in same engine parent
i've tried to use **extend** the firstComponent in secomdCompo js like below.

>>engine/addon/components/SecondComponent.js

import FirstComponent from 'engine/components/FirstComponent'; export default FirstComponent.extend({

But issue here is, its invoking willDestroyElement() function from FirstComponent.Hence i don't need the changes handled inside this destroy function.

What is the difference between route and path in EmberJs

What is the difference between route and path in EmberJs

Router.map(function () {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

Ember.js 4.4 classic template syntax

I would like to update a project built in Ember 3.28 without Octane to version 4.4.

I tried using ember-cli-update to change version and now all sorts of errors are thrown, such as template properties that must be used with @ and curly brackets components no longer supported...

I am new to Ember and I haven't understood if it is still possible to use the classic syntax on 4.4, if so, how can I continue to use the classic syntax? Especially on templates.

Thank you!

Chromium browser failing in docker container when running acceptance tests(visual regression backstopjs)

I've implemented visual regressions testing into our Ember project and everything has being going fine up until now. I've made about 150 of them and made sure all of them succeed. Now that I'm trying to deploy them I can't get them working in my docker container. I'm currently trying to just make one test run by building the docker container locally. I run this command to make the docker container the same as my local environment. I start the shell and then run ember backstop-remote to start a backstop server(required for working with backstop).

docker  run -it \                                                       
     -v "/home/michael/Documents/Projects/atlas":/var/www \
    -v ~/.ssh:/root/.ssh \
    registry.gitlab.com/getflights/docker-ember \
    /bin/sh -c "
    GITLAB_TOKEN=TOKEN yarn && sh"

After the docker container is running and has an instance of the backstop-remote server running aswell i will run this command: docker exec -it container-name ember test --filter="search" ci --silent --r xunit Here my test should normally succeed but instead i get this output after everything being built.

<testsuite name="Testem Tests" tests="1" skipped="0" failures="1" timestamp="Thu Nov 03 2022 14:15:30 GMT+0000 (Coordinated Universal Time)" time="3.014"><testcase classname="Chrome" name="error" time="0"><error message="Error: Browser exited unexpectedly&#10;Non-zero exit code: 1&#10;Stderr: &#10; Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Operation not permitted&#10;[1103/141529.926012:FATAL:zygote_host_impl_linux.cc(187)] Check failed: ReceiveFixedMessage(fds[0], kZygoteBootMessage, sizeof(kZygoteBootMessage), &amp;boot_pid). &#10;Received signal 6&#10;  r8: 00007ffeaac8f334  r9: 00007f74088d67e0 r10: 0000000000000008 r11: 0000000000000246&#10; r12: 00007ffeaac8fb00 r13: 00007ffeaac8fa3c r14: 00007ffeaac8f898 r15: 00000000000000a0&#10;  di: 0000000000000002  si: 00007ffeaac8f200  bp: 00007ffeaac8f200  bx: 0000000000000000&#10;  dx: 0000000000000000  ax: 0000000000000000  cx: 00007f740d06a9f3  sp: 00007ffeaac8f1f8&#10;  ip: 00007f740d06a9f3 efl: 0000000000000246 cgf: 002b000000000033 erf: 0000000000000000&#10; trp: 0000000000000000 msk: 0000000000000000 cr2: 0000000000000000&#10;[end of stack trace]&#10;Calling _exit(1). Core file will not be generated.&#10;&#10;"/></testcase></testsuite>
Testem finished with non-zero exit code. Tests failed.

The dockerfile for this setup is:

FROM node:14.17.1-alpine

VOLUME /var/www
WORKDIR /var/www

RUN apk update && apk add --no-cache git openssh curl chromium
RUN yarn global add bower
RUN yarn global add ember-cli

COPY install.sh /root/
RUN chmod u+x /root/install.sh

COPY fix-uid.sh /root/
RUN chmod u+x /root/fix-uid.sh && /root/fix-uid.sh
RUN ln -s /usr/bin/chromium-browser /usr/bin/chrome

CMD ember s

Alternatively I've also tried to change my dockerfile to how it's declared in backstopjs for when your tests don't work because the chromium browser exits. I use the same command to run as in the previous setup. This is the error i get:

<testsuite name="Testem Tests" tests="1" skipped="0" failures="1" timestamp="Thu Nov 03 2022 14:25:37 GMT+0000 (Coordinated Universal Time)" time="5.106"><testcase classname="Chrome" name="error" time="0"><error message="Error: Browser exited unexpectedly&#10;Non-zero exit code: 1&#10;Stderr: &#10; [1103/142536.505398:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.&#10;&#10;"/></testcase></testsuite>
Testem finished with non-zero exit code. Tests failed.

I have a different dockerfile setup as previously mentioned. I made it according to this: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md Running on Alpine sections. This is it:

FROM node:14.17.1-alpine

VOLUME /var/www
WORKDIR /var/www

RUN apk update && apk add --no-cache git openssh curl chromium
RUN yarn global add bower
RUN yarn global add ember-cli

COPY install.sh /root/
RUN chmod u+x /root/install.sh

COPY fix-uid.sh /root/
RUN chmod u+x /root/fix-uid.sh && /root/fix-uid.sh
RUN ln -s /usr/bin/chromium-browser /usr/bin/chrome

RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
    nodejs \
    yarn
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser

RUN yarn add puppeteer@13.5.0

RUN addgroup -S pptruser && adduser -S -G pptruser pptruser \
    && mkdir -p /home/pptruser/Downloads /app \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /app

USER pptruser

CMD ember s

If anything is missing, please let me know and I'll add it ASAP. Any help is greatly appreciated!

Should I try an MSAL getTokenSilent() before any request for a protected resource?

I'm integrated the MSAL JS library with an EmberJS SPA. In the current implementation I have a getTokenSilent() call before a user requests a "protected" resource. This means that after a user Authenticates, they collect a new access token before the resource is requested.

Is this intended? Aside from an extra network request I don't see many drawbacks. It should allow for very short-lived access tokens and allow MSAL to check that a user is still in a "valid" state (ie they haven't had their account disabled) since they logged in.

I'm very new to OAUTH and MSAL so some guidance would be great.