[Do Not Merge] Added deprecation badges to Stacks page

[KyeMaloy97]

Checklist

• commit message follows commit guidelines.
• website builds and runs in production - for information on how to test locally go here.

Description

Shows a deprecation icon on a tile if the stack has a deprecation field set. Hover on desktop for the info label and tap the icon on mobile for an alert containing the information.

The sample stack has a new deprecation field added to it, as the GraphQL command fails if there is no reference to the field it is looking for anywhere, so it needs to be on at least one stack for it not to fail its query.

Related Issues

#538

[KyeMaloy97]

Okay there is a problem merging the deprecation thing in as is, it needs at least one YAML file to have a deprecated key:value pair or the query fails, it's a quirk of Gatsby using GraphQL. I looked into it and found a huge thread of people asking Gatsby to use some other means rather than erroring but theres no solution at the moment. We may have to wait until the deprecated stack is actually deprecated and then merge the PR when the YAML file has that field added to it

[neeraj-laad]

We can wait till we have the stack actually deprecated.. and updated with the right value,

However, post deprecation, the stack will be removed at some point and I don't think we want a restriction that one of the stacks should always be in the deprecated state.

[KyeMaloy97]

There is a possibility of having an invisible stack that has the required fields so the GraphQL schema can be built, and then we hide it so this stack never shows in the website.

The field is required to be part of at least one stack though as Gatsby needs to resolve the types of all the fields that you look for.

[DunnCoding]

I'd suggest maybe taking a look at the createTypes api in Gatsby. If I remember correctly it allows you to create an 'Object' to represent a data structure, in which you can make those properties optional if required. So for example:

type Stack implements Node {
  id: ID!
  name: String
  description: String
  deprecated: String! // ! signifies optional
}

I'm not 100% sure if it'll work but it may be worth looking into rather than forcing a deprecated stack to be present.

[KyeMaloy97]

I will have a look into it, might have to ask in the Gatsby discord because that stuff is quite complex and i don't even know if it will fix our issue.

[KyeMaloy97]

The issue has been resolved, thanks for that link David.

[KyeMaloy97]

Unfortunately we cannot merge this as is, because updating the packages with npm update breaks firefox for some reason. We had this issue a few weeks/months ago and I cannot implement my fix without updating Gatsby as I need to access an API delivered in a newer version that the one we are using.

[neeraj-laad]

If we assume there will always be a stack in deprecated state, does it allow us to move fwd for now?

[neeraj-laad]

@KyeMaloy97 Shall we close this PR? given we have a different solution in place now..

[KyeMaloy97]

@neeraj-laad Sure, sounds good to me.